Thursday, August 25, 2016
Navigasi Menu Blog Responsive Dropdown Simple ala Maskolis
Navigasi Menu Blog Responsive Dropdown Simple ala Maskolis
Navigasi Menu Blog Responsive Dropdown Simple hasil desain Maskolis. Diterapkan di template seo friendly & responsive karya Creating Website.
Demo Navigasi Menu Blog Responsive Dropdown Simple ini ada di navigasi menu blog ini. Gambar di bawah ini ilustrasi lain sebagai inspirasi pewarnaan.
KODE CSS:
Simpan di atas kode ]]></b:skin> atau </style>
#menu{background:#464646;color:#eee;height:35px;font-size,width:100%;background:#3771b5;color:#fff;font-family:Arial;margin:0x;font-weight:700;text-transform:uppercase}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}
@media only screen and (max-width:768px) {
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}}
KODE HTML:
<nav id=menu itemscope=itemscope itemtype=http://schema.org/SiteNavigationElement>
<input type=checkbox/>
<label>≡<span>Navigation</span></label>
<ul>
<li><a href=/ title="Home">Home</a></li>
<li><a href=# title="Menu 1">Menu 1</a></li>
<li><a class=prett href=# title="Drop Menu">Drop Menu</a>
<ul class=menus>
<li><a href=# title="Drop Menu1">Drop Menu 1</a></li>
<li><a href=# title="Drop Menu2">Drop Menu 2</a></li>
<li><a href=# title="Drop Menu3">Drop Menu 3</a></li>
</ul>
</li>
<li><a href=# title="Menu 2">Menu 2</a></li>
<li><a class=prett href=# title="Drop Menu1">Drop Menu 1</a>
<ul class=menus>
<li><a href=# title="Drop Menu 1">Drop Menu 1</a></li>
<li><a href=# title="Drop Menu 2">Drop Menu 2</a></li>
<li><a href=# title="Drop Menu 3">Drop Menu 3</a></li>
</ul>
</li>
<li><a class=trigger2 href=http://www.contohblog.com target=_blank>Blog Partner</a></li>
</ul>
</nav>
<div class=clear/>
Simpan kode HTML di atas kode:
<div id=content-wrapper> atau <div id=main-wrapper>
Available link for download
