Membuat Menu Responsive Fast Loading Tanpa Javascript

Baca Juga

Cara Membuat Navigasi Menu Responsive Fast Loading Tanpa Javascript.

MEMBUAT navigasi menu responsive ada dua cara, yaitu menggunakan javascript dan menggunakan css media query.

Berikut ini penampakan navigasi menu versi desktop dan mobile yang cara pemasangannya ada di bawah.

Menu responsive yang menggunakan javascript kadang error karena kode tidak berfungsi atau bentrok dengan kode script lainnya.

Yang paling aman, anti-erros, dan fast loading adalah membuat navigasi menu responsive tanpa javascrip dari My Blogger Guide di bawah ini.

Cara Membuat Menu Responsive Fast Loading Tanpa Javascript

1. KODE CSS
Simpan di atas kode ]]></b:skin> atau </style>

#menu-wrapper{background:#4b3f57;height:50px;width:100%;position:relative;}#menu1{background:#4b3f57;color:#fff;height:50px;}#menu1 {border-bottom: 4px solid #D83C3C;}#menu1 ul,#menu1 li{margin:0;padding:0;list-style:none;}#menu1 ul{height:50px}#menu1 li{float:left;display:inline;position:relative;font-family:&#39;Open Sans Condensed&#39;,Arial;font-size:15px;font-weight:600;text-transform:uppercase;}#menu1 li a{color:#fff;}#menu1 a{display:block;line-height:50px;padding:0 10px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}#menu1 li:hover &gt; a{background:#3f354a;color:#fff;}#menu1 li a:hover{color:#fff;}#menu1 li:last-child a{border-right:none;}#menu1 input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}#menu1 label{font-family:Arial;font-size:30px;font-weight:700;text-transform:uppercase;display:none;width:35px;height:51px;line-height:51px;text-align:center}#menu1 label span{font-size:13px;position:absolute;left:35px}#menu1 ul.menus{visibility:hidden;opacity:0;height:auto;overflow:hidden;width:166px;background:#3f354a;position:absolute;z-index:99;display:none;color:#fff;transition:all 0.3s ease-in-out;}#menu1 li &gt; ul.menus{transition:all 0.3s linear;}#menu1 li:hover &gt; ul.menus{visibility:visible;opacity:1;display:block;-moz-animation: fadeInUp .3s ease-in-out;-webkit-animation: fadeInUp .3s ease-in-out;animation: fadeInUp .3s ease-in-out;transition:all 0.3s linear;}#menu1 a.ai,#menu1 a.trigger2{padding:0 27px 0 14px;transition:all 0.3s linear;}#menu1 li:hover &gt; a.ai,#menu1 a.ai:hover{background:#3f354a;color:#fff}#menu1 li &gt; a.ai::after {content:&quot;&quot;;margin:0 auto;background:url(&#39;http://2.bp.blogspot.com/-mHVCs4K3A84/U9vKbpqhSmI/AAAAAAAAE5E/y7Dp7HzmenA/s1600/arrow.png&#39;) no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 li:hover &gt; a.ai::after {content:&quot;&quot;;margin:0 auto;background:url(&#39;http://3.bp.blogspot.com/-ihlfaVl0yFM/U9vMSJa-tLI/AAAAAAAAE5Q/9SRXYxdvmmI/s1600/arrowhover.png&#39;) no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:1px solid #3a3144;transition:all .3s linear;}#menu1 ul.menus a:hover{background:#322a3b;color:#fff;transition:all .1s linear;}#menu1 ul.menus li{display:block;width:100%;font-family:&#39;Open Sans&#39;;font-size:13px;font-weight:400;text-transform:none;}#menu1 ul.menus li:hover{width:100%;}#menu1 ul.menus li:last-child {border-bottom:none;}#menu1 ul.menus li:first-child a{border-top:none;}#menu1 ul.menus li:last-child a{border-bottom:none;}#menu1 ul.menus li:hover a {background:#322a3b;color:#fff;}#menu1 .homers a{background:#D83C3C;color:#fff;}#menu1 .homers a:hover{background:#D83C3C;color:#fff;}#menu1 .homers1 a{box-shadow:inset 0 -4px 0 0 #D83C3C;color:#fff;}#menu1 .homers1 a:hover{box-shadow:inset 0 -54px 0 0 #D83C3C;color:#fff;}
@media screen and (max-width:960px) {#menu1{position:relative;background:#4b3f57;color:#fff;}#menu1 ul{background:#3f354a;position:absolute;top:100%;right:0;left:0;z-index:5;height:auto;display:none;}#menu1 ul.menus{width:100%;position:static;}#menu1 li{display:block;width:100%;text-align:left;}#menu1 a{border:none;}#menu1 li a{color:#fff;}#menu1 li a:hover{background:#D83C3C;color:#fff}#menu1 li:hover{background:#D83C3C;color:#fff;}#menu1 li:hover &gt; a.ai,#menu1 a.ai:hover{background:#D83C3C;color:#fff;}#menu1 li:hover &gt; a,#menu1 li a:hover{background:#D83C3C;color:#fff;box-shadow:none;transition: .3s linear;}#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus a:hover{background:#D83C3C;color:#fff;border-left:none;}#menu1 ul.menus li{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li:hover{background:#D83C3C;color:#fff;border-left:none;}#menu1 ul.menus li a{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li a:hover{background:#D83C3C;color:#fff;border-left:none;}#menu1 input,#menu1 label{display:inline-block;position:absolute;right:0;top:0;}#menu1 input:after,#menu1 label:after {content:&quot;&quot;;background:url(&#39;http://1.bp.blogspot.com/-P2RRijDirXA/U8ftwSomm6I/AAAAAAAAEbo/tLU4c5dk2K4/s1600/nav-icon.png&#39;) no-repeat; width:30px;height:30px;display:inline-block;position:absolute;right:15px;top:17px;}#menu1 input{z-index:4}#menu1 input:checked + label{color:#fff;font-weight:700}#menu1 input:checked ~ ul{display:block}#menu1 .homers a{background:transparent;color:#fff;}#menu1 .homers a:hover{background:#D83C3C;color:#fff;}#footer-widgetfix {width:100%;overflow:hidden;}#menu1 li:hover &gt; a.ai::after{content:&quot;&quot;;width:6px;height:6px;border:2px solid #fff;border-right-width:0;border-top-width:0;transform:rotate(320deg);-webkit-transform:rotate(320deg);-moz-transform:rotate(320deg);-o-transform:rotate(320deg);-ms-transform:rotate(320deg);position:absolute;top:19px;right:12px;transition:all .3s linear;}}

2. KODE HTML
Simpan di bawah kode <div id='header'...> s.d. </div>

<nav id='menu1'>

<input type='checkbox'/>

<label><span>CB</span></label>

<ul>

<li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'></i></a></li>

<li><a href='#'>Drop Down1</a>

<ul class='menus'>

<li><a href='#'>Tab 1</a></li>

<li><a href='#'>Tab 2</a></li>

<li><a href='#'>Tab 3</a></li>

</ul>

</li>

<li><a href='#'>Seo</a></li>

<li><a href='#'>Template</a></li>

<li><a href='#'>Widget</a></li>

<li><a href='#'>Social Media</a></li>

</ul>

<a href='#' id='pull'>MENU</a></nav>

3. Save!

*** Lakukan perubahan pada link (#) dan nama menu.

Demikian Cara mudah Membuat Menu Responsive Fast Loading Tanpa Javascript. (http://www.contohblog.com).*