Create a Ribbon DropDown Menu with CSS3 and jQuery

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
        });
 
    } 
 
    });

---