Jquery Navigation Menu: Css Mega Drop down Menu

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Mega Drop Down Menu</title>

</head>
<body>
<ul id="menu">
  <li><a href="#" class="drop">Home</a>
    
    <div class="dropdown_2columns">
      
      <div class="col_2">
        <h2>HTML5</h2>
      </div>
      <div class="col_2">
        <p><a href="#">Html5</a></p>
        <p><a href="#">Css3</a></p>
      </div>
      <div class="col_2">
        <h2>Web design</h2>
      </div>
      <div class="col_1"> <img src="tree.png" width="125" height="85" alt="" /> </div>
      <div class="col_1">
        <p><a href="#">Photoshop</a></p>
        <p><a href="#">Corel draw</a></p>
      </div>
    </div>
    
  </li>
  
  <li><a href="#" class="drop">About</a>
    
    <div class="dropdown_5columns">
      
      <div class="col_5">
        <h2>We are doing Web designing and development.</h2>
      </div>
      <div class="col_1">
        <p class="black_box">We have developed many websites like e-commerace,
          shopping cart,CRM projects,and designed many company logo</p>
      </div>
      <div class="col_1">
        <p>
        <p><a href="#">Project1</a></p>
        <p><a href="#">Project2</a></p>
        <p><a href="#">Project3</a></p>
        <p><a href="#">Project4</a></p>
        </p>
      </div>
      <div class="col_1">
        <p class="italic">
        <p><a href="#">Project1</a></p>
        <p><a href="#">Project2</a></p>
        <p><a href="#">Project3</a></p>
        <p><a href="#">Project4</a></p>
        </p>
      </div>
      <div class="col_1">
        <p>
        <p><a href="#">Project1</a></p>
        <p><a href="#">Project2</a></p>
        <p><a href="#">Project3</a></p>
        <p><a href="#">Project4</a></p>
        </p>
      </div>
      <div class="col_1">
        <p class="strong">
        <p><a href="#">Project1</a></p>
        <p><a href="#">Project2</a></p>
        <p><a href="#">Project3</a></p>
        <p><a href="#">Project4</a></p>
        </p>
      </div>
      <div class="col_5">
        <h2>Our Portfolio</h2>
      </div>
      <div class="col_3"> <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" />
        <p>This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project<a href="#">Read more...</a></p>
        <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" />
        <p>This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project<a href="#">Read more...</a></p>
      </div>
      <div class="col_2">
        <p class="black_box">This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project<a href="#">Read more...</a></p>
        </p>
      </div>
    </div>
    
  </li>
  
  <li><a href="#" class="drop">Clients</a>
    
    <div class="dropdown_4columns">
      
      <div class="col_4">
        <h2>Our clients</h2>
      </div>
      <div class="col_1">
        <h3>Clients</h3>
        <ul>
          <li><a href="#">Client1</a></li>
          <li><a href="#">Client2</a></li>
          <li><a href="#">Client3</a></li>
          <li><a href="#">Client4</a></li>
          <li><a href="#">Client5</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Clients</h3>
        <ul>
          <li><a href="#">Client1</a></li>
          <li><a href="#">Client2</a></li>
          <li><a href="#">Client3</a></li>
          <li><a href="#">Client4</a></li>
          <li><a href="#">Client5</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Clients</h3>
        <ul>
          <li><a href="#">Client1</a></li>
          <li><a href="#">Client2</a></li>
          <li><a href="#">Client3</a></li>
          <li><a href="#">Client4</a></li>
          <li><a href="#">Client5</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Clients</h3>
        <ul>
          <li><a href="#">Client1</a></li>
          <li><a href="#">Client2</a></li>
          <li><a href="#">Client3</a></li>
          <li><a href="#">Client4</a></li>
          <li><a href="#">Client5</a></li>
        </ul>
      </div>
    </div>
    
  </li>
  
  <li class="menu_right"><a href="#" class="drop">Products</a>
    <div class="dropdown_1column align_right">
      <div class="col_1">
        <ul class="simple">
          <li><a href="#">Product1</a></li>
          <li><a href="#">Product2</a></li>
          <li><a href="#">Product3</a></li>
          <li><a href="#">Product4</a></li>
          <li><a href="#">Product5</a></li>
          <li><a href="#">Product1</a></li>
          <li><a href="#">Product2</a></li>
          <li><a href="#">Product3</a></li>
          <li><a href="#">Product4</a></li>
          <li><a href="#">Product5</a></li>
        </ul>
      </div>
    </div>
  </li>
  <li class="menu_right"><a href="#" class="drop">Contacts</a>
    
    <div class="dropdown_3columns align_right">
      
      <div class="col_3">
        <h2>Link with us</h2>
      </div>
      <div class="col_1">
        <ul class="greybox">
          <li><a href="#">Fb</a></li>
          <li><a href="#">Lin</a></li>
          <li><a href="#">Tw</a></li>
          <li><a href="#">Flicker</a></li>
          <li><a href="#">Yahoo!</a></li>
        </ul>
      </div>
      <div class="col_1">
        <ul class="greybox">
          <li><a href="#">G+</a></li>
          <li><a href="#">FB</a></li>
          <li><a href="#">Wordpress</a></li>
          <li><a href="#">Youtube</a></li>
          <li><a href="#">Dribble</a></li>
        </ul>
      </div>
      <div class="col_1">
        <ul class="greybox">
          <li><a href="#">Design</a></li>
          <li><a href="#">Logo</a></li>
          <li><a href="#">Flash</a></li>
          <li><a href="#">Illustration</a></li>
          <li><a href="#">More...</a></li>
        </ul>
      </div>
      <div class="col_3">
        <h2>Private Policy</h2>
      </div>
      <div class="col_3"> <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" /> <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" /> <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" /> <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" /> </div>
    </div>
    
  </li>
  
