Cara membuat menu navigasi responsive pada blog - Hallo sahabat Didhiksty Blog, Pada Artikel yang anda baca kali ini dengan judul Cara membuat menu navigasi responsive pada blog , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Java Script, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara membuat menu navigasi responsive pada blog
link : Cara membuat menu navigasi responsive pada blog

Cara membuat menu navigasi responsive pada blog

Jika sobat menggunakan template yang responsive, mungkin membuat menu navigasi responsive tidak begitu penting, akan tetapi ini bisa membantu jika sobat ingin melakukan modifikasi template baik itu dari template orang lain maupun template default blog. Baik langsung saja kita bahas,

Cara membuat menu navigasi responsive pada blogspot

1. Template >> Edit HTML

2. Cari kode berikut dibawah <head>, pada bagian atas template

<b:if cond='data:blog.isMobile'>

<b:else/>

</b:if>

3. Ganti dengan kode dibawah ini

4. Copy kode dibawah ini, lalu paste tepat diatas kode ]]</b:skin>

/*-----Responsive Menu ----*/

body {margin: 0px;}

#menu{background: #50B7DC;color: #FFF;height: 40px;border-bottom: 2px solid #DDD;box-shadow: 1px 2px 9px #B1B1B1;border-top: 2px solid #DDD;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}

#menu ul{height:45px;width:1024px}

#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}

#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}

#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;

background: #5FC6EB;}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;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:16px;position:absolute;left:35px}

#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;}

#menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none;

text-shadow: none;border-bottom: 1px dashed #31AFDB;}

#menu ul.menus a{color: #FFF;line-height: 35px;}

#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out;

-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;

transition: all .1s ease-in-out;}

@media screen and (max-width: 800px){

#menu{position:relative}

#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}

#menu ul.menus{width:100%;position:static;padding-left:20px}

#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}

#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}

}

5. Copy kode dibawah ini dan paste kan dibawah kode <body>

<label>≡<span>Navigasi Menu</span></label>

<ul>

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

</ul>

</li>

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

</ul>

</li>

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

</ul>

</nav>

6. Save template.

Sumber : http://blogoonline.blogspot.co.id/2015/09/menu-navigasi-responsive.html . silakan kunjungi agar anda bisa mengetahui lebih rinci artikel ini.

Diblog tersebut anda juga bisa menemukan artikel lainnya yang tak kalah menarik diantaranya :

Demikianlah Artikel Cara membuat menu navigasi responsive pada blog

Sekianlah artikel Cara membuat menu navigasi responsive pada blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara membuat menu navigasi responsive pada blog dengan alamat link https://didhiksty.blogspot.com/2016/08/cara-membuat-menu-navigasi-responsive.html