$show=home

$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

Tutorial Cara Membuat Menu Navigasi Vertikal Dropdown dengan Fungsi Onclick (Show/Hide)

Tutorial Cara Membuat Menu Navigasi Vertikal Dropdown dengan Fungsi Onclick (Show/Hide)

Hai Para Bloggers :)
     Lama tak jumpa :wee ... Kalau kamu sampai ke sini berarti lagi nyari Tutorial Cara Membuat Menu Navigasi Vertikal Dropdown dengan Fungsi Onclick (Show/Hide) yaah ? :D Di artikel ini pasti Artikel yang sangat kamu cari-cari yah ? :) #eeh PD amat sih ini penulis :D :ngakak Hahaha....
Bercanda aja yah :wee Ok ... kali ini saya akan berbagi / share ke kamu mengenai Menu Navigation. Kalau membahas soal menu navigasi pasti bertebaran yah di Google ? Ouh itu sudah jelas dong tapi bagaimana dengan Menu Navigation Vertical ? apakah banyak yang share ? saya rasa tidak begitu banyak yang share mengenai tutorial ini...
Tutorial Cara Membuat Menu Navigasi Vertikal Dropdown dengan Fungsi Onclick (Show/Hide)

     Sebelum kita masuk ke topik pembahasan saya mau jelasin terlebih dahulu mengenai Menu Navigation Vertical with Dropdown ini. :) di dalam artikel ini saya hanya memberikan kode CSS , HTML, dan JavaScript Dalam bentuk kerangka saja alias masih bahan baku :wee nanti sisahnya kamu modifikasi sendiri saja :) :wee #belajar berkrasi sekalian biar makin jago gitu :D
untuk Demo nya kamu bisa lihat contoh nya di bawah ini yah :)




Lihat Demo Dengan Full Screen

Demo

    Bagaimana ? tertarik kah ingin mencoba Menu Navigation Vertical Dropdown dengan Efek Onclick atau Show Hide seperti itu ? Kalau tertarik monggo perhatikan tutorial yang akan saya berikan ini :) Mohon di perhatikan dengan seksama dan serius yah :wee :D ...

    Hal pertama yang perlu kamu lakukan adalah Menambahkan Font Awesome :) Soal nya saya menggunakan font awesome untuk icon dalam menu navigasi ini :)
untuk menambahkan font awesome kamu cukup copas code ini tepat di atas </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Langkah Kedua. Silahkan Tambahkan Kode JavaScript ini Di atas </body>
Info : Update 03 - July - 2014.
Update ini saya lakukan karna ternyata Js yg saya bikin Salah sehingga menu navigasi vertikal ini tidak berjalan sesuai keinginan :D tapi sekarang sudah saya perbaiki jadi yang sudah mencoba silahkan ganti Js yang lama dengan Js yang baru ini #Terimakasih. :keren

<script type='text/javascript'>
<!-- Publish By Xkomo-->
$("#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. Kamu tambahkan Kode CSS ini Di atas ]]></b:skin> atau </style>

/* --- Menu Navigation By Xkomo--*/
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 ke empat. silahkan Tambahkan Kode HTML ini di dalam Widget HTML/JavaScript pada Tata Letak atau terserah deh mau di letak dimana :wee :D


    <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 kode yang kita perlukan sudah ada di atas sekarang tinggal kita mau berkreasi seperti apa :)
dan mau kita pasang di mana :) misal kalau mau di pasang di sidebar silahkan tambahkan kode HTML nya di widget sidebar yah :) untuk mengubah position menu navigations Vertical Dropdown ini kamu harus memahami Position element fixed , absolute, dan relative. untuk pembahasan ini nanti pada artikel selanjut nya saya akan coba share yah :) jadi pentengin saja blog saya :wee :keren bila perlu silahkan submit email kamu ke sini dan follow Google+ saya +Febri Tri Harmoko  :) biar nanti setiap saya post kamu dapat pemberitahuan :D
     ouh iya buat kamu yang malas Design atau cuma mau terima jadi :) ini saya punya design / code CSS buat Menu Navigasi Vertikal Dropdown yang bisa kamu pakai :) silahkan di coba saja



