Cara Membuat simple Navigasi Dropdown Reponsive - Hallo sahabat Cheater251 | Free Download Cheat LostSaga, PointBlank, First Blood 2017, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat simple Navigasi Dropdown Reponsive, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat simple Navigasi Dropdown Reponsive
link : Cara Membuat simple Navigasi Dropdown Reponsive

Cara Membuat simple Navigasi Dropdown Reponsive

WWW.RHM-FILES.TK

Selamat malam semuanya ketemu lagi sama kami Rhm-Files.Tk untuk memberikan sebuah tutorial lagi, dikesempatan yang bahagian ini kami akan memberikan sebuah tutorial lagi tentang membuat sebuah menu navigasi dropown simpe reponzive dengan CSS3 dan sentuhan javascript dan JS dalam pembuatan website ataupun blog menu navigasi adalah fitur yang sangat penting untuk memudahkan penunjung/user untuk mlihat page maupun informasi lainya untuk itu gak usah panjang lebar kita langsung praktekkan..

1. Silahkan buka editor kalian masing-masing  dan jangan lupa siapkan segelas kopi :)
2. Sekarang kita buat code cssnya seperti dibawah ini

.menu-wrapper {background:#2A7FB8; min-height:43px; width:100%;color:#ffffff;}
#navigation {
right: 40px;
bottom: 0px;
}

#menu-toggle { z-index:+999999;
display: none;
float: right;
}/* MENU */
#main-menu {
float:left;
font-size: 0;
margin: 12px 0;
}

#main-menu > li { margin:auto;
display: inline-block;
margin-left:2px;
padding: 2px 0;
}

#main-menu > li.parent {
background-image: url(./plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: right center;
}

#main-menu > li.parent > a {
padding-left: 14px;
}

#main-menu > li > a {font-family:Arial, Helvetica, sans-serif;font-weight:700;
color: #ffffff;
font-size: 14px;
line-height: 14px;
padding: 5px 9px;
text-decoration:none;

}

#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {

}
#main-menu li.active {color: #23dbdb;}

/* > MENU > DROPDOWN */
#main-menu li { list-style:none; margin:auto;
position: relative;
}

ul.sub-menu { /* level 2 */
display: none; margin:auto;
left:0px;
top:22px;
padding:10px 0px 0px 13px;
position: absolute;
width: 180px;
z-index: 9999; list-style:none!important;
}

ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left:170px;
top: 0px;list-style:none;
}

ul.sub-menu > li:first-child {
border-top: 1px solid #ccc;
}


ul.sub-menu li {list-style:none}
ul.sub-menu > li > a { list-style:none!important; text-decoration:none;
border: 1px solid #cccccc;
border-top: none;
color: #333333;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu > li > a:hover{ color:#297FB8;}

ul.sub-menu > li > a.active {color:#333;}
ul.sub-menu > li:first-child {

}

ul.sub-menu ul.sub-menu > li:first-child {
border-top: 1px solid #ccc;
}

ul.sub-menu > li:last-child > a {
border-radius: 0 0 2px 2px;
}


ul.sub-menu > li.parent {
background-image:url(arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;}


#main-menu li:hover > ul.sub-menu {
display: block; /* show the submenu */
}

3. Untuk pembuatan layout menu navigasinya sudah selesai sekarang kita tinggal panggil dengan html

<div class="menu-wrapper"><a id="menu-toggle" title="Menu">Menu</a>
<nav id="navigation">
<ul id="main-menu">
<li><a href="#">Beranda</a></li> 
<li><a href="#">Profile</a></li> 
<li class="parent"><a href="#">Dropdown</a>
<ul class="sub-menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</li>

<!-- start: dropdown -->
<li class="parent"><a href="#">Dropdown</a>
<ul class="sub-menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li class="parent"><a href="#">Dropdown Level</a>
<ul class="sub-menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul></li>

</ul>
</li>

</ul>
</nav>
</div>

4. Menu Navigasi Dropdown anda sudah selasi bisa di jalankan di browser kalian masing-masing, tapi saat ini menu navigasi yang kita buat belum reponsive untuk membuat sebuah menu reposive kita harus membuat cssnya kembali dengan Media Queries dan taruh code css ini dibawah css yang tadi telah kita buat.

@media all and (max-width: 700px) {#navigation { width:100%;
position: static;
}

#menu-toggle { position:absolute;right:10px; color:#ffffff; font-size:25px; padding:3px 10px 5px 5px;
display: block; cursor:pointer;z-index:+999999;
}

#main-menu { margin:auto;
display: none;
float: none;
}

#main-menu li { list-style:none;
display: block;
margin: 0;
padding: 0;
}

#main-menu > li {
margin-top: -1px;
}

#main-menu > li:first-child {
margin-top: 0;
}

#main-menu > li > a {
background-color: #eeeeee;
border: 1px solid #ccc;
color: #333;
display: block;
font-size: 14px;
padding: 12px !important;
padding: 0;
}

#main-menu li > a:hover {
background-color: #ffffff; 
}

#main-menu > li.parent {
background: none !important;
padding: 0;
}

#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
border: 1px solid #eeeeee !important;
color: #333333 !important;
}

ul.sub-menu { background:#ffffff;
display: block;
margin-top: -1px;
position: static;
padding: 0;
width: inherit;
}

ul.sub-menu > li:first-child {
border-top: 1px solid #eeeeee !important;
}

ul.sub-menu > li > a.parent {
background: #ffffff !important;
}
}

5. Sekarang menu anda sudah reponsive tapi belum bisa djalankan untuk membuat menu navigasi, perlu adanya javascript dan js supaya menu navigasi jalan.
anda bisa menggunakan jquery.js untuk pluginnya dan untuk javascript bisa simpan code dibawah ini dan taruh diatas tags </head>

<script type="text/javascript">
$(document).ready(function() {

/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');

$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});

$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});

});
</script>

6. Selesai menu anda sudah berhasil menjadi reponsive

Demikianlah Artikel Cara Membuat simple Navigasi Dropdown Reponsive

Sekianlah artikel Cara Membuat simple Navigasi Dropdown Reponsive kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat simple Navigasi Dropdown Reponsive dengan alamat link https://cheatterbaru2.blogspot.com/2016/07/cara-membuat-simple-navigasi-dropdown.html

Tweet