NiceSnippets.com
Shadow Effect Menu Design Using html,css
In this post you can show the shadow effect menu design with html and css. it's a website menu design templates. navigation bar design code. website navigation examples. menu design in css with source code. horizontal menu bar in html and css free download.
We allows to free snippets of creative navigation menu design , you can download full code of horizontal menu bar in html and css free download layout. Here in this post i will give you example of navigation menu design css snippet and you will get simple code of html, css and jquery. In website menu design templates snippet i give you three tab with html, css and js, you can easily get code of drop shadow for menu header in css layout.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</body>
</html>
.menu ul{
width: 60%;
margin: 0 auto;
padding-top: 50px;
}
.menu ul li{
width: 16%;
float: left;
list-style: none;
text-align: center;
margin: 0px 40px 0px 20px;
transform: rotate(-3deg);
}
.menu ul li a{
color: #000;
display: block;
font-size: 20px;
background: #fff;
padding: 5px 0px;
position: relative;
text-decoration: none;
border: 1px solid #8ED2C9;
}
.menu ul li a:before, .menu ul li a:after{
content: "";
z-index: -1;
top: 88%;
left: 0px;
width: 40%;
bottom: -6px;
position: absolute;
background: #8ED2C9;
transform: rotate(9deg);
-webkit-transform: rotate(9deg);
-moz-transform: rotate(9deg);
-o-transform: rotate(9deg);
-ms-transform: rotate(9deg);
border-bottom-right-radius: 5px;
}
.menu ul li a:after{
top: -6px;
left: 76px;
right: 10px;
bottom: 30px;
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
border-top-left-radius: 5px;
}
