Cara Mudah Membuat Menu Responsive Tanpa jQuery

Cara Mudah Membuat Menu Responsive Tanpa jQuery

Cara Mudah Membuat Menu Responsive Tanpa jQuery

Keluar dari tema dunia kebun sawit yang selama ini mengisi postingan di blog antoncabon...saya coba membagikan sebuah tutorial Cara Membuat Menu Responsive Tanpa jQuery yang sobat blogger semuanya mungkin dan saya sangat yakin tutorial kali ini sudah banyak dijumpai oleh sobat blogger, namun disini bukan masalah sudah banyak atau tidaknya tutorial tersebut tetapi bagaimana cara kita mengambil pelajaran dari sisi yang lain dan menjadikannya sebagai media pembelajaran alternatif baik itu untuk diri saya sendiri maupun buat sobat blogger terutama yang newbie (seperti saya ini hehehehe), sobat pernah melihat suatu blog ketika kita mengunjungi blog tersebut menggunakan smartphone atau yang sejenisnya maka akan muncul sebuah icon menu yang ketika di klik atau sentuh  akan terbuka link menunya, saya akan  berbagi sedikit kode css dan html untuk sobat yang ingin mengetahui Cara Membuat Menu Responsive Tanpa jQuery dengan mudah serta cara menerapkan atau memasangnya di blog sobat, dan yang terpenting menu responsive ini sama sekali hanya menggunakan CSS dalam penerapannya sehingga tidak mempengaruhi kecepatan loading blog sobat, dijamin 100 persen dah...

Responsive Menu Tanpa jQuery
Cara Mudah Membuat Menu Responsive Tanpa jQuery

Langkah-langkah Pembuatan Menu Responsive di blog :

Langkah-1 : Login Blogger, Klik menu Template > Edit HTML  

Langkah-2 : Copy kode CSS di bawah ini, setelah itu paste tepat sebelum tag </head> :

<style>
/* RESPONSIVE MENU */
#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}
}
</style>

Langkah-3 : Cari kode HTML atau yang sama seperti di bawah ini,

<b:if cond='data:blog.isMobile'> 
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/> 
<b:else/> 
<meta content='width=1100' name='viewport'/> 
</b:if>

Langkah-4 : Setelah ketemu ganti semua kode tersebut dengan kode di bawah ini.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> 
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

Langkah-5 Cari kode <body> lalu copy dan faste kode dibawah ini tepat di bawah kode tersebut.

<nav id='menu'> 
<input type='checkbox'/> 
<label>&#8801;<span>Menu&#160;Responsive&#160;</span></label>
<ul> 
<li><a href='#'>Featured 1 <font size='1'>&#9660;</font></a> 
<ul class='menus'> 
<li><a href='#'>Sub Menu 1</a></li> 
<li><a href='#'>Sub Menu 2</a></li>
</ul> 
</li>
<li><a href='/'>Home</a></li> 
<li><a href='#'>About</a></li> 
<li><a href='#'>Featured 2 <font size='1'>&#9660;</font></a> 
<ul class='menus'> 
<li><a href='#'>Sub Menu 1</a></li> 
<li><a href='#'>Sub Menu 2</a></li> 
<li><a href='#'>Sub Menu 3</a></li> 
<li><a href='#'>Sub Menu 4</a></li> 
<li><a href='#'>Sub Menu 5</a></li> 
<li><a href='#'>Sub Menu 6</a></li>
</ul> 
</li> 
<li><a href='#'>Contact</a></li> 
<li><a href='#'>Featured 3 <font size='1'>&#9660;</font></a> 
<ul class='menus'> 
<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='#'>Pasang Iklan</a></li> 
       </ul> 
    </nav>

Langkah-6 : Simpan template sobat dan silahkan ganti Menu&#160;Responsive&#160; dengan judul blog atau yang lainnya terserah sobat sendiri.



Selesai! Untuk demonstrasi bisa sobat lihat pada link demo diatas. 

Demikianlah Tutorial mengenai Cara Mudah Membuat Menu Responsive Tanpa jQuery, semoga ada manfaatnya ya, dan saya sangat senang Jika ada sobat Blogger yang ingin berdiskusi seputar Postingan ini atau Postingan tentang Dunia Kebun Sawit, silahkan tinggalkan komentar sobat di kolom komentar blog ini. saya akan sangat senang meresponnya, terimakasih salam Antoncabon.

"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!
Source Code Here

DONASI VIA FASAPAY



Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Suka dengan postingan ini? Silahkan share postingan ini dengan cara klik Tombol SHARE THIS di atas, Terimakasih.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Anton Cabon? Keep us running by whitelisting Antoncabon in your ad blocker.

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×