CLIENT: Second Nature
CLIENT: Ungureanu Imobiliare
CLIENT: Agriferma
CLIENT: Bere Bauturi Bucuresti
CLIENT: Fatal Beauty Studio
In acest tutorial vom crea un meniu de navigare unic cu casute care vor aluneca. Ideea este de a face o cutie tip box meniu, in timp ce o miniatură apare la atingere. Noi vom include, de asemenea, o caseta de submeniu cu alte link-uri pentru meniu. Submeniul va aluneca la stanga sau la dreapta, in functie de punctul de meniu pe care suntem. Vezi demo !
HTML
Pentru structura HTML o sa folosim o lista neordonata in cazul care fiecare element din meniu va contine elementul principal si legatura intr-un div pentru submeniu:
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portfolio</span>
<span class="sdt_descr">My work</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Websites</a>
<a href="#">Illustrations</a>
<a href="#">Photography</a>
</div>
</li>
…
</ul>
Daca nu exista nici un submeniu, div-urile pot fi pur si simplu omise. Imaginea nu va fi aratata la inceput, deoarece vom stabili latimea si inaltimea 0 în CSS.
Sa aruncam o privire la stil ?!.
CSS
Vom incepe prin a aranja o lista neordonata:
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
In general, ne dorim sa eliminam orice text-decoration si schită pentru toate elementele de legătura in meniul nostru:
text-decoration:none;
outline:none;
}
Elementele noastre in lista vor fi plutitoare (float) stanga si au pozitia (relative), deoarece dorim sa avem o pozitionare absoluta pentru elementele din interior. Daca nu am stabilit asta, elemente ar fi relative la toata pagina:
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}
Stilurile pentru elementul principal de legătură în cazul în care avem cele două deschideri pentru titlu si o descriere, dupa cum urmeaza:
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(../images/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}
Imaginea va fi cu stil, dupa cum urmează:
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
Wrapper-ul pentru titlu si descriere in span-uri va avea urmatorul stil:
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}
In continuare, vom defini stilul pentru caseta de gri care aluneca in jos:
position:absolute;
background:#111;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
Stilurile pentru span si link-urile din casuta vor fi comune:
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
Titlul si descrierea vor avea urmatorul stil:
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px;
font-size:10px;
letter-spacing:1px;
}
Caseta de meniu va fi initial ascunsa sub caseta de gri. Noi va anima deschiderea in dreapta sau stanga, în funcţie de cum este pozitionat meniul. De exemplu, daca suntem la ultimul link din meniu, vrem să animam caseta de submeniu la stanga, în toate celelalte cazuri, vrem să-l animam spre dreapta.
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}
Primul link din submeniu ar trebui să aibă o margine de top:
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}
Si asta a fost tot cu magia din CSS !
JavaScript
$(‘#sdt_menu > li’).bind(‘mouseenter’,function(){
var $elem = $(this);
$elem.find(‘img’)
.stop(true)
.animate({
‘width’:’170px’,
‘height’:’170px’,
‘left’:’0px’
},400,‘easeOutBack’)
.andSelf()
.find(‘.sdt_wrap’)
.stop(true)
.animate({‘top’:’140px’},500,‘easeOutBack’)
.andSelf()
.find(‘.sdt_active’)
.stop(true)
.animate({‘height’:’170px’},300,function(){
var $sub_menu = $elem.find(‘.sdt_box’);
if($sub_menu.length){
var left = ’170px’;
if($elem.parent().children().length == $elem.index()+1)
left = ‘-170px’;
$sub_menu.show().animate({‘left’:left},200);
}
});
}).bind(‘mouseleave’,function(){
var $elem = $(this);
var $sub_menu = $elem.find(‘.sdt_box’);
if($sub_menu.length)
$sub_menu.hide().css(‘left’,’0px’);
$elem.find(‘.sdt_active’)
.stop(true)
.animate({‘height’:’0px’},300)
.andSelf().find(‘img’)
.stop(true)
.animate({
‘width’:’0px’,
‘height’:’0px’,
‘left’:’85px’},400)
.andSelf()
.find(‘.sdt_wrap’)
.stop(true)
.animate({‘top’:’25px’},500);
});
});
si asta e tot ! Speram ca ti-a placut acest meniu cu Jquery & CSS3 !
Descarca sursa gata realizata.
