Cara Buat Menu Navigasi Seperti Kang Ismet Responsive

Pada kesempatan ini admin akan memberikan tutorial ; Cara Buat Menu Navigasi Seperti Kang Ismet Responsive. Siapa yang tidak kenal dengan blog tersebut .Blog dengan desain yang elegan , enak dilihat . Admin tidak melakukan clone tetapi hanya membuat Menu navigasi sehingga mirip dengan Kang Ismet. Bagi yang ingin lihat perbandinganya bisa dilihat  di link berikut

• Demo Mirip
• Blog Kang Ismet

Bagi yang sudah tidak sabar berikut adalah tutorialnya.

• Pertama kode tempat menu navigasi anda yang lama. (biasanya berbentuk <nav>...</nav>)
• Kemudian ,ganti dengan kode berikut.

<div id='main-nav'>
<nav class='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<ul>
<li><a class='hide zkrip1' href='/' itemprop='url'><span itemprop='name'>Home</span></a></li>
<li><a class='hide zkrip8' href='#' itemprop='url'><span itemprop='name'>Daftar Isi</span></a></li>
<li><a class='hide zkrip7' href='#' itemprop='url'><span itemprop='name'>Iklan</span></a></li>
<li><a class='hide zkrip2' href='#' itemprop='url'><span itemprop='name'>Tool</span></a>
<ul>
<li><a class='hide zkrip8' href='#' itemprop='url'><span itemprop='name'>Code Parser</span></a></li>
</ul>
</li>
</ul>
</nav>

• Sekarang tambahkan kode css berikut di atas ]]></b:skin>

#main-nav {
position: relative;
margin: 0;
padding: 40px 0 20px;
z-index: 50;
-webkit-transition: margin 0.25s linear;
-moz-transition: margin 0.25s linear;
-o-transition: margin 0.25s linear;
transition: margin 0.25s linear;
}
.menu {
float: right;
width: 100%;
margin: 30px 0 0;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
}
.menu ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
.menu ul li {
float: left;
position: relative;
width: 25%;
margin: 0;
}
.menu ul li ul {
position: relative;
z-index: 100;
}
.menu ul li ul li {
width: 100%;
}
.menu ul li a,
.menu ul li a:visited {
display: block;
text-decoration: none;
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
overflow: hidden;
color: #fff;
}
.menu ul li ul {
display: none;
transition:  .3s ease-out;-webkit-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;
}
.menu ul li:hover ul {
display: block;
position: absolute;
top: 40px;
left: 0;
width: 100%;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display: block;
color: #ddd;
}
.menu ul li:hover ul {
background: #fff;
}
.menu ul li:hover ul li a:hover {
color: #fff;
}
@media only screen and (min-width : 786px) and (max-width : 960px),
only screen and (min-device-width : 768px) and (max-device-width : 1024px) {.menu {
margin-top: 10px;
}
.menu ul li {
width: 50%;
}
}
@media only screen and (min-width : 650px) and (max-width : 785px),
only screen and (min-device-width : 686px) and (max-device-width : 767px) {#main-nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.menu {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.menu ul li {
width: 25%;
}
}
@media screen and (max-width:768px){
  .menu:before}
@media only screen and (max-width : 649px),
only screen and (min-device-width : 320px) and (max-device-width : 685px) {#main-nav {
padding: 0;
}
.menu {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.menu ul li {
width: 50%;
}
}
/*    ------Warna warni------    */
.zkrip1 { background-color:#284A62; }
.zkrip2 { background-color: #789CB6; }
.zkrip3 { background-color: #48CF89; }
.zkrip4 { background-color: #FAB36B; }
.zkrip5 { background-color: #48CFB6; }
.zkrip6 { background-color: #F47B55; }
.zkrip7 { background-color: #5E839D; }
.zkrip8 { background-color: #3F6682; }
.button.zkrip1 { background-color: #284A62; }
.button.zkrip2 { background-color: #789CB6; }
.button.zkrip3 { background-color: #48CF89; }
.button.zkrip4 { background-color: #FAB36B; }
.button.zkrip5 { background-color: #48CFB6; }
.button.zkrip6 { background-color: #F47B55; }

• Jika sudah simpan template dan lihat hasilnya. 

Tweet

Postingan terkait:

Ditulis Tarsisius — Februari 20, 2017 — 2 Comments — Tutorial