jQuery implements a secondary menu effect example that slides down

Home>2020-03-10 09:07
jQuery implements a secondary menu effect example that slides down

Here, use jquery to implement the second-level menu code that slides down.Slide out of the menu,Mouse over any item in the main menu,The secondary submenu will slide down.Of course this code is just a demonstration,Some menus are made casually,after testing,Compatible with ie8, Firefox and chrome browsers,If you are interested, you can try it yourself.
The screenshot of the running effect is as follows:
The online demo address is as follows:
The specific code is as follows:
<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery slow pop-up drop-down navigation</title>
<style>
* {margin:0;padding:0;list-style-type:none;}
a, img {border:0;text-decoration:none;}
body {font:12px/180%arial, helvetica, sans-serif, "New Song Style";background-color:#e8e8e8;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-table}
* html .clearfix {height:1%}
.clearfix {display:block}
* + html .clearfix {min-height:1%}
/* nav_menu * /
.nav_menu {height:42px;background-color:#333333;}
.nav {width:1006px;height:41px;position:relative;margin:0 auto;}
.nav .list li {float:left;}
.nav .list a {float:left;display:block;width:125px;height:42px;text-align:center;font:bold 13px/36px "Microsoft Yahei";color:#fff;}
.nav .list a:hover {color:#ffa304;}
.nav .list a:hover, .nav .list .now {color:#f00;background:#fff;}
.nav .box {position:absolute;left:-5px;top:42px;width:1006px;background:#fff;overflow:hidden;height:0;filter:alpha (opacity=0);opacity:0;border- bottom:2px solid #074c52;}
.nav .cont {position:relative;padding:25px 0 0px 24px;}
/* sublist * /
.sublist li {float:left;width:168px;padding-right:24px;padding-bottom:24px;}
.sublist li h3.mcate-item-hd {font-family:"Microsoft Yahei";padding-left:2px;font-size:14px;height:26px;line-height:26px;border-bottom:1px dashed #666666;}
.sublist li p.mcate-item-bd {padding-left:2px;}
.sublist li p.mcate-item-bd a {height:26px;line-height:26px;margin-right:5px;font-size:12px;color:#666666;text-decoration:none;display:inline-block ;}
.sublist li p.mcate-item-bd a:hover {color:#6c5143;text-decoration:underline;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div>
 <div>
  <div>
   <ul>
    <li><a href="#">Company Profile</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Marketing Network</a></li>
    <li><a href="#">Lighting knowledge</a></li>
    <li><a href="#">Human Resources</a></li>
    <li><a href="#">Customer Center</a></li>
    <li><a href="#">Contact us</a></li>
   </ul>
  </div>
  <div>
   <div>
    <ul>
     <li>
      <h3><span>apparel underwear</span>
      <p>
       <a href="#">Ladies</a>
       <a href="#">Men</a>
       <a href="#">Underwear</a>
       <a href="#">Home service</a>
       <a href="#">Accessories</a>
       <a href="#">Down</a>
       <a href="#">Wool coat</a>
       <a href="#">sweater</a>
      </p>
     </li>
     <li>
      <h3><span>shoes&bags</span></h3>
      <p>
       <a href="#">Women's shoes</a>
       <a href="#">Men's shoes</a>
       <a href="#">luggage</a>
       <a href="#">Ladies bag</a>
       <a href="#">Men's bag</a>
       <a href="#">Suitcase</a>
       <a href="#">Wallet</a>
      </p>
     </li>
     <li>
      <h3><span>Jewellery, watches</span></h3>
      <p>
       <a href="#">Accessories</a>
       <a href="#">necklace</a>
       <a href="#">Jewelry</a>
       <a href="#">Diamond</a>
       <a href="#"&watch;</a>
      </p>
     </li>
     <li>
      <h3><span>Cosmetics</span></h3>
      <p>
       <a href="#">Skincare</a>
       <a href="#">Makeup</a>
       <a href="#">Perfume</a>
       <a href="#">Men</a>
       <a href="#">Essential oil</a>
       <a href="#">Wig</a>
       <a href="#">Body</a>
       <a href="#">Trial Service</a>
      </p>
     </li>
     <li>
      <h3><span>sports outdoor</span></h3>
      <p>
       <a href="#">Sneakers</a>
       <a href="#">Sportswear</a>
       <a href="#">Sports</a>
       <a href="#">Outdoor</a>
      </p>
     </li>
     <li>
      <h3><span>Mobile Digital</span></h3>
      <p>
       <a href="#">Mobile</a>
       <a href="#">Notebook</a>
       <a href="#">Camera</a>
       <a href="#">Tablet</a>
       <a href="#">Accessories</a>
       <a href="#">Computer Hardware</a>
      </p>
     </li>
     <li>
      <h3><span>Home appliances</span></h3>
      <p>
       <a href="#">Everyone</a>
       <a href="#">AV appliances</a>
       <a href="#">Living appliances</a>
       <a href="#">Kitchen appliances</a>
       <a href="#">Health Care</a>
       <a href="#">Shaver</a>
      </p>
     </li>
     <li>
      <h3><span>furniture building materials</span></h3>
      <p>
       <a href="#">Furniture</a>
       <a href="#">Bathroom</a>
       <a href="#">Floor</a>
       <a href="#">Lighting</a>
       <a href="#">Hardware</a>
       <a href="#">Switch</a>
       <a href="#">Decoration Design</a>
      </p>
     </li>
     <li>
      <h3><span>Home Textile&Home</span></h3>
      <p>
       <a href="#">Home Textile</a>
       <a href="#">Sanding Kit</a>
       <a href="#">Down duvet</a>
       <a href="#">Pillow</a>
       <a href="#">Soft decoration</a>
       <a href="#">Home</a>
       <a href="#">Kitchen</a>
      </p>
     </li>
     <li>
      <h3><span>food</span></h3>
      <p>
       <a href="#">Snacks</a>
       <a href="#">import</a>
       <a href="#">Tea</a>
       <a href="#">Chongyin</a>
       <a href="#">Drinks</a>
       <a href="#">Grain&Oil</a>
       <a href="#">Dry goods</a>
       <a href="#">Fresh</a>
      </p>
     </li>
     <li>
      <h3><span>Medical&Healthcare</span></h3>
      <p>
       <a href="#">Health</a>
       <a href="#">Nourishing</a>
       <a href="#">Protein powder</a>
       <a href="#">Ejiao</a>
       <a href="#">Drugs</a>
       <a href="#">Blood pressure meter</a>
       <a href="#">Family Planning</a>
       <a href="#">Medical examination</a>
      </p>
     </li>
     <li>
      <h3><span>Baby&Baby Supplies</span></h3>
      <p>
       <a href="#">Toys</a>
       <a href="#">Baby Food</a>
       <a href="#">Supplies</a>
       <a href="#">Kids</a>
       <a href="#">Pregnancy</a>
      </p>
     </li>
     <li>
      <h3><span>Automotive accessories</span></h3>
      <p>
       <a href="#">New car</a>
       <a href="#">seat cushion</a>
       <a href="#">Footpad</a>
       <a href="#">gps</a>
       <a href="#">jersey</a>
       <a href="#">Car Washer</a>
       <a href="#">Water gun</a>
      </p>
     </li>
     <li>
      <h3><span>Culture Play</span></h3>
      <p>
       <a href="#">Electronic Voucher</a>
       <a href="#">Books</a>
       <a href="#">Musical instrument</a>
       <a href="#">Travel</a>
       <a href="#">Flowers</a>
      </p>
     </li>
    </ul>
   </div>
   <div>
    <ul>
     <li>
      <h3><span>apparel underwear</span></h3>
      <p>
       <a href="#">Ladies</a>
       <a href="#">Men</a>
       <a href="#">Underwear</a>
       <a href="#">Home service</a>
       <a href="#">Accessories</a>
       <a href="#">Down</a>
       <a href="#">Wool coat</a>
       <a href="#">sweater</a>
      </p>
     </li>
     <li>
      <h3><span>shoes&bags</span></h3>
      <p>
       <a href="#">Women's shoes</a>
       <a href="#">Men's shoes</a>
       <a href="#">luggage</a>
       <a href="#">Ladies bag</a>
       <a href="#">Men's bag</a>
       <a href="#">Suitcase</a>
       <a href="#">Wallet</a>
      </p>
     </li>
     <li>
      <h3><span>Jewellery, watches</span></h3>
      <p>
       <a href="#">Accessories</a>
       <a href="#">necklace</a>
       <a href="#">Jewelry</a>
       <a href="#">Diamond</a>
       <a href="#"&watch;</a>
      </p>
     </li>
     <li>
      <h3><span>Cosmetics</span></h3>
      <p>
       <a href="#">Skincare</a>
       <a href="#">Makeup</a>
       <a href="#">Perfume</a>
       <a href="#">Men</a>
       <a href="#">Essential oil</a>
       <a href="#">Wig</a>
       <a href="#">Body</a>
       <a href="#">Trial Service</a>
      </p>
     </li>
     <li>
      <h3><span>sports outdoor</span></h3>
      <p>
       <a href="#">Sneakers</a>
       <a href="#">Sportswear</a>
       <a href="#">Sports</a>
       <a href="#">Outdoor</a>
      </p>
     </li>
     <li>
      <h3><span>Mobile Digital</span></h3>
      <p>
       <a href="#">Mobile</a>
       <a href="#">Notebook</a>
       <a href="#">Camera</a>
       <a href="#">Tablet</a>
       <a href="#">Accessories</a>
       <a href="#">Computer Hardware</a>
      </p>
     </li>
     <li>
      <h3><span>Home appliances</span></h3>
      <p>
       <a href="#">Everyone</a>
       <a href="#">AV appliances</a>
       <a href="#">Living appliances</a>
       <a href="#">Kitchen appliances</a>
       <a href="#">Health Care</a>
       <a href="#">Shaver</a>
      </p>
     </li>
     <li>
      <h3><span>furniture building materials</span></h3>
      <p>
       <a href="#">Furniture</a>
       <a href="#">Bathroom</a>
       <a href="#">Floor</a>
       <a href="#">Lighting</a>
       <a href="#">Hardware</a>
       <a href="#">Switch</a>
       <a href="#">Decoration Design</a>
      </p>
     </li>
     <li>
      <h3><span>Home Textile&Home</span>
      <p>
       <a href="#">Home Textile</a>
       <a href="#">Sanding Kit</a>
       <a href="#">Down duvet</a>
       <a href="#">Pillow</a>
       <a href="#">Soft decoration</a>
       <a href="#">Home</a>
       <a href="#">Kitchen</a>
      </p>
     </li>
     <li>
      <h3><span>food</span></h3>
      <p>
       <a href="#">Snacks</a>
       <a href="#">import</a>
       <a href="#">Tea</a>
       <a href="#">Chongyin</a>
       <a href="#">Drinks</a>
       <a href="#">Grain&Oil</a>
       <a href="#">Dry goods</a>
       <a href="#">Fresh</a>
      </p>
     </li>
    </ul>
   </div>
   <div>
    <ul>
     <li>
      <h3><span>apparel underwear</span></h3>
      <p>
       <a href="#">Ladies</a>
       <a href="#">Men</a>
       <a href="#">Underwear</a>
       <a href="#">Home service</a>
       <a href="#">Accessories</a>
       <a href="#">Down</a>
       <a href="#">Wool coat</a>
       <a href="#">sweater</a>
      </p>
     </li>
     <li>
      <h3><span>shoes&bags</span></h3>
      <p>
       <a href="#">Women's shoes</a>
       <a href="#">Men's shoes</a>
       <a href="#">luggage</a>
       <a href="#">Ladies bag</a>
       <a href="#">Men's bag</a>
       <a href="#">Suitcase</a>
       <a href="#">Wallet</a>
      </p>
     </li>
     <li>
      <h3><span>Jewellery, watches</span></h3>
      <p>
       <a href="#">Accessories</a>
       <a href="#">necklace</a>
       <a href="#">Jewelry</a>
       <a href="#">Diamond</a>
       <a href="#"&watch;</a>
      </p>
     </li>
     <li>
      <h3><span>Cosmetics</span></h3>
      <p>
       <a href="#">Skincare</a>
       <a href="#">Makeup</a>
       <a href="#">Perfume</a>
       <a href="#">Men</a>
       <a href="#">Essential oil</a>
       <a href="#">Wig</a>
       <a href="#">Body</a>
       <a href="#">Trial Service</a>
      </p>
     </li>
     <li>
      <h3><span>sports outdoor</span></h3>
      <p>
       <a href="#">Sneakers</a>
       <a href="#">Sportswear</a>
       <a href="#">Sports</a>
       <a href="#">Outdoor</a>
      </p>
     </li>
    </ul>
   </div>
   <div>3<br />3</div>
   <div>4<br />3<br />4</div>
   <div>5</div>
   <div>6<br />3<br />3</div>
   <div>7<br />3<br />3<br />3</div>
  </div>
 </div>
</div>
<script type="text/javascript">
(function () {
 var time=null;
 var list=$("#navlist");
 var box=$("#navbox");
 var lista=list.find ("a");
 for (var i=0, j=lista.length;i<j;i ++) {
  if (lista [i] .classname == "now") {
   var olda=i;
  }
 }
 var box_show=function (hei) {
  box.stop (). animate ({
   height:hei,   opacity:1
  }, 400);
 }
 var box_hide=function () {
  box.stop (). animate ({
   height:0,   opacity:0
  }, 400);
 }
 lista.hover (function () {
  lista.removeclass ("now");
  $(this) .addclass ("now");
  cleartimeout (time);
  var index=list.find ("a"). index ($(this));
  box.find (". cont"). hide (). eq (index) .show ();
  var _height=box.find (". cont"). eq (index) .height () + 54;
  box_show (_height)
 }, function () {
  time=settimeout (function () {
   box.find (". cont"). hide ();
   box_hide ();
  }, 50);
  lista.removeclass ("now");
  lista.eq (olda) .addclass ("now");
 });
 box.find (". cont"). hover (function () {
  var _index=box.find (". cont"). index ($(this));
  lista.removeclass ("now");
  lista.eq (_index) .addclass ("now");
  cleartimeout (time);
  $(this) .show ();
  var _height=$(this) .height () + 54;
  box_show (_height);
 }, function () {
  time=settimeout (function () {
   $(this) .hide ();
   box_hide ();
  }, 50);
  lista.removeclass ("now");
  lista.eq (olda) .addclass ("now");
 });
}) ();
</script>
</body>
</html>
javascript
Previous jQuery implementation of vertical translucent accordion special effects code sharing
Next JS implement thermometer time style code sharing
Trends
TutorialFor

jQuery implements a secondary menu effect example that slides down

Related articles
