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]


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(http://lh6.ggpht.com/_YheAVjwbSOw/TM-kUyi_7iI/AAAAAAAAAgM/_cc-o8fDwNA/nav-bullet.png) 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

Comments for this entry

Bangjal Dua Tiga

sedikit kurang jelas gan...kalau mau ganti latarnya gimana, mau ganti fontnya dimana...

Putra Tenzhung

@ Bangjal Dua Tiga : emang sengaja sob.. naahh kalo gini kan enak, kalo ada yg ngga bisa tnggl nanya, gitu maksudnya.

buat warna latarnya belum ada, jadi tambahkan sendiri script css : background: #000; pada kode css 1 ul.nav {
jadi kaya gini : ul.nav { padding: 30px 0px 0px 80px; float: left; background: #000;}

buat font nya, tnggal ganti script css 1 ul.nav li a strong { font-family: Impact, Charcoal, sans-serif;

Ladida

oooh, iya iya, mudeng apa yg dimaksud, jadi begitu bentuknya yah, wkwkwkk, iya ijin teliti css nya, .
langkah2 tutornya mirip tutorial blog2 luar, emang kalo udah terbiasa baca tutorial lokal yaa jadi ngga jelas, wkwkwkkk
makasih infonyaa ..

4-Jie Auto Blog :)

bagus banget nih..
ntar ane coba ya :)

Cara Daftar Google Plus

wihh keren yah menunya, tapi kayaknya kurang cocok dengan template saya. padahal bagus ada deskripsinya pula

sichandra

muantap nih ilmunya sob :D

Putra Tenzhung

@ Ladida : Iyaa.. sob memang script ini dari template premium luar

@ 4-Jie Auto Blog : oke bro.. good luck yah ^_*

Putra Tenzhung

@ Daw-xp : ho oh kya nya sih begitu.. emang agak susah cocokin dengan template2 biasa kya kita sob buat menu yg ini.

@ sichandra : makasih gan... hhe

Dedi Suparman

wowowowowow keren banggetttsssssssss

"Dot-XP"

hadir, keren banget tuch menunya, salam dr http://dotxp.tk

Akhirnya Dapat Pagerank 2

Wow mantap gan

koment back!

TituitBom

mantap ya gan.. jadi pingin coba, tapi gimana ya :(

Putra Tenzhung

@ Dedi Suparman : Iyaa2.. kang.. ~_~!

@ Dot-XP : salam balik dot :D

Putra Tenzhung

@ Dode-Xp : tararengkyou.. iyoo seep

@ TituitBom : coba ajaa, tapi jangan lupa di backup templatenya buat jaga-jaga :D

Shinobi Blog

boleh dicoba nih trik... kayakna keren . . . :)

Pradisz Wardhana

Hehe.. makin mantap aja nih sobat :)

Love is Blogger | Tips dan Trik Blogger | Tips dan Trik Seo

Langsun praktekin..........

By adi tri gunawan

Putra Tenzhung

@ Shinobi Blog : silahkan sobb... :D

@ Pradisz Wardhana : wahh bisa aja nih mastah pradisz.. :p

Putra Tenzhung

@ Adi tri gunawan : oohh iya sobb... good luck yahh.. jgn lupa buat jaga-jaga, di backup template nya :D

Igun Suka-Suka

menarik gan... ditunggu posting berikutnya,,, semngat.

Ngalor Ngidul

Boleh dicoba neh....

EX-DOT

keren banget navigasi menunya, jadi kepengen pake tapi kegedean.. hha

Hendro Prayitno

Di pemberian class dan id saya menemukan:

class='superfish clearfix' id='menu-default'

Tapi di selector saya tidak menemukan class dan id nya sama sekali(saya hanya menemukan nav)..lalu apa fungsi class dan id itu?

Putra Tenzhung

@ Master Hendro : sebelum nya thanks master dah mau maen dan berkunjung di blog saya yg jelek ini.
maaf kalo jawaban yg saya berikan kurang memuaskan :) saya masih newbie

Putra Tenzhung

@ Master Hendro : wehehehe ini dia pertanyaan yg ane takutkan, ckck coz ane jg kurang ngerti. tp wajar aja sie yang nanya nya master bang hendro ahli blogazine :D

Menurut ane (cuma berdasarkan filling) : class='nav superfish clearfix' id='menu-default'

pemberian id disini memang tidak trlihat sangkut paut nya dengan ke-3 script css yg ada, cuma "menurut ane" id='menu-default' menu-default disini ditujukan untuk script default menu yang sudah ada pada template, jadi selector bakal mengikuti #menu-default {} yang sudah ada, misalnya ngga ada berarti ngga ada fungsi nya.

kalo ul class='nav superfish clearfix' kyanya ada sangkut paut dengan ul.nav{} dan css yg lainnya. jadi cuma di ambil tag ul dan nav (nav : depannya saja)

gituu mungkin bang. hehe untuk script menu ini ane jg ga ane selidiki maksud nya dr ul class='nav superfish clearfix' id='menu-default' ane cuma mengambil dari template premium luar.

Teja HTC

Nice Gan Infonya.............

ibnu99

thanks infonya gan di oba dulu ahh

Lagu Religi

Mantafff, infonya. ..mumet lihat script,...salam kenal dan salam suksess

Asmara Susanto

ijin nyemak dolo baru comment lagi

mas, dapet award dari sy, silahkan ambil y hehe

Asmara Susanto

kalo misalny bingung gk dterusin jg gpp sob :D haha

Asmara Susanto

wah rupany navigasi y mas :D hehe
d coba dolo ah

Mala princeza

http://numerologijapsihomatricealeksandrov.blogspot.com/

The Great Mbah Dukun

wah gitu scriptnya, jadi pingin nyoba nih gan, buat blog ane

Setiawan Brothers

ber eksperimen buat ky gni coba ya, dijajal dlu ya gan wokeh

dcyber

ane coba dulu gan,,

AcerNoval

pertanyaan sobat pada artikel saya sudah saya jawab, silahkan dilihat :D

Kerajaanhosting masa depan hosting Indonesia

"mas sory ganggu, hehe
bantu sy yah(suport gitu) untuk kontes SEO yang sy ikuti, Kerajaanhosting masa depan hosting Indonesia visitback kawan #CekInfo"

Kopiah Putih

Waw...bagus nih..
Saya coba dulu ya?
Makasih dan salam kenal.

SEO

kagag mudenk heheh

Pradisz Wardhana

Wah.. belum ada post terbaru nih sob ?

SELAMAT DATANG DI BLOGKU

thx for info sob ,,, ijin cari ilmu lagi :D

halobro

makasih sharenya bro. sy pake wp. sukses selalu yah

AcerNoval

waaah temen ku butuh ini sumpah.. makasih yaa :D

BERITA SEPUTAR INTERNET

Navigasi nya bagus..
ini dia yang saya cari..
terimakasih atas share nya :)

Rahman Al Firous

mas Header yg Hover g bsa mas :( cuma muncul bagian atasnya saja

Plizz...di buat posting ya ???

Putra Tenzhung

@ Rahman Al Firous : element nya mungkin belum adaa.. insyallah yah,.

richard

wah gan thx ya atas menunya saya sdang cari2 hehehe. Kunjungan perdana gan hahaha

Zh!nTho

Keren Euyyy boleh2

Oemar

untuk menghilangkan bullet nya itu gmana..?

padahal ane udh hapus url gambar bulet tersebut om..?

Leave your comment

Thank you.