CSS TRICKS TO STRONG MENU NAVIGATION

Salah satu navigasi menu horizontal yaitu Strong menu merupakan menu yang sangat langka ditemukan, karena menu yang satu ini memang tidak dipublikasikan script nya. Lantas dari mana saya mendapatkan script nya? saya mendapatkan script ini dari template premium 'personal press', yang kebetulan menggunakan menu yang keren dan elegan ini "menurut saya".

Nama Strong Menu pun adalah nama panggilan dari saya, karena bingung mau menyebut apa :p dan berhubung ada effect strong pada teks menu nya maka saya panggil lah si Strong Menu. hehehe
Ciri khas dari strong menu ini adalah font size yang besar dan terdapat deskripsi dari setiap menu nya.

Ok! biar sobat semua pada ngga bingung seperti apa wujud dari navigasi menu ini, nih saya sediakan screenshoot nya waktu script menu nya di pasang pada template saya yang sebelum-sebelumnya.

[Klik gambar untuk memperjelas]

[Klik gambar untuk memperjelas]

LIVE DEMO

Dah lihat kan wujud nya? yang gede-gede itu lhoo bukan yang posisinya di navbar yah, oia pada saat saya pasang script nya waktu itu belum selesai, saya belum menghilangkan lambang bullet nya. Karena terburu-buru kejar tayang ingin mengganti dan merombak template berikutnya hihihi "bikin ancur maksudnya".
Dan lebih disayangkan lagi, saya tidak bisa memasang script strong menu ini pada template saya yang sekarang dikarenakan kekurang cocokan. Yah yah.. memang dalam design sesuatu sangat lah perlu kecocokan antara yang ini dan yang itu, semuanya tergantung ide & kreatifitas nya sobat.

Yaudah nih jika sobat tertarik untuk mencoba nya, langsung aja di copy script nya :

<ul class='nav superfish clearfix' id='menu-default'>
<li><a href='http://se-avancee.blogspot.com/'><strong>HOME</strong><span>Take me back to the home page</span></a>
</li>
<li><a href='http://se-avancee.blogspot.com/2011/05/about-se-avancee.html'><strong>ABOUT</strong><span>History of this blog is made (Vent)</span></a>
</li>
<li><a href='http://se-avancee.blogspot.com/'><strong>SITEMAP</strong><span>View all blog content is that good</span></a>
</li>
<li><a href='http://se-avancee.blogspot.com/search/label/Tutorial%20Blogger'><strong>BLOGGER</strong><span>Read about the great blog tutorial</span></a>
</li>
<li><a href='http://se-avancee.blogspot.com/2011/02/contact-me_27.html'><strong>CONTACT</strong><span>Contact me if it is need and important</span></a>
</li>
<li><a href='http://se-avancee.blogspot.com/feeds/posts/default'><strong>SUBSCRIBE</strong><span>Subscribe free daily posts update</span></a>
</li>
</ul>

ul.nav { padding: 30px 0px 0px 80px; float: left; }
ul.nav li { padding: 0px 20px 0px 0px; }
ul.nav li a { text-align: left; }
ul.nav li a strong { font-family: Impact, Charcoal, sans-serif; font-size: 30px; color: #5f5d53; text-shadow: 1px 1px 1px #ffffff; text-transform: uppercase; display: block; font-weight: normal; }

ul.nav li a span { font-family: Arial, sans-serif; font-size: 11px; font-style: italic; text-transform: none; display: block; padding: 11px 0px 0px; color:#A09E90; width:105px; }

ul.nav li li a { font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; text-transform: none; /* Css SE tricks 'Se Avancee' */ }

.nav ul { position:absolute; top:-999em; background-position: bottom; background-repeat: no-repeat; z-index: 10; }
.nav li { float:left; position:relative; }
.nav a { display:block; float: left; }
    .nav li:hover ul, ul.nav li.sfHover ul { left:0px; top:92px; }
    .nav li:hover li ul, .nav li.sfHover li ul { top:-999em; }
        .nav li li:hover ul, ul.nav li li.sfHover ul { left:211px; top:-11px; }
    .nav li:hover ul, .nav li li:hover ul { top: -999em; }
    .nav li li {    display: block;    padding: 0px; float: left; height: auto !important; }
    .nav li ul { width: 202px; }
        .nav li li a:link, .nav li li a:visited {    display: block; height: auto; float: left; }
        .nav li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }

ul.nav li a:hover, ul.nav li a:hover strong, ul.nav li a:hover span, ul.nav > li.current-cat > a strong, ul.nav > li.current-cat > a span, ul.nav > li.current_page_item > a strong, ul.nav > li.current_page_item > a span, ul.nav > li.current-menu-item > a span, ul.nav > li.current-menu-item > a strong { text-decoration: none; color: #108495; }

ul.nav ul li a { width: 167px; padding: 10px 5px 10px 37px; font-weight: bold; color: #5f5d53; text-shadow: 1px 1px 1px #ffffff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeprwNxgTUs6yadSj0-WiT2vZ9B9RT23VqV1C6zx_tzmjWA_74SHwi3ERsvA90lejlJD-xdqiwIzEcW0B3sNYm5K4vVB9io4NLkfhWT8JCiQzeEf79uZRHz1vsEiBiAv2XoVmMXB4cPsvG/) no-repeat 19px 16px; }

Tata letak :
* Untuk Script HTML bisa sobat letakkan pada elemen laman 'widget/gadget'
* Untuk 3 Script CSS terserah sobat mau letakkan dimana, yang pasti di tempat deretan css pada template sobat atau lebih mudah nya di atas kode ]]></b:skin>

Ket.
* Jika hasil strong menu terdapat lambang bullet, maka hapus lah script yang saya tandai warna merah pada Script CSS ke 3.

Oke mungkin segitu saja yang bisa saya jelaskan, tidak mungkin juga jika saya harus menjabarkan satu persatu fungsi-fungsi script/tag nya, jika sobat ingin menanyakan sesuatu tentang tutorial ini, silahkan tinggalkan komentar dibawah dan insyallah jika saya bisa saya akan membantu :D .

Selamat berkreasi :P