Mega Menu Vertikal Dengan jQuery

Membuat menu vertikal pasti anda sudah tahu. vertikal berarti baris ke bawah. nah kali ini saya akan coba share menu vertikal tersebut dengan slide sederhana. namun saya akan memberikan kesan menarik dengan slide mega menu dan style CSS. jquery yang akan kita gunakan sangatlah sederhana. karena hanya slidetoggle() sebagai efek animasinya.

Lihat DemoDownload

Tutorial Vertikal Slide Menu Dengan Jquery

pada gambar di bawah menerangkan slide mega menu tersebut sangat banyak penyimpanan link dan tak terbatas. sebagai kesimpulan pada menu hampir sama dengan cara membuat menu navigasi lainnya. kata lain ul dan li jadi peran utama dan penambahan id class. Cara kerja menu ini dengan mengklik pada gambar menu dan akan muncul menu kebawah seperti halnya dropdown. saya tambahkan juga footer sebagai deskripsi atau tentang anda. jika tertarik segeralah pasang mega menu ini pada blog anda.

1. HTML menu tidak jauh seperti menu-menu lainnya.

<div id="button">
<img alt="menu" title="menu" src="images/button.png" width="184" height="32" class="menu_ct" />
<ul class="ct_menu">
    <li><ul class="menu1">
    <h3>Tutorial</h3>
            <li><a href="#">CSS </a></li>
            <li><a href="#">Javascript</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">HTML</a></li>
</ul></li>
    <li><ul class="menu2">
    <h3>Reference</h3>
            <li><a href="#">Trick CSS</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">CSS Tutorial</a></li>
            <li><a href="#">Blogger Tool</a></li>
</ul></li>
    <li><ul class="menu3">
    <h3>Contact Me</h3>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Google+</a></li>
            <li><a href="#">Linkedin</a></li>
            <li><a href="#">Twitter</a></li>
</ul></li>
    <li><ul class="menu4">
    <h3>More »</h3>
            <li><a href="#">Advertise</a></li>
            <li><a href="#">Contact Me</a></li>
            <li><a href="#">Blogger</a></li>
            <li><a href="#">Wordpress</a></li>
</ul></li>
    <div  class="foot-menu">
    <div class="image"><img class="ct-about" src="images/about-me.jpg" alt="ana silvana"/></div>
    <div class="about">Tentang Saya</div>
        <p>Tak selamanya hidup itu indah, namun keindahaan akan tiba jika kita tidak pernah mengeluh sebesar apapun masalah.
    </div>
</ul>
</div><!-- end button-->

Penjelasan HTML :
perhatikan !!

<img src="images/button.png" width="184" height="32" class="menu_ct" />

Ini sebagai kepala menu. dan saya menggunakan gambar untuk mempersingkat penggunaan CSS. anda bisa mengganti gambar tersebut sesuai keinginan anda pada Photoshop. saya sudah sediakan PSD nya pada link download. kreasikan keahlian anda di photoshop.

2. Untuk menambahkan menu lainnya anda bisa menambahkan HTML berikut dan tambahakan di awal atau akhir. yang penting jangan keluar dari menu induknya seperti ini .

<ul class="ct_menu">
     ---- mega menu untuk menambahkan di sini --
</ul>

<li><ul class="menu1">
    <h3>Tutorial</h3>
        <li><a href="#">CSS </a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">HTML</a></li>
    </ul>
</li>

3. jQuery Slide Sederhana
saya gunakan slide ini sederhana mungkin.. anda bisa menambahkan animasi lainnya dengan easing jquery. namun tutorial ini tidak terfocus kepada penggunaan jquery. saya fokuskan untuk gaya CSS yang di gunakan untuk mempercantik.

Pranala Luar
1. jQuery SlideToggle()
2. easing jquery.ui

Update terbaru dari versi compress jQuery. download jquery v1.8.0

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'></script>

Perlu di ingatkan kembali. jika sudah memasang jquery versi sebelumnya anda bisa mengabaikan pasang jquery ini atau mengganti versi sebelumnya.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    $('img.menu_ct').click(function () {
    $('ul.ct_menu').slideToggle('medium');
    });
});
//]]>
</script>

Property	Keterangan
$('img.menu_ct')	Tentukan class induk pada img,a,button,div dan lainnya.
$('ul.ct_menu')	gunakan class ini sebagai elemen slide yang di tampilkan.

DEMO slide sederhana dengan jQuery dengan property button seperti di bawah ini.

Basic membuat mega menu awalnya seperti itu. tanpa ada penambahan dekripsi lainnya.

4.CSS Mega Menu.
beberapa style saya tidak banyak merubah style yang menarik. ini hanya kresi saya.. anda bisa menmbahkan fitur lain dengan pseudo dan efek animasi css lainnya.

#button {
  height:32px;
  width:184px;
  margin:auto;
}
ul,li {
  list-style:none;
  margin:0;
  padding:0;
}
.menu_ct {
  border:1px solid #1c1c1c;
}
.ct_menu {
  background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj22rd7I_BwIkW3r7GmLHl-TWDu8Xcxkuu9nSF-59HqWKLqfpZ-cQc4b7Za-ghGOydPgiE2B4UaEXqXAsHpnhrOZA3XlxFn_LUgUuj4c0K7ohW2D1mnFzPdUQDTdffWdoiAh6L3krN3U7c/s1600/pattern.png")#302F2F;
  border:1px solid #1C1C1C;
  display:none;
  width:450px;
}
.ct_menu h3 {
  color:skyblue;
  border-bottom:1px solid #222;
  margin:5px 0;
  padding:5px 0;
  box-shadow:0 1px 0 #444;
  -webkit-box-shadow:0 1px 0 #444;
  -moz-box-shadow:0 1px 0 #444;
}
.ct_menu li {
  display:inline;
}
.ct_menu li a {
  color:#FFFFFF;
  text-decoration:none;
  padding:5px 0;
  display:inline-block;
}
.ct_menu li a:hover {
  padding:5px 0;
  font-weight:bold;
  color:#067393;
}
/*Mega Menu*/
/*foot menu*/
.foot-menu {
  overflow:hidden;
  position:relative;
  background:#444;
  padding:10px;
  color:#ccc;
  font-family:arial,helvetica,sans-serif,serif;
  border-top:1px solid #555;
  box-shadow:0 -1px 0 #000,0 -1px 5px #333 inset;
  -moz-box-shadow:0 -1px 0 #000,0 -1px 5px #333 inset;
  -webkit-box-shadow:0 -1px 0 #000,0 -1px 5px #333 inset;
}
.foot-menu img.ct {
  position:absolute;
  bottom:2px;
  right:2px;
}
.about {
  font:bold italic 14px arial;
}
.foot-menu p,.about {
  float:right;
  width:80%;
}
.ct-about {
  float:left;
  border:2px solid #ccc;
  box-shadow:0 0 2px #000;
  -moz-box-shadow:0 0 2px #000;
  -webkit-box-shadow:0 0 2px #000;
  margin:0 10px 0 0;
  padding:0;
}
/*Mega Menu*/
ul.ct_menu li ul li {
  width:100%;
  display:block;
}
ul.ct_menu li ul {
  display:inline-block;
  overflow:hidden;
  width:210px;
  margin:0 5px;
}

Akhir dari semua source code yang terlihat jika di pasang pada template anda.
perhatikan dengan teliti jika ingin memasangnya pada blog anda.
karena tutorial ini bukan menjelaskan cara memasangnya melainkan menjelaskan cara membuatnya.

<!DOCTYPE html>
<html>
<head>
<title>CSS Tutsplus | Sliding Menu</title>
<script type="text/javascript" src="js/custom-easing.js"></script>
<script src='/jquery/1.8.0/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<!-- html untuk membentuk mega menu-->
<div id="button">
<img src="images/button.png" width="184" height="32" class="menu_ct" />
<ul class="ct_menu">
    <li><ul class="menu1">
    <h3>Tutorial</h3>
            <li><a href="#">CSS </a></li>
            <li><a href="#">Javascript</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">HTML</a></li>
</ul></li>
    <li><ul class="menu2">
    <h3>Reference</h3>
            <li><a href="#">Trick CSS</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">CSS Tutorial</a></li>
            <li><a href="#">Blogger Tool</a></li>
</ul></li>
    <li><ul class="menu3">
    <h3>Contact Me</h3>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Google+</a></li>
            <li><a href="#">Linkedin</a></li>
            <li><a href="#">Twitter</a></li>
</ul></li>
    <li><ul class="menu4">
    <h3>More »</h3>
            <li><a href="#">Advertise</a></li>
            <li><a href="#">Contact Me</a></li>
            <li><a href="#">Blogger</a></li>
            <li><a href="#">Wordpress</a></li>
</ul></li>
<!-- untuk membuat deskripsi dan menmbahkan foto lain sebagainya-->
    <div  class="foot-menu">
    <div class="image"><img class="ct-about" src="images/about-me.jpg" alt="ana silvana"/></div>
    <div class="about">Tentang Saya</div>
        <p>Tak selamanya hidup itu indah, namun keindahaan akan tiba jika kita tidak pernah mengeluh sebesar apapun masalah.</p>
    </div>
</ul>
</div><!-- end button-->
<!-- jquery slide sederhana-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    $('img.menu_ct').click(function () {
    $('ul.ct_menu').slideToggle('medium');
    });
});
//]]>
</script>
</body>
</html>

---

Post By : Ana Silvana