Responsive menu jquery with submenu mobile and tables
Source :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive menu jquery with submenu mobile and tables </title>
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$("#mobileMen").click(function(){
$("#menu").fadeToggle(100)
})
});
</script>
<style>
*
{
margin:0px;
padding:0px;
text-decoration:none;
color:inherit;
font-family:arial;
transition-duration:.5s;
}
nav
{
background:#FF404E;
background: -webkit-linear-gradient(#FF404E, #FF616C);
background: -o-linear-gradient(#FF404E, #FF616C);
background: -moz-linear-gradient(#FF404E, #FF616C);
background: linear-gradient(#FF404E, #FF616C);
height:50px;
overflow:hidden;
}
.siteArea
{
max-width:1200px;
margin:auto;
display:block;
}
nav ul#menu
{
height:50px;
float:left;
}
nav ul#menu li
{
height:50px;
float:left;
color:#DAECF3;
list-style:none;
letter-spacing:1px;
}
nav ul#menu li:hover
{
background:#FF616C;
background: -webkit-linear-gradient(#FF616C, #FF404E); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FF616C, #FF404E); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FF616C, #FF404E); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FF616C, #FF404E); /* Standard syntax */
}
nav ul#menu li a
{
line-height:50px;
padding:0 20px;
display:block;
}
nav ul#menu ul
{
position:absolute;
top:50px;
width:200px;
overflow:hidden;
display:none;
background:#000000;
background: -webkit-linear-gradient(#FF616C, #FF404E); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FF616C, #FF404E); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FF616C, #FF404E); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FF616C, #FF404E); /* Standard syntax */
}
nav ul#menu li:hover> ul
{
display:block;
}
nav ul#menu ul li
{
float:left;
clear:both;
width:100%;
padding:0 10px;
line-height:40px;
}
#gnav
{
float:right;
}
#gnav li
{
float:left;
line-height:30px;
width:30px;
height:30px;
margin:10px;
background:#DAECF3;
text-align:center;
display:block;
color:#FF404E;
}
#mobileMen
{
height:50px;
width:50px;
text-align:center;
line-height:50px;
display:none;
float:left;
}
@media (max-width: 844px){
nav ul#menu
{
height:auto;
float:left;
position:absolute;
top:50px;
width:100%;
background:#012D41;
}
nav ul#menu ul
{
display:block;
position:relative;
clear:both;
top:0px;
background:none;
left:0px;
width:100%;
padding:0px;
}
nav ul#menu li
{
clear:both;
height:auto;
width:100%;
}
nav ul#menu li a, nav ul#menu li ul li a
{
border-bottom:1px solid #FFFFFF;
width:auto;
padding:0px 20px;
}
nav ul#menu li:hover
{
background:none;
}
nav ul#menu li ul li
{
height:50px;
width:100%;
margin-left:-10px;
border-bottom:1px solid #FFFFFF;
}
#mobileMen
{
height:50px;
width:50px;
text-align:center;
line-height:50px;
display:block;
background:#012D41;
color:#FFFFFF;
font-size:26px;
}
}
</style>
</head>
<body>
<nav>
<div class="siteArea">
<div id="mobileMen"><i class="fa fa-bars"></i></div>
<ul id="menu">
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">pro 1</a></li>
<li><a href="#">pro 2</a></li>
</ul>
</li>
<li><a href="#">Web design</a></li>
<li><a href="#">Development</a></li>
</ul>
<ul id="gnav">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
</ul>
</div>
</nav>
</body>
</html>
Comments
Post a Comment