Developers are always think javascript in the mind when they think about simple menus. But ultimately, simple single level menus can be achieved by CSS itself. This styles can be extendable to second level menus also.
Here is how we can get this done.
you can change the CSS upto your design. It is absolutely GPL :)
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Menu Example</title>
<style>
/*Reset CSS*/
* { margin:0;padding:0; outline:none;}
ul { list-style:none;}
a{ text-decoration:none;}
/*Reset CSS*/
header { margin:20px auto; width:50%;}
header .topnav ul li {float: left; margin-left:10px; font-size: 14px; text-transform: uppercase; }
header .topnav ul li a{padding: 5px; border-radius: 5px 5px 0 0; transition: none; -webkit-transition:none;}
header .topnav li ul{ display: none; position: absolute; background: #002540; z-index: 1000; margin: 0; min-width: 150px; padding: 5px 0px; border-radius: 0 5px 5px 5px; }
header .topnav li.expanded:hover a{background: #002540; color: #fff; transition: none; -webkit-transition:none;}
header .topnav li:hover ul{display: block; }
header .topnav li ul li{padding: 0 10px; margin-left: 0;}
header .topnav li ul li a{text-align: left; text-transform: uppercase; line-height: 25px; height: 25px; font-size: 13px; background: none; border: none; padding: 0; color: #fff; display: block; border-radius: 0; background: none !important;}
header .topnav li ul li:hover{background: #0099DC; text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);}
header .topnav li ul li{display: block; float: none; margin-bottom: 5px;}
</style>
</head>
<body>
<header>
<div class="topnav">
<ul>
<li><a href="#">Home</a></li>
<li class="expanded"><a href="#" class="active">About</a>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#" >Events</a></li>
<li><a href="#">News</a></li>
</ul>
</li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
</body>
</html>
Thanks
Enjoy the Menu.
Here is how we can get this done.
you can change the CSS upto your design. It is absolutely GPL :)
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Menu Example</title>
<style>
/*Reset CSS*/
* { margin:0;padding:0; outline:none;}
ul { list-style:none;}
a{ text-decoration:none;}
/*Reset CSS*/
header { margin:20px auto; width:50%;}
header .topnav ul li {float: left; margin-left:10px; font-size: 14px; text-transform: uppercase; }
header .topnav ul li a{padding: 5px; border-radius: 5px 5px 0 0; transition: none; -webkit-transition:none;}
header .topnav li ul{ display: none; position: absolute; background: #002540; z-index: 1000; margin: 0; min-width: 150px; padding: 5px 0px; border-radius: 0 5px 5px 5px; }
header .topnav li.expanded:hover a{background: #002540; color: #fff; transition: none; -webkit-transition:none;}
header .topnav li:hover ul{display: block; }
header .topnav li ul li{padding: 0 10px; margin-left: 0;}
header .topnav li ul li a{text-align: left; text-transform: uppercase; line-height: 25px; height: 25px; font-size: 13px; background: none; border: none; padding: 0; color: #fff; display: block; border-radius: 0; background: none !important;}
header .topnav li ul li:hover{background: #0099DC; text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);}
header .topnav li ul li{display: block; float: none; margin-bottom: 5px;}
</style>
</head>
<body>
<header>
<div class="topnav">
<ul>
<li><a href="#">Home</a></li>
<li class="expanded"><a href="#" class="active">About</a>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#" >Events</a></li>
<li><a href="#">News</a></li>
</ul>
</li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
</body>
</html>
Thanks
Enjoy the Menu.
No comments:
Post a Comment