Menu or navigation of a blog is part which will not be discharged. The menu may be a navigation to permit guests to go looking for articles by class are presented. There doesn't appear to run out of debate with this menu with a good vary of modifications to zoom increase magnificence a diary.
And this point i'll share a menu that I say is sort of easy as a result of it solely uses pure CSS code or CSS.
The horizontal menu has 2 sub menus creating it potential to accommodate several classes in it. as a result of this menu victimization pure CSS, then this can not be onerous loading diary. as was common i exploit a bright color background you'll see a demo at the link below.
And this point i'll share a menu that I say is sort of easy as a result of it solely uses pure CSS code or CSS.
The horizontal menu has 2 sub menus creating it potential to accommodate several classes in it. as a result of this menu victimization pure CSS, then this can not be onerous loading diary. as was common i exploit a bright color background you'll see a demo at the link below.
Css Code For Menu:-
#menutopmbs ul,
#menutopmbs li,
#menutopmbs span,
#menutopmbs a {
margin: 0;
padding: 0;
position: relative;
}
#menutopmbs {
height: 49px;
background: #D5D5D5;
border-bottom: 4px solid #59c5ff;
width: auto;
}
#menutopmbs:after,
#menutopmbs ul:after {
content: '';
display: block;
clear: both;
}
#menutopmbs 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;
}
#menutopmbs ul {
list-style: none;
}
#menutopmbs > ul,#menutopmbs > ul > li {
float: left;
}
#menutopmbs > ul > li > a {
color: #000;
font-size: 12px;
}
#menutopmbs > 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;
}
#menutopmbs > 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;
}
#menutopmbs > ul > li.active > a,#menutopmbs > ul > li:hover > a {
background: #ececec;
}
#menutopmbs .menu-sub {
z-index: 1;
}
#menutopmbs .menu-sub:hover > ul {
display: block;
}
#menutopmbs .menu-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#menutopmbs .menu-sub ul li {
margin-bottom: 0px;
}
#menutopmbs .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;
}
#menutopmbs .menu-sub ul li:hover a {
background: #26b3ff;
}
#menutopmbs .menu-sub .menu-sub:hover > ul {
display: block;
}
#menutopmbs .menu-sub .menu-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#menutopmbs .menu-sub .menu-sub ul li a {
background: #26b3ff;
border-bottom: 1px solid #8cd7ff;
}
#menutopmbs .menu-sub .menu-sub ul li a:hover {
background: #0daaff;
}
HTML CODE FOR MENU
<div id='menutopmbs'>
<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>
can u plx tell me how can i add this menu ?
ReplyDeleteBro Just Add The CSS code Above The ]]> Tag And Then Add The HTML code Wherever U want To Show Your Menu
Delete