Setelah membuat navigation menu dan header, langkah selanjutnya adalah membuat dropdown menu. Dropdown menu adalah menu yang menunjukkan konten apa saja yang ada atau terdapat pada blog. Biasanya menu dropdown ini menunjuk terhadap postingan tertentu atau menunjuk label tertentu. Menu dropdown yang akan dibuat pada postingan ini adalah menu dropdown yang seperti
blog ini.
Bentuknya seperti di atas. Yang dimaksud responsive adalah dapat menyesuaikan ukuran layar. Pada layar yang berukuran kecil seperti layar hp, tampilan menu ini akan berubah menjadi seperti ini
Konsep dari membuat menu dropdown seperti ini adalah membuat 2 buah tampilan menu. Dengan satu tampilan tidak ditampilkan pada kondisi tertentu. Biasanya menu dropdown ini diletakkan di bawah header yang telah dijelaskan pada postingan sebelumnya tentang
membuat header blog. Walaupun ada juga blog yang meletakkan dropdown menu ini di atas, bersebelahan dengan header yang kecil.
Langsung saja, di bawah ini dijelaskan cara membuat menu dropdown ini.
Untuk kode html, salin kode berikut dan letakkan di bawah kode header yang telah dibuat
<nav id='menu'>
<input type='checkbox'/><label>≡<span>menu</span></label>
<ul>
<li><a href='#'>menu1</a></li>
<li><a href='#'>menu2</a></li>
<li><a href='#'>menu3 ▼</a>
<ul class='menus'>
<li><a href='#'>submenu 1</a></li>
<li><a href='#'>submenu 2</a></li>
<li><a href='#'>submenu 3</a></li>
</ul>
</li>
</ul>
</nav>
Kemudian untuk kode css dropdown menu ini
#menu{
clear:both;
width:100%;
background-color:#424242;
color: #FFF;
height: 43px;
z-index:1;
}
#menu ul,#menu li{
margin:0 auto;
padding:0 0;
list-style:none;
}
#menu ul{
height:47px;
width:100%;
}
#menu li{
float:left;
display:inline;
position:relative;
font:bold Arial;
}
#menu a{
display: block;
line-height: 43px;
padding: 0px 14px;
text-decoration: none;
color: #FFF;
}
#menu li a:hover{
color: white;
-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;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#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{
overflow:hidden;
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;
width:100%;
top:0px;
left:0;
border-bottom:5px solid #f44336;
}
#menu ul{
background:#2288cc;
position:absolute;
top:100%;
right:0;
left:0;
z-index:3;
height:auto;
display:none;
}
#menu ul.menus{
width:100%;
position:static;
}
#menu li{
display:inline;
float:none;
width:auto;
font:normal Arial;
}
#menu li ul.menus{
display:block;
}
#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,li{
display:block;
}
}
Letakkan kode css di atas di atas
<b:skin><![CDATA[
Menu dropdown ini dapat dikustomisasi sesuai keinginan, misalnya letaknya dapat dirubah, atau ukurannya dirubah atau warnanya dirubah. Sesuai keinginan anda.
Demikian cara membuat dropdown menu responsive.
Related Posts