XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
  • Profile
No Result
View All Result
XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
No Result
View All Result
  • Profile
XKOMODOTCOM
Tutorial Cara Membuat Menu Navigasi Vertikal Dropdown dengan Fungsi Onclick

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

Febri Tri Harmoko by Febri Tri Harmoko
8 years ago
in Blogger, Tutorial
1
0
0
SHARES
6.3k
VIEWS
ShareTweet

Halo sahabat blogger Indonesia Lama tak jumpa. Kalau kamu sampai ke sini berarti lagi nyariย Tutorial Cara Membuat Menu Navigasi Vertikal Dropdown dengan Fungsi Onclick (Show/Hide) yaah ? ๐Ÿ˜€ Di artikel ini pasti Artikel yang sangat kamu cari-cari yah ? ๐Ÿ˜€

Bercanda kok, kali ini saya akan berbagi / share ke kamu mengenai Menu Navigation. Kalau membahas soal menu navigasi pasti bertebaran yah di Google?

Oh itu sudah jelas dong tapi bagaimana dengan Menu Navigation Vertical?ย apakah banyak yang share? saya rasa tidak begitu banyak yang share mengenai tutorial ini.

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, nanti sisahnya kamu modifikasi sendiri saja ๐Ÿ™‚ #belajar berkreasi sekalian biar makin jago gitu ๐Ÿ˜€
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 ๐Ÿ˜€

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>

BACAJUGA

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

Update 03 – July – 2014: Update ini saya lakukan karna ternyata Js yg saya bikin Salah sehingga menu navigasi vertikal ini tidak berjalan sesuai keinginan ๐Ÿ˜€ tapi sekarang sudah saya perbaiki jadi yang sudah mencoba silahkan ganti Js yang lama dengan Js yang baru ini #Terimakasih.
<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 ๐Ÿ˜€

    <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

Oh 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 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 Menggunakannya: ganti fa- dengan icon-.ย Untuk Js tetap kamu gunakan Js di atas, Semoga bermanfaat.
Tags: BlogCodingCSSHTMLWidget
ShareTweet
Previous Post

Download Script Mouse Macro Tt Esport For AWP SG AW (No Recoil)

Next Post

Cara Setting Mouse Macro x7 A4tech Lengkap Untuk Quickchange, QuickScope, Dan No-Recoil

Febri Tri Harmoko

Febri Tri Harmoko

Hanya pemuda tersesat yang gemar menulis dan berbagi informasi di internet dan juga gemar membaca komik, nonton anime dan pencinta kucing sejati pastinya.

Related Posts

Cara Setting Private atau Public DNS di Android - PC - Laptop
Internet

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

3 weeks ago
248
Solusi Tidak Bisa Main Game Online Dengan Internet Indihome
Tips

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

3 weeks ago
24.4k
Cara Login Akun Admin Modem IndiHome Huawei HG8245H
Tutorial

Cara Login Akun Admin Modem IndiHome HUAWEI HG8245H / HG8245A

1 month ago
195.7k
Cara Login Modem IndiHome ZTE F609 Terbaru
Tutorial

Cara Login Modem IndiHome ZTE F609 / F660 (Username & Password)

1 month ago
270.6k
Cara Mengatasi Warna Background Putih Menjadi Kuning di Windows
Windows

Cara Mengatasi Warna Background Putih Menjadi Kuning di Windows

1 month ago
12
Cara Mengganti DNS Google - Cloudflare di Windows PC atau Laptop
Windows

Cara Mengganti DNS Google / Cloudflare di Windows (PC/Laptop)

2 months ago
168
Load More
Next Post
Cara Setting Mouse Macro x7 A4tech Lengkap Untuk Quickchange, QuickScope, Dan No-Recoil

Cara Setting Mouse Macro x7 A4tech Lengkap Untuk Quickchange, QuickScope, Dan No-Recoil

Please login to join discussion
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
Advertise with us

ยฉ 2014 - 2022 XKOMODOTCOM โ€” Made With in Indonesia

No Result
View All Result
  • Profile
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING

ยฉ 2014 - 2022 XKOMODOTCOM โ€” Made With in Indonesia

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.