Membuat Navigasi Vertikal Drop Down Dengan Fungsi OnClick ~ Agan Tutorial
Thursday, July 3, 2014

Membuat Navigasi Vertikal Drop Down Dengan Fungsi OnClick


Membuat Navigasi Vertikal Drop Down Dengan Fungsi OnClick

navigasi vertikal drop down onclick

Kali ini kita akan membahas cara pembuatan navigasi vertikal atau berada disamping dengan posisi berjejer kebawah, navigasi vertikal yang satu ini hampir mirip dengan navigasi vertikal yang ada di Blog Kang Ismet, untuk pembuatan menu yang satu ini yang dibutuhkan adalah CSS, HTML, dan tentunya juga sentuhan JavaScript, sekali lagi saya katakan, navigasi ini masih default seperti demo diatas, silahkan sobat tambahkan dan edit-edit lagi CSSnya agar tampilannya menjadi lebih bagus, oke tidak usah basa basi lagi, jika sobat ingin menerapkannya berikut tutorialnya :

(Untuk yang satu ini masih default, silahkan dikreasikan sendiri)

Pertama-tama masuk ke Template > Edit HTML, karena menu ini menggunakan icon dari font awesome, jadi letakkan script dibawah ini letakkan diatas </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
Langkah kedua letakkan kode JavaScript ini tepat diatas </body>
<script type='text/javascript'>
$("#menu a.tutup,#menu a.buka").click(function(e){
    e.preventDefault();
    if($(this).hasClass("buka"))
    {
    $(this).removeClass("buka");
    $(this).parent().children("ul").stop(true,true).slideUp("normal");
    } else {
    $("#menu a.tutup.buka").removeClass("buka");
    $(this).addClass("buka");
    $(".sub").filter(":visible").slideUp("normal");
    $(this).parent().children("ul").stop(true,true).slideDown("normal");
    }
});
</script>
Langkah ketiga adalah menambahkan CSSnya, letakkan kode css dibawah ini tepat diatas ]]></b:skin> atau </style>
/* --- Menu Navigation Agan-Tutorial--*/
ul,
ul li,
ul li ul {
    list-style: none outside none;
    padding:0;
    margin:0;
}
#menu-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -140px;
    margin-left: -140px;
    width: 280px;
}
#menu {
    padding: 18px 0;
}
#menu > li > a {
    display: block;
    margin: 0 auto;
    width: 90%;
    text-indent: 18px;
    line-height: 39px;
}
#menu > li > a.tutup::after {
    position: absolute;
    right: 30px;
    margin-top: 2px;
    font-family: "FontAwesome";
    content: "\f054";
}
#menu > li > a.tutup:hover,
#menu > li > a.tutup.buka {
    color: #333;
}
#menu > li > a.tutup.buka::after {
    content: "\f078";
}
.sub {
    display: none;
}
.sub a {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 212px;
    text-indent: 0px;
    line-height: 39px;
}
Langkah terakhir adalah menambahkan kode pemanggil atau HTMLnya, terserah sobat ingin meletakkannya dimana, di tambah widget juga bisa, di HTML/JavaScript
<div id="menu-wrap">
      <ul id="menu">
        <li><a href="#">Menu I</a></li>
        <li><a class="tutup" href="#">Menu II</a>
          <ul class="sub">
          <li><a href="#">Sub Menu I</a></li>
          <li><a href="#">Sub Menu II</a></li>
          </ul>
        </li>
        <li><a href="#">Menu III</a></li>
        <li><a class="tutup" href="#">Menu IV</a>
          <ul class="sub">
          <li><a href="#">Sub Menu I</a></li>
          <li><a href="#">Sub Menu II</a></li>
          </ul>
        </li>
<!-- Dan Seterusnya-->
      </ul>
    </div>
Nah itu dia menu navigasi vertikal dengan drop down onclik yang mirip seperti blog kang ismet, silahkan sobat kreasikan lagi agar menunya menjadi semakin mantap, Semoga Bermanfaat.
Script oleh : http://www.xkomo.com/2014/05/tutorial-cara-membuat-menu-navigasi-vertikal.html

Membuat Navigasi Vertikal Drop Down Dengan Fungsi OnClick

6 komentar

Petamax hehehe :D
mantap broo

CTRL + D aja dulu deh takut lupa pengen coba

Silahkan gan :D, silahkan dikreasikan lagi tampilannya :D

No comment moderation in this page,
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly.