how to create responsive menu using html5 and css3
In this example we have created responsive menu. First of all we have design menu using for HTML5 and CSS3. In this example we have used desktop browse and we have also use mobile tab browser.You can copy this code. you can run this code.
Menu.html
<!DOCTYPE type>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
<script>
function showMenu()
{
//document.write("fj");
if(document.getElementById("menu").style.display=="block")
{
document.getElementById("menu").style.display="none";
}
else
document.getElementById("menu").style.display="block";
}
</script>
</head>
<body>
<button id="hk" onclick="showMenu()"> Show Menu </button>
<nav class="nav">
<ul class="nav-list" id="menu">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li id="service" class="nav-item"><a href="#">Services</a>
<ul id="service_items">
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
</ul>
</li>
<li class="nav-item"><a href="#">Portfolio</a>
<ul id="service_items">
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
</ul>
</li>
<li class="nav-item"><a href="#">Testimonials</a>
<ul id="service_items">
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
<li><a href="#">Service A</a></li>
</ul>
</li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
|
style.css
@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 820px)
{
ul
{
display:none;
}
ul li ul
{
list-style-type: none;
}
ul
{
list-style-type:none;
}
ul{display:none;}
ul li:hover ul
{
display:block;
}
.nav-item a {
display:block;
padding:15px 20px;
color:#FFF;
background:rgba(23,54,34,0.4);
}
.nav-item:first-child a {
}
.nav-item:last-child a {
border-radius:5px;
}
.nav-item a:hover {
background:#2C3E50;
}
ul li
{
margin:1px;
width:180px;
border-radius:5px;
}
ul li ul{margin-left:-40px; }
ul li ul li {
display:block;
padding:5px 5px;
color:#FFF;
background:#666666;
border:1px solid black;
}
}
/* Desktop CSS */
@media screen and (min-width: 821px)
{
ul li ul
{
list-style-type: none;
display:none;
}
ul li:hover ul
{
display:block;
}
#hk
{
display:none;
}
.nav {
position:relative;
display:inline-block;
font-size:14px;
font-weight:900;
}
.nav-list {
}
.nav-item {
float:left;
display:inline;
zoom:1;
}
.nav-item a {
display:block;
padding:15px 20px;
color:#FFF;
background:#34495E;
}
.nav-item:first-child a {
border-radius:5px 0 0 5px;
}
.nav-item:last-child a {
border-radius:0 5px 5px 0;
}
.nav-item a:hover {
background:#2C3E50;
}
ul li
{
width: 140px;
}
ul li ul{margin-left:-40px; }
ul li ul
{
width: 90px;
}
ul li ul li a {
display:block;
padding:5px 5px;
color:#FFF;
text-decoration: none;
background:red;
border:1px solid black;
}
ul li ul li a:hover{
background:blue;
}
}
|
Desktop Screen output:
Mobile Screen output:
