Skip to main content

Responsive header menu bar using jquery with sub-menu for mobile and tables

Responsive menu jquery with submenu mobile and tables

Responsive header menu bar using jquery with sub-menu for mobile and tables


Download HTML File

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>

Labels:

Comments

Post a Comment

Popular posts from this blog

Create dynamic table using bootstrap (filter & find records)

Data Table With Bootstrap Download HTML file Into : In this table, you can short, filtering, find the record and many features you have been used but its very easy to use and configure. so don't get late lets introducing data table CSS:  Data table Stylesheet JS:   Data table js download this for your next project. or you can copy and paste bellow con on your project it's definitely working. Source : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Data Table</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> <script> $(document).ready(function(){       $('#myTable').DataTable(); }); </script> <link...
Post a Comment
Read more

How to Create a secure login panel with PHP & Mysql using parameters and session

Secure Login with PHP & Mysql Download project zip Requirement: you need an Apache and MySQL Server database on your device If your computer has xampp or wamp or mamp  or lamp that's great otherwise you need to install Apache and MySQL server Create a database login Run this query : CREATE TABLE admin ( id INT(6) AUTO_INCREMENT PRIMARY KEY, uname VARCHAR(30) NOT NULL, upass VARCHAR(30) NOT NULL ); INSERT INTO `admin` (`id`, `uname`, `upass`) VALUES (NULL, 'admin', 'admin1993'); That means you set your username =  admin and password = admin1993 Login Page: login.php <!doctype html> <html> <head> <meta charset="utf-8"> <title>Login Getway</title> <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" type="text/css"> <style> * { margin:0px; padding:0px; font-family:ar...
Post a Comment
Read more

How to access Xampp or Wamp with Skype in one client system.

Xampp or Wamp with Skype in one computer system Note: many people tell me their problem that they can't use xampp or wamp with skype in same computer.  Problem is the port problem. in computer and device application software run with the help of OS port. xampp and skype run as default same port (80). the solution is if I change the skype or xampp application the both software run smoothe and the same time. Now steps here. open skype > go to tools > then Option > goto advance > connection Click to save and now you can use both applications in side by side on one computer.
Post a Comment
Read more