</ul>
</body>
</html>

Create style.css

@charset "utf-8";
body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}
/* Navigation Bar */
 
#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;
 /* Rounded Corners */
     
    -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 /* Background color and gradients */
     
    background: #014464;
 background: -moz-linear-gradient(center top, #333333, #666666);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#666666));
 /* Borders */
     
    border: 1px solid #002232;
 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}
#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;
 /* Background color and gradients */
     
    background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
 /* Rounded corners */
     
    -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}
#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("img/drop.png") no-repeat right 7px;
}
/* Drop Down */
 
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;
 /* Gradient background */
    background:#F4F4F4;
 background: -moz-linear-gradient(top, #669900, #669933);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#669900), to(#669933));
 /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {
 width: 140px;
}
.dropdown_2columns {
 width: 280px;
}
.dropdown_3columns {
 width: 420px;
}
.dropdown_4columns {
 width: 560px;
}
.dropdown_5columns {
 width: 700px;
}
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns {
 left:-1px;
 top:auto;
}
/* Columns */
 
.col_1, .col_2, .col_3, .col_4, .col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {
 width:130px;
}
.col_2 {
 width:270px;
}
.col_3 {
 width:410px;
}
.col_4 {
 width:550px;
}
.col_5 {
 width:690px;
}
/* Right alignment */
 
#menu .menu_right {
 float:right;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
 -webkit-border-radius: 5px 0px 5px 5px;
 border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}
/* Drop Down Content Stylings */
 
#menu p, #menu h2, #menu h3, #menu ul li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}
#menu li:hover div a {
 font-size:12px;
 color:#3333FF;
}
#menu li:hover div a:hover {
 color:#003333;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;
 /* Rounded Corners */
    -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 /* Shadow */
    -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;
 /* Rounded Corners */
    -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}

Thursday, 16 July 2015

Css Mega Drop down Menu

Create index.html

Create style.css

No comments:

Post a Comment