Lompat ke konten Lompat ke sidebar Lompat ke footer

#Membuat Menu Navigasi Seperti Evomagz Mas Sugeng!

Awaknyo >>

Membuat Menu Navigasi Seperti Evomagz Mas Sugeng!

selamat datang, siapa yang tidak ngiler lihat kerennya menu navigasi evo magz mas sugeng. jika kamu pengen seperti itu bisa kok, mudah caranya. tapi sedapat mungkin jangan terlalu sama yah, ubah warna warnanya kek apa kek ..

Log in ke blogger.com
pilih menu template
edit html

cari ]]></b:skin> atau </style> paste diatasnya kode berikut:

/* NAVIGATION MENU 2 */
.toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important}
#nav{font:normal bold 12px Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px}
.nav-menu2{background:#333333;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 15px}
.nav-menu2 li{position:relative;margin:0 0}
.nav-menu2 > li{float:left}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0 #333333 inset}
.nav-menu2 > li > a.active{background:#222222;box-shadow:0 4px 0 #E73138 inset}
.nav-menu2 > li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 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 #d9d9d9;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:#f0f0f0}
.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:#333333;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:#666666;border:none}
#search-form input#search-button[type="submit"]{font-family:FontAwesome;background:#E73037;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:#222222;cursor:pointer}
#search-form input#search-box[type="text"]:focus{background:#eee;outline:none}

pasang kode dibawah ini tepat dibawah kode </header> atau <body>
<nav id='nav'>
<a class='toggleMenu' href='#'><i class='fa fa-th-list'></i> Menu</a>
<!-- secondary navigation menu start -->
<ul class='nav nav-menu2'>
<li><a class='active' href='masyadi.com'><i class='fa fa-home'></i> Home</a></li>
<li><a href='#'>Menu 1</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='#'>Menu 2</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='#'>Menu 3</a></li>
<li><a href='masyadi.com'>Markup</a></li>
<li><a href='masyadi.com'>Error Page</a></li>
<li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html'>Static Page</a></li>
</ul>
<!-- 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==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...' vinput=''/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
</nav>

pasang kode dibawah ini diatas kode </body>
<script type='text/javascript'>var ww=document.body.clientWidth;$(document).ready(function(){$(&quot;.nav li a&quot;).each(function(){if($(this).next().length&gt;0){$(this).addClass(&quot;parent&quot;)}});$(&quot;.toggleMenu&quot;).click(function(f){f.preventDefault();$(this).toggleClass(&quot;active&quot;);$(&quot;.nav&quot;).toggle()});adjustMenu()});$(window).bind(&quot;resize orientationchange&quot;,function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww&lt;768){$(&quot;.toggleMenu&quot;).css(&quot;display&quot;,&quot;inline-block&quot;);if(!$(&quot;.toggleMenu&quot;).hasClass(&quot;active&quot;)){$(&quot;.nav&quot;).hide()}else{$(&quot;.nav&quot;).show()}$(&quot;.nav li&quot;).unbind(&quot;mouseenter mouseleave&quot;);$(&quot;.nav li a.parent&quot;).unbind(&quot;click&quot;).bind(&quot;click&quot;,function(f){f.preventDefault();$(this).parent(&quot;li&quot;).toggleClass(&quot;hover&quot;)})}else{if(ww&gt;=768){$(&quot;.toggleMenu&quot;).css(&quot;display&quot;,&quot;none&quot;);$(&quot;.nav&quot;).show();$(&quot;.nav li&quot;).removeClass(&quot;hover&quot;);$(&quot;.nav li a&quot;).unbind(&quot;click&quot;);$(&quot;.nav li&quot;).unbind(&quot;mouseenter mouseleave&quot;).bind(&quot;mouseenter mouseleave&quot;,function(){$(this).toggleClass(&quot;hover&quot;)})}}};</script>

pasang kode css berikut diatas kode  ]]></b:skin> atau </style>
@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; }
}

pasang javascript font awesome berikut diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

wah banyak juga scriptnya untuk menu yang keren ini yah sob,, selamat mencoba 

Posting Komentar untuk "#Membuat Menu Navigasi Seperti Evomagz Mas Sugeng!"