Menerapkan Vimeo-like Top Mega Menus Navigation pada Blogger Template ( Create Setting Mega Menu )

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, struktur secara visual describet pada gambar di bawah: Demo Vimeo-like Top Mega Menus Navigation to Blogger Template
Cara membuat , cara mengedit, cara setting dan cara menerapkan Demo Vimeo-like Top Mega Menus Navigation to Blogger Template silahkan ikuti langkah sebagai berikut :
  1. Langkah 1 : Login Blogger -> Rancangan -> Rancangan
  2. Langkah 2 : Back Up template Anda.
  3. Langkah 3 : Copy kode di bawah ini di atas kode ]]></b:skin>

    #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 : Tambahkan kode dibawah ini pada bagian HEADER 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='#'>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 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>

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.
Referensi Artikel :
  1. Create Vimeo-like top navigation.
    Link : http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
  2. 38 jQuery And CSS Drop Down Multi Level Menu Solutions.
    Link : http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

Menerapkan Vimeo-like Top Mega Menus Navigation pada Blogger Template ( Create Setting Mega Menu )
  1. Very neat! Still, I'd personally prefer to make the bottom of the menu a single css class and apply it to the last element, rather than a separate li with three distinct images. Ok, you'd need two classes really if you want to allow it to stretch, but anyway. The same could be done for the top of the menu.

    Apart from personal preference though, would there be any reason to use one technique rather than the other? I suspect the way you describe here is less likely to blow up across different browsers.

    ReplyDelete