Kode HTML Design By Blog X Komo

    <div id="menu-wrap">
      <ul id="menu">
          <li><a href="#"><i class="icon-home"></i> Home</a></li>
          <li><a class="tutup" href="#"><i class="icon-folder-close"></i> Katergori</a>
          <ul class="sub">
              <li><a href="#"><i class="icon-folder-open"></i> Bloggers</a></li>
              <li><a href="#"><i class="icon-folder-open"></i> Photoshop</a></li>
          </ul>
        </li>
          <li><a href="#"><i class="icon-user"></i> Profile</a></li>
        <li><a class="tutup" href="#"><i class="icon-film"></i> Film</a>
          <ul class="sub">
          <li><a href="#"><i class="icon-facetime-video"></i> Movies Bioskop</a></li>
          <li><a href="#"><i class="icon-facetime-video"></i> Blog X Komo</a></li>
          </ul>
        </li>
      </ul>
    </div>

Kode CSS Design By Blog X Komo

/* -- Design CSS By Blog Xkomo.com --*/
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: 250px;
    background: rgb(0, 52, 100);
text-decoration: none;
}
#menu {
    padding: 18px 0;
}
#menu > li > a {
    display: block;
    margin: 0 auto;
    width: 90%;
    text-indent: 18px;
    line-height: 39px;
    color: white;
text-decoration: none;
}
#menu > li > a.tutup::after {
    position: absolute;
    right: 30px;
    margin-top: 2px;
    font-family: "FontAwesome";
    content: "\f054";
}
#menu > li > a.tutup:hover{
background: rgba(0, 133, 255, 0.56);
color: #FFF;
font-weight: bold;
    border-radius:5px;
}
#menu > li > a:hover{
background: rgba(0, 133, 255, 0.56);
color: #FFF;
font-weight: bold;
    border-radius:5px;
}
#menu > li > a.tutup:hover, 
#menu > li > a.tutup.buka {
    color: #fff;
}
#menu > li > a.tutup.buka::after {
    content: "\f078";
}
.sub {
    display: none;
}
.sub a:hover{
    background:rgba(0, 255, 82, 0.56);
    color:rgb(0, 40, 83);
    border-radius:5px;
    font-weight:bold;
}
.sub a {position: relative;
display: block;
margin: 0 auto;
width: 212px;
text-indent: 0px;
line-height: 39px;
padding-left: 20px;
color: rgb(196, 196, 196);
background: rgb(0, 40, 83);
text-decoration: none;
border-bottom: 1px solid rgb(0, 36, 73);
    border-radius:5px;
    margin-bottom:3px;
}
.sub a:before {
content: "\f0da";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: rgb(0, 40, 83);
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 2px;
left: 7px;
}

     Sekian dulu yah untuk Tutorial Cara Membuat Menu Navigasi Vertikal Dropdown dengan Fungsi Onclick (Show/Hide) nya :wee untuk Kode css yang saya bagikan di atas bisa kamu modifikasi sendiri dan kreasikan sendiri lagi yah :)
      untuk penggunaan warna atau yang lain :)  tinggal ganti saja kode warna color:rgb(red,green,blue) untuk warna font dan background: rgb(red,green,blue) untuk warna background nya ...
untuk pertanyaan atau yang lain nya mengenai menu navigasi vertikal dropdown ini bisa di diskusikan didalam komentar :) untuk penggunaan Icon kamu bisa lihat di sini
http://astronautweb.co/snippet/font-awesome/
cara menggunakan nya :
ganti fa- dengan icon- yah :)

:D untuk Js tetap kamu gunakan Js di atas :) ouh iya jangan lupa share + Like artikel ini yah :)
Dilarang copy paste artikel ini secara keseluruhan tanpa mencantumkan sumber link ke sini. Hati-hati dengan DMCA Google yah :hebat :wee

Original Article By Blog X Komo

COMMENTS

BLOGGER: 22
Loading...
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,5,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: Tutorial Cara Membuat Menu Navigasi Vertikal Dropdown dengan Fungsi Onclick (Show/Hide)
Tutorial Cara Membuat Menu Navigasi Vertikal Dropdown dengan Fungsi Onclick (Show/Hide)
Tutorial Cara Membuat Menu Navigasi Vertikal Dropdown dengan Fungsi Onclick (Show/Hide)
http://4.bp.blogspot.com/-N7evp62FKqQ/U4C-4jpMpLI/AAAAAAAABjU/kK-ZGeaq5ec/s1600/navigasi.png
http://4.bp.blogspot.com/-N7evp62FKqQ/U4C-4jpMpLI/AAAAAAAABjU/kK-ZGeaq5ec/s72-c/navigasi.png
BLOG X KOMO
http://www.xkomo.com/2014/05/tutorial-cara-membuat-menu-navigasi-vertikal.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2014/05/tutorial-cara-membuat-menu-navigasi-vertikal.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy