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.
menu vertikal jquery
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.
menu vertikal jquery
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" />
menu vertikal jquery
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>
PropertyKeterangan
$('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("http://1.bp.blogspot.com/-RSjqmiYfs6k/T6nyMju4vWI/AAAAAAAABAE/lWOXgG1LKs0/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>

Creative Commons License
Post By : Ana Silvana

6 comments:

  1. Bagus ni menunya, banyak banget ya inspirasinya . . .
    Lanjutkan . . . :Q

    ReplyDelete
  2. mas, kok pas diklik tombolnya terus mau nutup slidenya knp harus mencet tombolnya lagi. gak bisa di daerah lainnya? @@,

    ReplyDelete
    Replies
    1. ouh saya tidak terpikirkan masalah itu . scriptnya saya pakai slide sederhana. gak ada perubahan dengan itu... bisa di lihat disini http://api.jquery.com/slideToggle/

      Delete
  3. wah...makasih ya..sangat membantu...

    Satu pertanyaan: koding ini kan hide-show nya secara vertikal.kalo secara horizontal, bagian mana dari koding yang perlu diubah ???

    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