Membuat Menubar Ala ArlinaDesign
1. Login blogger > Tataletak > Edit HTML >
2. Letakan kode dibawah ini di atas kode ]]></b:skin>
/* NAVIGATION MENU 2 */
.toggleMenu{display:none;background:#374760;padding:0 15px;height:55px;line-height:55px;color:#fff!important}
#nav{font:normal bold 15px Arial,sans-serif;background:#374760;text-transform:uppercase;height:56px;line-height:50px}
.nav-menu2{background: #374760;list-style:none;margin:0 0 0 0;*zoom:1;float:left}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}
.nav-menu2 ul{list-style:none;margin:0 0 0 0;width:12em}
.nav-menu2 a{display:block;padding:0 20px}
.nav-menu2 li{position:relative;margin:0 0}
.nav-menu2 > li{float:left}
.nav-menu2 > li > a{display:block;height:55px;line-height;55px;color:#ffffff;box-shadow:0 4px 0 #374760 inset}
.nav-menu2 > li > a.active{background:#3cc091;box-shadow:0 4px 0 #3cc091 inset}
.nav-menu2 > li:hover > a{background:#3cc091;box-shadow:0 4px 0 #3cc091 inset}
.nav-menu2
li
ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-webkit-transition:all
.25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s
ease-out;-o-transition:all .25s ease-out;transition:all .25s
ease-out;border:1px solid #374760;border:1px solid
rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 > li.hover > ul{visibility:visible;opacity:10}
.nav-menu2
> li >
ul:before{content:"";width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent
transparent #fff transparent;display:block}
.nav-menu2 li li.hover ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#333;position:relative;z-index:100;line-height:32px}
.nav-menu2 li li a:hover{background:#000000}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2
li
.parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
#search-form{background:#374760;float:right;margin:0 0;width:200px}
#search-form table{width:100%;margin:0 0 0 0}
#search-form td.search-box{padding-right:30px}
#search-form
input#search-box[type="text"]{background:#ffffff;height:36px;line-height:36px;margin:5px
0 5px 10px;padding:0 10px;width:99%;color:#374760;border:none}
#search-form
input#search-button[type="submit"]{font-family:FontAwesome;background:#3cc091;color:#ffffff;height:36px;line-height:36px;margin:5px
10px 5px 0;padding:0 12px;border:none;outline:none;transition:all
0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s}
#search-form input#search-button[type="submit"]:hover{background:#374760;cursor:pointer}
#search-form input#search-box[type="text"]:focus{background:#eee;outline:none}3. Letakan kode di bawah ini diatas kode </header>
<nav id='nav'>
<a class='toggleMenu' href='#'><i class='fa fa-th-list'/> Menu</a>
<!-- secondary navigation menu start -->
<ul class='nav nav-menu2'>
<li><a class='active' href='masyadi.com'><i class='fa fa-home'/> Home</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Android</a>
<ul>
<li><a href='#'>Sub Menu 1</a>
</li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Blogger</a></li>
<li><a href='masyadi.com'>Adsense</a></li>
<li><a href='masyadi.com'>Template</a></li>
<li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html'>Tool</a></li>
<!-- secondary navigation menu end -->
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...' vinput=''/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
</ul>
5. Letakan kode dibawah ini diatas kode </style>
<style type='text/css'>@media screen and (max-width:1024px){body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}body .navbar {height: 0!important;}.footer-inner {padding: 30px 0px!important;}}
@media screen and (max-width: 603px){.main-inner .columns {padding-right: 0!important;}.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}}
@media only screen and (max-width: 768px) {
.nav { float: none; width: 100%; max-width: 100%; }.active { display: block; }#search-form { width: 100%; margin: 0 0 0 0 !important; }.nav li ul:before { display: none; }.nav > li { float: none; overflow: hidden; }.nav ul { display: block; width: 100%; float: none; }.nav-menu2 li ul { background: #eee; border: none; box-shadow: none; }.nav-menu2 li li ul { background: #f5f5f5; }.nav-menu2 li li a:hover { background: #ddd; }.nav > li.hover > ul, .nav li li.hover ul { position: static; }#search-form { width: 100%; background: #444; }#search-form td.search-box { padding: 0 10px !important; }#search-form td.search-button { padding: 0 10px; width: 1%; }#search-form input#search-box[type="text"] { margin: 0 0 0 0; }#search-form input#search-button[type="submit"] { margin: 0 0 0 0; }
Demikian tutorial tentang Responsive Menubar Blog , Semoga berhasil
1 komentar:
Write komentarmakasih infonuya gan :D
ReplySilahkan Berkomentar Yang Baik Sesuai Topik , Mohon Jangan Menautkan Link Hidup / Link Mati Karena Akan Dianggap Spam EmoticonEmoticon