Dalam tutorial ini kita akan menciptakan navigasi kotak geser yang unik. Idenya adalah untuk membuat sebuah kotak dengan item menu slide, sementara thumbnail muncul. Kami juga akan mencakup kotak submenu dengan lebih link untuk beberapa item menu. Submenu akan geser ke kiri atau ke kanan tergantung pada menu yang item kami yang melayang.
Untuk struktur HTML kita akan menggunakan daftar unordered di mana setiap item menu akan berisi item utama link dan div elemen untuk submenu:
Markup
<ul id="sdt_menu" class="sdt_menu">
<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>
Jika ada submenu, div hanya dapat dibiarkan. Gambar tidak dapat ditampilkan di awal karena kita akan mengatur lebar dan tinggi untuk 0 dalam CSS.
Mari kita lihat pada gaya.
CSS
Kita akan mulai dengan Style unordered list:
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
Genrally, kami ingin menghapus standar teks-decoration dan garis besar untuk semua elemen link di menu kami
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
Kami daftar item akan mengambang meninggalkan dan memiliki posisi relatif karena kami ingin menggunakan posisi mutlak untuk unsur-unsur di dalam. Jika kita tidak menetapkan bahwa, mutlak posisi elemen akan relatif terhadap seluruh halaman:
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}
Styling untuk elemen utama link di mana kita memiliki rentang kami dua untuk judul dan deskripsi akan bergaya sebagai berikut:
ul.sdt_menu li > a{
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;
}
Melihat z-index: kami akan mendefinisikan susun agar semua unsur-unsur penting, sehingga yang tepat berada di atas.
Kami menggunakan gambar latar belakang yang menciptakan kaca seperti efek dengan gradien semi-transparan. Ketika Anda menggunakan beberapa latar belakang pola (seperti kayu dalam demo) menciptakan efek yang indah. Pastikan untuk mencoba tekstur yang berbeda-itu hanya tampak luar biasa!
Anda juga dapat bermain dengan bayang-bayang-mengubah nilai-nilai untuk 2px 2px 6px # 000 inset akan memberikan efek yang sangat baik.
Gambar akan bergaya sebagai berikut:
ul.sdt_menu li a img{
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;
}
Kami ingin menghidupkan gambar untuk datang dari bawah, itu sebabnya kami posisi itu benar-benar menggunakan "bawah" sebagai titik referensi. Kami juga menambahkan beberapa kotak rapi bayangan. Nilai-nilai dua adalah nol, membuat bayangan yang tersebar merata di seluruh gambar. Kita ini juga digunakan dalam elemen link. Bayangan ini bahkan dapat digunakan sebagai sebuah trik, setiap kali Anda ingin membuat efek cahaya perbatasan. Keuntungan adalah bahwa bayangan ada tidak benar-benar-Anda tidak perlu mempertimbangkan dalam perhitungan Anda lebar atau tinggi dalam elemen. Kelemahan saat ini adalah bahwa CSS3 tidak didukung di IE.
Wrapper untuk rentang judul dan deskripsi akan memiliki gaya ini:
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}
Jika Anda memiliki beberapa teks yang lebih besar, Anda akan perlu untuk menyesuaikan nilai-nilai ini. Pastikan bahwa nilai-nilai disesuaikan cocok dengan nilai-nilai animasi dalam JavaScript, terlalu.
Selanjutnya, kita mendefinisikan gaya untuk kotak abu-abu yang meluncur turun. Kami memberikan ketinggian 0 dan posisi itu sudah di jalan bahwa kita hanya perlu untuk meningkatkan tinggi dalam animasi:
ul.sdt_menu li span.sdt_active{
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;
}
Gaya umum untuk rentang dan link dalam kotak akan berikut:
ul.sdt_menu li span span.sdt_link,
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;
}
Judul dan deskripsi akan bergaya sebagai berikut:
ul.sdt_menu li span span.sdt_link{
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;
}
Kotak submenu awalnya dapat disembunyikan di bawah kotak abu-abu. Kita kemudian akan menghidupkan ke kanan atau ke kiri tergantung pada di mana kita berada. Jika kita, misalnya, membawa unsur terakhir, kami ingin menghidupkan kotak submenu itu di sebelah kiri, di semua kasus lain yang kita ingin menghidupkan ke kanan.
ul.sdt_menu li div.sdt_box{
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;
}
Link pertama dalam submenu harus memiliki margin atas:
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}
JavaScript
Ketika kita memasuki dengan mouse pada elemen daftar kami memperbesar gambar, dan menunjukkan kedua, rentang sdt_active dan sdt_wrap rentang. Jika elemen memiliki submenu (sdt_box), kemudian kita geser ke samping. Jika elemen adalah yang terakhir dalam menu kami geser kotak submenu ke kiri, jika tidak di sebelah kanan:
$(function() {
$('#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);
});
});
Selamat mencoba......
0 komentar:
Posting Komentar