This Vertical
Menu bar Create Using Simple HTML and
CSS. This menu looks simple and Professional.
Demo
Download
HTML Markup:
<div class='menu'>
<ul>
<li class='active'>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>HTML</a>
</li>
<li>
<a href='#'>CSS</a>
</li>
<li>
<a href='#'>jQuery</a>
</li>
<li class='last'>
<a href='#'>Contact</a>
</li>
</ul>
</div>CSS Code:
.menu, .menu ul, .menu ul li, .menu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menu {
width: 200px;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
}
.menu.align-right {
float: right;
}
.menu:after, .menu ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.menu ul li {
display: block;
z-index: 1;
background: #222222;
border-bottom: solid 1px #333;
}
.menu ul li::after {
content: "";
width: 100%;
height: 8px;
position: absolute;
border-top-left-radius: 50% 4px;
border-top-right-radius: 50% 4px;
background: #222222;
z-index: 2;
bottom: 10px;
}
.menu ul li a {
display: block;
padding: 10px 30px;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
z-index: 3;
}
.menu ul li a:hover, .menu ul li.active a {
color: #ffffff;
}
.menu ul li:hover, .menu ul li.active {
background: #16bd8c;
}
.menu ul li:hover::after,
.menu ul li.active::after {
background: #16bd8c;
}
No comments :
Post a Comment