Ultimele subiecte
» [All Version] Social Link/Icons
Scris de Jean01Crv 13/10/2014, 12:52 pm

» (pHpBB3) Legenda : Sistem Nou
Scris de Jean01Crv 13/10/2014, 12:49 pm

» Imagine la Statistici & Cine este Conectat ? [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:44 pm

» Statistici - Sistem Nou [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:20 pm

» [Prezentare]Chozen
Scris de valyd1971 16/5/2014, 12:54 am

Vizitator Vizitator
Cine este conectat?
In total sunt 2 utilizatori conectati: 0 Inregistrati, 0 Invizibil si 2 Vizitatori :: 1 Motor de cautare

Nici unul

[ Vizualizeaza toata lista ]


Recordul de utilizatori conectati a fost de 42, 1/11/2012, 8:58 am

Create a Ribbon DropDown Menu with CSS3 and jQuery

Vezi subiectul anterior Vezi subiectul urmator In jos

Create a Ribbon DropDown Menu with CSS3 and jQuery

Mesaj Scris de Site Admin la data de 17/3/2012, 10:10 am

Creaţi un meniu derulant cu Panglică CSS3 şi jQuery
flashuser de 17 februarie, 2012in CSS, Tutoriale | 8 Comentarii »

In acest tutorial, vă voi arăta cum să creaţi un meniu simplu, panglică vertical folosind jQuery şi CSS3.Meniul este cross-browser compatibil deci nu va fi uşor pentru tine de a adapta în proiectul dumneavoastră. Şi să-şi condimenteze un pic meniul, am folosit superfish clasa javascript şi "Oswald" font de la Google bibliotecă fonturi.

În arhiva descărcată veţi avea, de asemenea, acces la fişierul PSD, în cazul în care aveţi nevoie pentru a schimba designul. Să vedem acum cum meniul vertical CSS3 a fost făcut.


HTML Code



Structura HTML este destul de simplă şi uşor de înţeles dacă ştiţi elementele de bază. Vom utiliza o listă de unorder pentru meniu şi va face sa arate bine cu CSS.
Cod:
<ul class="menu">
<li><a href="http://www.flashuser.net">Home</a></li>
<li><a href="#">Dropdown</a>
<ul>
<li><a href="http://www.flashuser.net/category/css">CSS</a></li>
<li><a href="http://www.flashuser.net/category/tutorials">Tutorials</a></li>
<li><a href="http://www.flashuser.net/category/photoshop">Photoshop</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul>
<li><a href="http://www.flashuser.net/category/freebies">Freebies</a></li>
<li><a href="http://www.flashuser.net/category/photography">Photography</a></li>
<li><a href="http://www.flashuser.net/category/web-design">Web Design</a></li>
<li><a href="http://www.flashuser.net/category/wordpress">Wordpress</a></li>
<li><a href="http://www.flashuser.net/category/inspiration">Inspiration</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
De asemenea, vom folosi două divs pentru marginile panglica.

Cod:
<div id="corner-left">Corner left</div>
<div id="corner-right">Corner right</div>

Iată tag-ul trebuie să adăugaţi dacă doriţi să utilizaţi "Oswald" font din biblioteca Google fonturi. Puteţi verifica fonturile disponibile Google aici
Cod:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />


CSS CODE

Acum, pentru meniul principal va folosi un gradient de culoare de fundal şi o umbră de text pentru elementele de meniu. Poziţiona, de asemenea, panglica marginea din stânga şi dreapta în locul lor.
Cod:
.menu {margin:0 auto;
padding:0;
width:700px;
height: 61px;
background: #656d80;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #656d80),color-stop(0.6, #8690a9));
background: -moz-linear-gradient(center bottom,#656d80 0%, #8690a9 60%);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8690a9', endColorstr='#656d80');
}
.menu li {background: url("../images/menu-separator.gif") no-repeat scroll right center transparent;padding: 0px 2px 0px 0px; float: left; position: relative; text-transform:uppercase;font-family: 'Oswald', sans-serif;font-size:18px;}
.menu li a {padding:21px 25px 22px 25px;color: #ffffff;display:block;text-shadow: 0px 1px 0px #000000;}
.menu li:hover > a {color:#ffffff;
background:#56596a;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #56596a),color-stop(0.6, #686c80));
background: -moz-linear-gradient(center bottom,#56596a 0%, #686c80 60%);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#686c80', endColorstr='#56596a');
}
 
#corner-left{position:absolute;background:url("../images/corner-left.png") no-repeat 0 0;top:19px;left:-83px;width:94px;height:60px;text-indent:-9999px;z-index:-2;}
#corner-right{position:absolute;background:url("../images/corner-right.png") no-repeat 0 0;top:19px;right:-83px;width:94px;height:60px;text-indent:-9999px;z-index:-2;}
Drop jos meniu are două secţiuni. Una care ascunde submeniu atunci când nici un articol de meniu principal este plutea celălalt se afişează. Aici este codul pentru a face asta.
Cod:
.menu ul { background: #56596a;
display: none;
margin: 0;
padding: 0;
width: 190px;
position: absolute;
top: 61px;
left: -1px;
}
.menu li:hover > ul {display: block;}
.menu ul li {display:block;
float: none;
margin: 0px 0px 0px 15px;
padding:2px 0px;
background:url("../images/submenu-sep.gif") no-repeat scroll left bottom transparent;
}
Ultima parte este despre stilurile de sub meniu link-ul deasupra, cu o fix minor în IE pentru fundal. Dacă o parte a comentat că veţi vedea că în IE stat Hover moşteneşte Principal de Stat meniul hover stil.
Cod:
.menu ul li:hover a, .menu li:hover li a {
    background: none;
    color: #ffffff;
}
.menu ul a {
display:block;height:auto;
    font-size: 14px;
    padding:15px 0px 15px 10px;
}
.menu ul a:hover, .menu ul li:hover > a{
    background: #56596a !important;
    /* fix IE */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#56596a', endColorstr='#56596a');
    background: -webkit-gradient(linear, left top, left bottom, from(#56596a), to(#56596a)) !important;
    background: -moz-linear-gradient(top,  #56596a,  #56596a) !important;
    color: #e0e0e0 !important;
}


JQuery COD

Pentru a anima meniul va folosi javascript clasa superfish. Întâi de toate asiguraţi-vă că aţi inclus biblioteca jQuery şi clasa superfish în antet.
Cod:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
      <script src="js/superfish.js" type="text/javascript"></script>
Cod:
if (jQuery().superfish) {
        jQuery('ul.menu').superfish({
            delay: 230,
            animation: {opacity:'show', height:'show'},
            speed: 'fast',
            autoArrows: false,
            dropShadows: false
        });
 
    } 
 
    });


CONCLUZIE

Asta e pentru ea acum. Descărcaţi arhiva şi să se joace cu setările. Să ne ştiu dacă ţi-a plăcut acest tutorial şi utilizate meniu într-un proiect.
Download Vizualizare


Sursa : Tutorialized

Site Admin
Client


Vezi profilul utilizatorului

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum