3D Horizontal Tab Navigation Menu with CSS3 Transitions and Transformations
HTML Code :--
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/menubars.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MENUBAR</title>
</head>
<body style="height: 100%;margin: 0;">
<div class="menu" >
<nav>
<ul class="menubar">
<li class="list" id="one"><a href="index.php" accesskey=1>Home</a></li>
<li class="list" id="two"><a href=new-xyz-p.html accesskey=2> What's</a>
<li class="list" id="three"><a href=about-xyz-corp.html accesskey=3>Tutorial</a>
<li class="list" id="four"><a href=contact-xyz-corp.html accesskey=4>Projects </a>
<li class="list" id="five"><a href=about-xyz-corp.html accesskey=5>AboutUs</a>
<li class="list" id="six"><a href=contact-xyz-corp.html accesskey=6>Contact Us / Help</a>
</ul>
</nav>
<div class="bar">
</div>
</div>
</body>
</html>
CSS Code :--
.menu
{
width: 90%;
height: 91px;
background-color:transparent;
margin-top: 125px;
margin-right: 10%;
position: absolute
}
.menubar li a
{
text-decoration: none;
color: #fff;
padding: 0.8rem 1.2rem 2rem 1.2rem;
border: 1px solid cyan;
border-radius: 5px 5px 0 0;
background-color: darkcyan;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
letter-spacing: 0.15rem;
text-shadow: 0 1px 0 #000;
}
.menubar li a:hover
{
background-color: aqua;
border: 1px solid darkcyan;
color: darkorchid;
transition:all 0.5s
}
.menubar
{
background: transparent;
margin-left: 180px;
width: 800px;
height: 54px;
padding-top: 20px;
position: absolute
}
.list
{
display: inline;
font-family: Futura, Arial, sans-serif;
text-transform: capitalize;
margin-left: -.5rem;
}
.list a
{
position: relative;
top: 0;
transition: 0.2s all linear;
}
.list a:hover, .list a:focus
{
top: -0.6rem;
}
.bar
{
width: 768px;
height: 25px;
background: linear-gradient(to bottom, #00cccc,#003333);
margin-left: 192px;
margin-top: 70px;
position: absolute
}
.bar:after,.bar:before
{
content: '';
border-bottom: 20px solid #00cccc;
position: absolute;
bottom: 25px;
}
.bar:after
{
border-right: 20px solid transparent;
right: 0;
}
.bar:before
{
border-left: 20px solid transparent;
left: 0;
}
No comments:
Post a Comment