Cara Membuat Menu Navigasi Mega Menu Pada Blog (jQuery & CSS)

<div class="separator" style="clear: both; text-align: center;"><a href="http://winzlab.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHDyarOwivi6RS1AzvQ36xKcfyr_mBa63MrWZ2fU0kBc51uFNBeS_AAIMLn7ezNKGVRRUNakIkqErUnWxdA7hi_pr2YS4POvOtw681sZBJN6ZmQdghDtk3C7R2GakosCG7iMGNRsaCtmA/s400/Mega+Menu+Blog.jpg" title="View Demo" width="400" /></a></div>Pada kesempatan kali ini kita akan membahas cara membuat Menu Navigasi (Mega Menu), salah satu menu navigasi yang cantik dan menarik dengan model dan tampilan yang lain untuk Blog dengan menggunakan CSS dan jQuery. Anda bisa melihat Demonya <a href="http://winzlab.blogspot.com/" target="_blank">di sini</a>.<br /><br />Menu Navigasi type Mega Menu ini sangat cocok untuk diterapkan pada blog yang memiliki banyak link atau halaman. karena dengan demikian akan memudahkan pembaca dalam pencarian informasi halaman atau link-link yang mereka inginkan pada blog anda dengan cara lebih cepat, Anda dapat menambahkan menu navigasi (Mega Menu) ini pada blog Anda dengan tricks dan tips sebagai berikut :<br /><br /><h3 class="postcontent">Bagaimana cara membuat menu navigasi (Mega Menu) pada blog :<br /></h3><br />Berikut langkah-langkahnya :<br /><br />1. Silahkan <b>Login</b> ke <a href="http://blogger.com/" target="_blank">Blogger Dasbor</a> anda<br />2. Klik <b>Rancangan</b> ---> <b>Edit Html</b><br />3. <b>Check List</b> pada kotak <b>Expand Template Widget</b><br />4. Cari <span class="Apple-style-span" style="color: red;">]]></b:skin></span> dengan menekan <span class="Apple-style-span" style="color: red;">Ctrl+f</span><br />5. Letakkan kode dibawah ini sebelum kode di atas<br /><br /><pre style="height: 300px; overflow: auto;">/*----------------------------------------------------<br />{--------} Menu {--------}<br />----------------------------------------------------*/<br />ul.ldd_menu{<br /> z-index:999;<br /> margin:0px;<br /> padding:0;<br /> display:block;<br /> height:50px;<br /> background-color:#D04528;<br /> list-style:none;<br /> font-family:"Trebuchet MS", sans-serif;<br /> border-top:1px solid #EF593B;<br /> border-bottom:1px solid #EF593B;<br /> border-left:10px solid #D04528;<br /> -moz-box-shadow:0px 3px 4px #591E12;<br /> -webkit-box-shadow:0px 3px 4px #591E12;<br /> -box-shadow:0px 3px 4px #591E12;<br />}<br />ul.ldd_menu a{<br /> text-decoration:none;<br />}<br />ul.ldd_menu > li{<br /><br /> float:left;<br /> position:relative;<br />}<br />ul.ldd_menu > li > span{<br /> z-index:999;<br /> float:left;<br /> color:#fff;<br /> background-color:#D04528;<br /> height:50px;<br /> line-height:50px;<br /> cursor:default;<br /> padding:0px 20px;<br /> text-shadow:0px 0px 1px #fff;<br /> border-right:1px solid #DF7B61;<br /> border-left:1px solid #C44D37;<br />}<br />ul.ldd_menu .ldd_submenu{<br /> z-index:999;<br /> position:absolute;<br /> top:50px;<br /> width:550px;<br /> display:none;<br /> opacity:0.95;<br /> left:0px;<br /> font-size:10px;<br /> background: #C34328;<br /> border-top:1px solid #EF593B;<br /> -moz-box-shadow:0px 3px 4px #591E12 inset;<br /> -webkit-box-shadow:0px 3px 4px #591E12 inset;<br /> -box-shadow:0px 3px 4px #591E12 inset;<br />}<br />a.ldd_subfoot{<br /> z-index:999;<br /> background-color:#f0f0f0;<br /> color:#444;<br /> display:block;<br /> clear:both;<br /> padding:15px 20px;<br /> text-transform:uppercase;<br /> font-family: Arial, serif;<br /> font-size:12px;<br /> text-shadow:0px 0px 1px #fff;<br /> -moz-box-shadow:0px 0px 2px #777 inset;<br /> -webkit-box-shadow:0px 0px 2px #777 inset;<br /> -box-shadow:0px 0px 2px #777 inset;<br />}<br />ul.ldd_menu ul{<br /><br /> list-style:none;<br /> float:left;<br /> border-left:1px solid #DF7B61;<br /> margin:20px 0px 10px 30px;<br /> padding:10px;<br />}<br />li.ldd_heading{<br /><br /> font-family: Georgia, serif;<br /> font-size: 13px;<br /> font-style: italic;<br /> color:#FFB39F;<br /> text-shadow:0px 0px 1px #B03E23;<br /> padding:0px 0px 10px 0px;<br />}<br />ul.ldd_menu ul li a{<br /><br /> font-family: Arial, serif;<br /> font-size:10px;<br /> line-height:20px;<br /> color:#fff;<br /> padding:1px 3px;<br />}<br />ul.ldd_menu ul li a:hover{<br /> -moz-box-shadow:0px 0px 2px #333;<br /> -webkit-box-shadow:0px 0px 2px #333;<br /> box-shadow:0px 0px 2px #333;<br /> background:#AF412B;<br />}<br /></pre><br />6. Kemudian cari tag <span class="Apple-style-span" style="color: red;"></head></span> lalu letakkan kode di bawah ini di atas tag tersebut<br /><pre style="height: 300px; overflow: auto;"><span class="Apple-style-span" style="color: red;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></span><br /> <script type='text/javascript'><br /> $(function() {<br /> /**<br /> * the menu<br /> */<br /> var $menu = $(&#39;#ldd_menu&#39;);<br /> <br /> /**<br /> * for each list element,<br /> * we show the submenu when hovering and<br /> * expand the span element (title) to 510px<br /> */<br /> $menu.children(&#39;li&#39;).each(function(){<br /> var $this = $(this);<br /> var $span = $this.children(&#39;span&#39;);<br /> $span.data(&#39;width&#39;,$span.width());<br /> <br /> $this.bind(&#39;mouseenter&#39;,function(){<br /> $menu.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();<br /> $span.stop().animate({&#39;width&#39;:&#39;510px&#39;},300,function(){<br /> $this.find(&#39;.ldd_submenu&#39;).slideDown(300);<br /> });<br /> }).bind(&#39;mouseleave&#39;,function(){<br /> $this.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();<br /> $span.stop().animate({&#39;width&#39;:$span.data(&#39;width&#39;)+&#39;px&#39;},300);<br /> });<br /> });<br /> });<br /> </script> <br /></pre>Jika pada Template anda sudah terinstall script jQuery, anda tidak perlu mengistallnya lagi, hapus saja kode yang ini :<br /><pre><span class="Apple-style-span" style="color: red;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></span><br /></pre><br />8. Langkah selanjutnya cari kode <span class="Apple-style-span" style="color: red;"><div id='footer-wrapper'></span> (Catatan : bagi sebagian Template mungkin tidak ditemukan, cari yang mirip dengan kode di atas), kemudian letakkan kode di bawah ini sebelum kode di atas :<br /><pre style="height: 300px; overflow: auto;"><ul class='ldd_menu' id='ldd_menu'><br /> <li><br /> <span>Vacations</span><!-- Increases to 510px in width--><br /> <div class='ldd_submenu'><br /> <ul><br /> <li class='ldd_heading'>By Location</li><br /> <li><a href='#'>South America</a></li><br /> <li><a href='#'>Antartica</a></li><br /> <li><a href='#'>Africa</a></li><br /> <li><a href='#'>Asia and Australia</a></li><br /> <li><a href='#'>Europe</a></li><br /> </ul><br /> <ul><br /> <li class='ldd_heading'>By Category</li><br /> <li><a href='#'>Sun &amp; Beach</a></li><br /> <li><a href='#'>Adventure</a></li><br /> <li><a href='#'>Science &amp; Education</a></li><br /> <li><a href='#'>Extreme Sports</a></li><br /> <li><a href='#'>Relaxing</a></li><br /> <li><a href='#'>Spa and Wellness</a></li><br /> </ul><br /> <ul><br /> <li class='ldd_heading'>By Theme</li><br /> <li><a href='#'>Paradise Islands</a></li><br /> <li><a href='#'>Cruises &amp; Boat Trips</a></li><br /> <li><a href='#'>Wild Animals &amp; Safaris</a></li><br /> <li><a href='#'>Nature Pure</a></li><br /> <li><a href='#'>Helping others &amp; For Hope</a></li><br /> <li><a href='#'>Diving</a></li><br /> </ul><br /> <a class='ldd_subfoot' href='#'> + New Deals</a><br /> </div><br /> </li><br /> <li><br /> <span>Equipment</span><br /> <div class='ldd_submenu'><br /> <ul><br /> <li class='ldd_heading'>By Location</li><br /> <li><a href='#'>South America</a></li><br /> <li><a href='#'>Antartica</a></li><br /> <li><a href='#'>Africa</a></li><br /> <li><a href='#'>Asia and Australia</a></li><br /> <li><a href='#'>Europe</a></li><br /> </ul><br /> <ul><br /> <li class='ldd_heading'>By Category</li><br /> <li><a href='#'>Sun &amp; Beach</a></li><br /> <li><a href='#'>Adventure</a></li><br /> <li><a href='#'>Science &amp; Education</a></li><br /> <li><a href='#'>Extreme Sports</a></li><br /> <li><a href='#'>Relaxing</a></li><br /> <li><a href='#'>Spa and Wellness</a></li><br /> </ul><br /> <ul><br /> <li class='ldd_heading'>By Theme</li><br /> <li><a href='#'>Paradise Islands</a></li><br /> <li><a href='#'>Cruises &amp; Boat Trips</a></li><br /> <li><a href='#'>Wild Animals &amp; Safaris</a></li><br /> <li><a href='#'>Nature Pure</a></li><br /> <li><a href='#'>Helping others &amp; For Hope</a></li><br /> <li><a href='#'>Diving</a></li><br /> </ul><br /> <a class='ldd_subfoot' href='#'> + New Deals</a><br /> </div><br /> </li><br /> <li><br /> <span>Locations</span><br /> <div class='ldd_submenu'><br /> <ul><br /> <li class='ldd_heading'>By Location</li><br /> <li><a href='#'>South America</a></li><br /> <li><a href='#'>Antartica</a></li><br /> <li><a href='#'>Africa</a></li><br /> <li><a href='#'>Asia and Australia</a></li><br /> <li><a href='#'>Europe</a></li><br /> </ul><br /> <ul><br /> <li class='ldd_heading'>By Category</li><br /> <li><a href='#'>Sun &amp; Beach</a></li><br /> <li><a href='#'>Adventure</a></li><br /> <li><a href='#'>Science &amp; Education</a></li><br /> <li><a href='#'>Extreme Sports</a></li><br /> <li><a href='#'>Relaxing</a></li><br /> <li><a href='#'>Spa and Wellness</a></li><br /> </ul><br /> <ul><br /> <li class='ldd_heading'>By Theme</li><br /> <li><a href='#'>Paradise Islands</a></li><br /> <li><a href='#'>Cruises &amp; Boat Trips</a></li><br /> <li><a href='#'>Wild Animals &amp; Safaris</a></li><br /> <li><a href='#'>Nature Pure</a></li><br /> <li><a href='#'>Helping others &amp; For Hope</a></li><br /> <li><a href='#'>Diving</a></li><br /> </ul><br /> <a class='ldd_subfoot' href='#'> + New Deals</a><br /><br /> </div><br /> </li><br /> <li><br /> <span>Tourists</span><br /> <div class='ldd_submenu'><br /> <ul><br /> <li class='ldd_heading'>By Download</li><br /> <li><a href='#'>South America</a></li><br /> <li><a href='#'>Antartica</a></li><br /> <li><a href='#'>Africa</a></li><br /> <li><a href='#'>Asia and Australia</a></li><br /> <li><a href='#'>Europe</a></li><br /> </ul><br /> <ul><br /> <li class='ldd_heading'>By Category</li><br /> <li><a href='#'>Sun &amp; Beach</a></li><br /> <li><a href='#'>Adventure</a></li><br /> <li><a href='#'>Science &amp; Education</a></li><br /> <li><a href='#'>Extreme Sports</a></li><br /> <li><a href='#'>Relaxing</a></li><br /> <li><a href='#'>Spa and Wellness</a></li><br /> </ul><br /> <ul><br /> <li class='ldd_heading'>By Theme</li><br /> <li><a href='#'>Paradise Islands</a></li><br /> <li><a href='#'>Cruises &amp; Boat Trips</a></li><br /> <li><a href='#'>Wild Animals &amp; Safaris</a></li><br /> <li><a href='#'>Nature Pure</a></li><br /> <li><a href='#'>Helping others &amp; For Hope</a></li><br /> <li><a href='#'>Diving</a></li><br /> </ul><br /> <a class='ldd_subfoot' href='#'> + New Deals</a><br /> </div><br /> </li><br /> </ul><br /></pre>9. Simpan Template dan silhakan lihat hasilnya<br /><br />Semoga bermanfaat

Cara Membuat Menu Navigasi Mega Menu Pada Blog (jQuery & CSS)

Pada kesempatan kali ini kita akan membahas cara membuat Menu Navigasi (Mega Menu), salah satu menu navigasi yang cantik dan menarik dengan ...

Baca selengkapnya »

Membuat Horizontal Menu Slide Out Fixed Menggunakan jQuery Dan Css Pada Blogger

<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZHMyPvewZx7Qy5b9MUpO5DKHmh5ZpwmqJoiz4aj4WVMEHvSMGtsHT5TWI6atToLDCxjI7iP2vmtGezAb6TR188bCOnMSOdDkZYh8ys2PgPUsInWLpl_8X_LOdYBNmyasAefmWmmJqOCE/s320/slideoutreloaded1.png" width="320" /></div>Menu navigasi ini bisa dibilang cukup populer serta menarik, dan tentunya dengan mengaplikasikan menu navigasi slide out ini dapat mempercantik tampilan pada blog anda. Efek dari menu ini cukup keren karena menggunakan fungsi jQuery dan Css, menu akan tampil seperti setengah tersembunyi dan animasi menu akan sliding ke luar ketika dilewati kursor atau ketika kursor diarahkan ke pada bagian-bagian menu, dan akan kembali tampak setengah tersembunyi ketika tidak terkena kursor. dan Fixed artinya tetap terlihat meskipun anda menggulung layar sampai ke layar paling bawah. Anda bisa lihat untuk Demonya <a href="http://winzlab.blogspot.com/" target="_blank">disini</a>.<br /><br /><h3 class="postcontent">Bagaimana Cara Membuat Navigasi Menu Slide Out Horizontal Fixed ? </h3>Mari kita mulai pembuatannya :<br /><br />1. Silahkan <b>Login</b> ke <a href="http://blogger.com/" target="_blank">Blogger Dasbor</a> anda<br />2. Klik <b>Rancangan</b> ---> <b>Edit Html</b><br />3. <b>Check List</b> pada kotak <b>Expand Template Widget</b><br />4. Cari <span class="Apple-style-span" style="color: red;">]]></b:skin></span> dengan menekan <span class="Apple-style-span" style="color: red;">Ctrl+f</span><br />5. Letakkan kode dibawah ini sebelum kode di atas<br /><pre style="height: 300px; overflow: auto;">/*----------------------------------------------------<br />{--------} Menu {--------}<br />----------------------------------------------------*/<br />ul#navigation li {<br /> width: 103px;<br /> display:inline;<br /> float:left;<br />}<br />ul#navigation li a {<br /> display: block;<br /> float: left;<br /> margin-top: -2px;<br /> width: 100px;<br /> height: 25px;<br /> background-color: #E7F2F9;<br /> background-repeat: no-repeat;<br /> background-position: 50% 10px;<br /> border: 1px solid #BDDCEF;<br /> text-decoration: none;<br /> text-align: center;<br /> padding-top: 80px;<br />}<br />ul#navigation li a {<br /> display: block;<br /> float:left;<br /> margin-top: -2px;<br /> width: 100px;<br /> height: 25px;<br /> background-color:#E7F2F9;<br /> background-repeat:no-repeat;<br /> background-position:50% 10px;<br /> border:1px solid #BDDCEF;<br /> text-decoration:none;<br /> text-align:center;<br /> padding-top:80px;<br /> -moz-border-radius:0px 0px 10px 10px;<br /> -webkit-border-bottom-right-radius: 10px;<br /> -webkit-border-bottom-left-radius: 10px;<br /> -khtml-border-bottom-right-radius: 10px;<br /> -khtml-border-bottom-left-radius: 10px;<br /> opacity: 0.7;<br /> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br />}<br />ul#navigation li a:hover{<br /> background-color:#CAE3F2;<br />}<br />ul#navigation li a span{<br /> letter-spacing:2px;<br /> font-size:11px;<br /> color:#60ACD8;<br /> text-shadow: 0 -1px 1px #fff;<br />}<br /></pre>6. Sekarang kita akan menambahkan background image ke dalam bagian-bagian menunya :<br /><pre style="height: 300px; overflow: auto;">ul#navigation .home a{<br /> background-image: url(http://img163.imageshack.us/img163/1473/homehc.png);<br />}<br />ul#navigation .about a {<br /> background-image: url(http://img156.imageshack.us/img156/4176/idcardqx.png);<br />}<br />ul#navigation .search a {<br /> background-image: url(http://img21.imageshack.us/img21/7365/searchl.png);<br />}<br />ul#navigation .podcasts a {<br /> background-image: url(http://img834.imageshack.us/img834/8079/camerae.png);<br />}<br />ul#navigation .rssfeed a {<br /> background-image: url(http://img263.imageshack.us/img263/5871/rssd.png);<br />}<br />ul#navigation .photos a {<br /> background-image: url(http://img508.imageshack.us/img508/2226/ipodl.png);<br />}<br />ul#navigation .contact a {<br /> background-image: url(http://img808.imageshack.us/img808/5498/mailos.png);<br />}<br /></pre>Pada bagian ini bisa lihat terdapat link alamat URL image yang ditambahkan untuk nantinya akan ditampilkan pada tiap-tiap bagian menu.<br />Anda bisa saja menambahkan navigasi lain ke dalam menu ini, misalnya : ingin menambahkan submenu <b><span class="Apple-style-span" style="color: red;">Download</span></b>, anda harus pula menambahkan alamat URL imagenya dari menu <b><span class="Apple-style-span" style="color: red;">Download</span></b> tersebut, contohnya seperti di bawah ini :<br /><pre>ul#navigation .download a {<br /> background-image: url(link to the image);<br />}<br /></pre>Pada bagian<br /><pre class="brush:css">link to the image<br /></pre>isi dengan alamat URL image anda.<br />7. Sekarang cari tag <span class="Apple-style-span" style="color: red;"></head></span> kemudian letakkan kode di bawah ini di atas tag tersebut<br /><pre style="height: 300px; overflow: auto;"><script type="text/javascript"><br />$(function() {<br /> var d=300;<br /> $('#navigation a').each(function(){<br /> $(this).stop().animate({<br /> 'marginTop':'-80px'<br /> },d+=150);<br /> });<br /><br /> $('#navigation > li').hover(<br /> function () {<br /> $('a',$(this)).stop().animate({<br /> 'marginTop':'-2px'<br /> },200);<br /> },<br /> function () {<br /> $('a',$(this)).stop().animate({<br /> 'marginTop':'-80px'<br /> },200);<br /> }<br />);<br />});<br /></script><br /></pre>8. Langkah selanjutnya cari <span class="Apple-style-span" style="color: red;"></body></span> dan sebelum kode di atas letakan kode di bawah ini:<br /><pre><ul id="navigation"><br /> <li class="home"><a href=""><span>Home</span></a></li><br /> <li class="about"><a href=""><span>About</span></a></li><br /> <li class="search"><a href=""><span>Search</span></a></li><br /> <li class="photos"><a href=""><span>Photos</span></a></li><br /> <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li><br /> <li class="podcasts"><a href=""><span>Podcasts</span></a></li><br /> <li class="contact"><a href=""><span>Contact</span></a></li><br /></ul><br /></pre>Isi pada bagian href dengan alamat URL yang ingin anda arahkan ketika menekan menu tersebut, penempatannya diantara tanda kutip. Contoh:<br /><pre class="brush:css"><li class="home"><a href="http://blogandos.blogspot.com"><span>Home</span></a></li><br /></pre>Pada bagian :<br /><pre>http://blogandos.blogspot.com<br /></pre>Ganti dengan alamat URL Blog anda.<br />Dan jika tadi anda menambahkan menu <b><span class="Apple-style-span" style="color: red;">Download</span></b> maka pada bagian ini anda juga harus tambahkan perintah "<span class="Apple-style-span" style="color: red;">class</span>" sama halnya dengan yang dicontohkan di atas, misalnya seperti di bawah ini:<br /><pre><li class='download'><a href="your link" title="Download"></a></li><br /></pre>9. Simplan Template Anda dan Silahkan lihat hasilnya<br />Semoga <a href="http://bloggandos.blogspot.com/2011/11/membuat-horizontal-menu-slide-out-fixed.html">Trik Membuat Horizontal Menu Slide Out Fixed Menggunakan jQuery Dan Css Pada Blogger</a> ini bermanfaat untuk anda semua.

Membuat Horizontal Menu Slide Out Fixed Menggunakan jQuery Dan Css Pada Blogger

Menu navigasi ini bisa dibilang cukup populer serta menarik, dan tentunya dengan mengaplikasikan menu navigasi slide out ini dapat mempercan...

Baca selengkapnya »