Sebuah menu horizontal minimalis dan ringan dibangun dengan CSS murni. Menu ini juga responsif, mengubah dirinya menjadi menu vertikal pada perangkat mobile dengan layar kecil.
DEMO
Cara membuat menu responsive simple:
1. Login blog
2. Template > edit html
3. Letakkan kode css berikut di atas ]]></b:skin>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
background: #f96e5b;
width: auto;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
float: left;
display: block;
padding: 0;
}
#cssmenu ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #333333;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: '';
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #333333;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #333333;
}
#cssmenu ul li.active a:before {
width: 100%;
}
@media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
height: 1px;
background: #ffffff;
width: 100%;
opacity: .2;
}
#cssmenu ul li.last > a:before,
#cssmenu ul li:last-child > a:before {
display: none;
}
}
anda bisa mengganti warna menu pink menjadi warna lain.
simpan template
3. Letakkan kode html berikut di layout
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Disclaimer</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Ganti kode berwarna dengan url dan menu url anda.
4. simpan
Semoga tutorialnya bermanfaat.
Comments
Post a Comment