Vimeo CSS Mega Menus Navigation

Top Mega Menus Navigation pada Blogger Template
Assalamuallaikum Wr.Wb
Under88 - Navigation Menu ini terinspirasi dari Bang fianhar yang pada tahun 2011 sudah di release dan kali ini saya akan update dengan sedikit perubahan style. atau memperbaiki HTML pada navigati menu tersebut.
ya yang pada dasarnya menu navigasi inipun sudah di terapkan pada Vimeo.com. Dibawah ini bagian artikel pada bang fianhar:

Bang Fianhar mengatakan :
"Saya sangat suka navigasi atas diterapkan pada Vimeo.com. Pertama kali aku melihatnya aku ingin menciptakan itu. Dan ini persis apa yang akan saya lakukan dalam tutorial ini.

Apa yang paling saya sukai adalah menu yang turun ke bawah ketika Anda membawa kotak pencarian. Ia menawarkan pilihan pencarian yang berbeda yang dapat Anda pilih dan mempersempit pencarian Anda.

Aku sudah menampilkan tutorial ini Janko's beberapa waktu lalu, tapi kadang-kadang saya akan mengulangi diriku sendiri, karena artikel ini benar-benar didedikasikan untuk menampilkan menu drop-down lanjutan. Sangat rinci dan ditulis dengan baik tutorial, dengan drop-down pencarian penyempitan dan menargetkan pencarian dengan memeriksa pilihan. Menu ini dilakukan sepenuhnya hanya menggunakan CSS
"

Lihat Demo :

Cara Menerapkan Mega Menus Navigation to Blogger Template

silahkan ikuti langkah sebagai berikut :
  1. Langkah 1 : Back Up template Anda. Sebelum melakukan pengeditan template. untuk berjaga-jaga bila terjadi kesalahan.
  2. Langkah 2 : Login Blogger -> Template -> Edit HTML: atau lihat pada gambar di bawah ini :
    edit template blogger
    edit template HTML
    edit template lanjutkan
    edit template Expand

    "Tanpa expand juga masih bisa di lakukan."

  3. Langkah 3 : Copy kode CSS di bawah ini di atas kode ]]></b:skin> atau tekan CTRL+F untuk mempercepat pencarian.
    #janko #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; }
    #janko #menu a { color:#fff; text-decoration:none; }
    #janko #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;}
    #janko #menu > li a:hover {color:#B0D730;}
    #janko #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
    /* sub-menus*/
    #janko #menu ul { padding:0px; margin:0px; display:block; display:inline;}
    #janko #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; }
    #janko #menu li:hover ul { display:block;}
    #janko #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; }
    #janko #menu li ul li:first-child { border-top: none; }
    #janko #menu li ul li a { display:block; color:#0395CC; }
    #janko #menu li ul li a:hover { color:#7FCDFE; }
    /* main submenu */
    #janko #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;}
    /* search */
    #janko .searchContainer div { background-color:#fff; display:inline; padding:5px;}
    #janko .searchContainer input[type="text"] {border:none;}
    #janko .searchContainer img { vertical-align:middle;}
    /* corners*/
    #janko #menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
    #janko #menu .corner_inset_right { position:absolute; top:0px; left:150px;}
    #janko #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
    #janko #menu .corner_left { position:absolute; left:0px; top:0px;}
    #janko #menu .corner_right { position:absolute; left:132px; top:0px;}
    #janko #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;}
  4. Langkah 4 : Langkah 4 : Tambahkan kode dibawah ini pada bagian Header Blog atau pada bagian <body> atau jika template masih setandar letakkan pada bagian <div id='outer-wrapper'> :
    <div id='janko'>
    <div style='margin-left:50px;'>
    <ul id='menu'>
    <li class='logo'>
    
    <img alt='' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/menu_left.png' style='float:left;'/>
    <ul id='main'>
    <li>Welcome to <b>Create Vimeo-like top navigation</b> tutorial!</li>
    <li class='last'>
    <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_blue_left.png'/>
    <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot_blue.png'/>
    <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_blue_right.png'/>
    
    </li>
    </ul>
    
    </li>
    <li><a href='#'>Login</a>
    </li>
    <li><a href='#'>Help</a>
    <ul id='help'>
    <li>
    
    <img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
    <a href='#'>General help</a>
    <img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
    </li>
    <li><a href='#'>Posts</a></li>
    <li><a href='#'>Pages</a></li>
    <li><a href='#'>Posts</a></li>
    <li><a href='#'>Pages</a></li>
    <li><a href='#'>Posts</a></li>
    <li class='last'>
    
    <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
    <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
    <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
    </li>
    </ul>
    </li>
    
    <li><a href='#'>Contact</a>
    <ul id='help'>
    <li>
    <img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
    <a href='#'>General help</a>
    <img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
    </li>
    <li><a href='#'>Posts</a></li>
    <li><a href='#'>Pages</a></li>
    <li><a href='#'>Posts</a></li>
    <li><a href='#'>Pages</a></li>
    <li><a href='#'>Posts</a></li>
    <li class='last'>
    
    <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
    <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
    <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
    </li>
    </ul>
    </li>
    
    <li class='searchContainer'>
    <div>
    <input id='searchField' type='text'/>
    
    <img alt='Search' onclick='alert(&apos;You clicked on search button&apos;)' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/magnifier.png'/></div>
    <ul id='search'>
    <li>
    <img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
    <input id='cbxAll' type='checkbox'/>All
    <img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
    </li>
    <li><input id='Articles' type='checkbox'/>Articles</li>
    <li><input id='Tutorials' type='checkbox'/>Tutorials</li>
    
    <li><input id='Reviews' type='checkbox'/>Reviews</li>
    <li><input id='Resources' type='checkbox'/>Resources</li>
    <li class='last'>
    <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
    <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
    <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
    </li>
    </ul>
    
    </li>
    </ul>
    <img alt='' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/menu_right.png' style='float:left;'/>
    </div>
    </div>
  5. Langkah 5 : Simpan dan lihat hasilnya
    simpan template
Keterangan :
Kode yang terdapat pada langkah ke-4 masukkan pada HTML Blogger Template Anda, tetapi lebih baik penempatan Mega Drop Down Menus pada Header Template

Terima kasih sudah berkunjung semoga artikel Mega Menus Navigation pada Blogger Template ini bisa bermanfaat.
Wassalamullaikum Wr.Wb
Sumber

4 comments:

  1. Replies
    1. wkwkwk... ini artikel pertama... cuman saya update lagi waktunya... soalnya artikel baru belum kelar semuanya...

      Delete
  2. minjem pelanginya yah, yang "...ada langkah ke-4 masukkan pada HTM..." itu :)

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top