Menu Horizontal Dengan 2 Submenu Sederhana
Menu merupakan sebuah elemen blog yang tidak dapat dilepaskan. Menu merupakan sebuah navigasi untuk memudahkan pengunjung mencari artikel sesuai katagori yang disajikan. Sepertinya tidak akan habis bahasan dengan sajian ini dengan beraneka ragam modifikasinya sehingga tampilannya menambah elegan sebuah blog.
Dan kali ini aku akan share sebuah sajian yang aku bilang cukup sederhana alasannya yakni hanya memakai instruksi CSS atau pure CSS.
Menu horizontal ini mempunyai 2 sub sajian sehingga memungkinkan untuk menampung banyak katagori di dalamnya. Karena sajian ini memakai pure CSS, maka ini tidak akan memberatkan loading blog. Seperti biasa aku memakai background warna cerah yang dapat Anda lihat pada link demo di bawah ini.
Dan sajian ini dapat Anda modif lagi pada background-nya semoga lebih sesuai dengan tema blog Anda.
Kode CSS
#menutop ul,
#menutop li,
#menutop span,
#menutop a {
margin: 0;
padding: 0;
position: relative;
}
#menutop {
height: 49px;
background: #D5D5D5;
border-bottom: 4px solid #59c5ff;
width: auto;
}
#menutop:after,
#menutop ul:after {
content: '';
display: block;
clear: both;
}
#menutop a {
background: #D5D5D5;
color: #000;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#menutop ul {
list-style: none;
}
#menutop > ul,#menutop > ul > li {
float: left;
}
#menutop > ul > li > a {
color: #000;
font-size: 12px;
}
#menutop > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #59c5ff;
margin-left: -10px;
}
#menutop > ul > li.active:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #59c5ff;
margin-left: -10px;
}
#menutop > ul > li.active > a,#menutop > ul > li:hover > a {
background: #ececec;
}
#menutop .menu-sub {
z-index: 1;
}
#menutop .menu-sub:hover > ul {
display: block;
}
#menutop .menu-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#menutop .menu-sub ul li {
margin-bottom: 0px;
}
#menutop .menu-sub ul li a {
background: #59c5ff;
border-bottom: 1px solid #8cd7ff;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#menutop .menu-sub ul li:hover a {
background: #26b3ff;
}
#menutop .menu-sub .menu-sub:hover > ul {
display: block;
}
#menutop .menu-sub .menu-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#menutop .menu-sub .menu-sub ul li a {
background: #26b3ff;
border-bottom: 1px solid #8cd7ff;
}
#menutop .menu-sub .menu-sub ul li a:hover {
background: #0daaff;
}
Kode HTML
<div id='menutop'>
<ul>
<li class='active'><a href='/' target='_blank'><span>Home</span></a></li>
<li class='menu-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='menu-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='menu-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
<li class='menu-sub'><a href='#'><span>More Menu</span></a>
<ul>
<li class='menu-sub'><a href='#'><span>More Menu 1</span></a>
<ul>
<li><a href='#'><span>Sub Menu 1</span></a></li>
<li class='last'><a href='#'><span>Sub Menu 2</span></a></li>
</ul>
</li>
<li class='menu-sub'><a href='#'><span>More Menu 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div> Selamat mencoba dan berkreasi....
Sumber https://www.kompiajaib.com/
0 Response to "Menu Horizontal Dengan 2 Submenu Sederhana"
Posting Komentar