search

Home >Web Front-end >JS Tutorial >jquery implements the slide-down menu effect of the secondary navigation that slides down_jquery

jquery implements the slide-down menu effect of the secondary navigation that slides down_jquery

WBOY
WBOYOriginal
2016-05-16 15:43:041436browse

The example in this article describes how jquery implements the slide-down menu effect of secondary navigation. Share it with everyone for your reference. The details are as follows:

This is a slide-down menu effect on a web page implemented by jQuery and JavaScript. The colored one is the first-level main menu. After clicking, it will expand and slide up to the second-level submenu. Click the main menu again, and it will Collapse submenu, in terms of the functions that the menu can display, is suitable for corporate website product classification, news article column navigation, etc. Currently, this menu supports two levels. If you are interested, you can expand more levels of menus by yourself.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-codes/

The specific code is as follows: 

<!DOCTYPE html>
<html>
<head>
<title>向下滑动展开的JS下滑菜单</title>
<style type="text/css">
ul#sidemenu, ul#sidemenu ul{list-style-type: none;margin: 0;padding: 0;width: 185px;}
ul#sidemenu a{display: block;text-decoration: none;}
ul#sidemenu li{margin: 5px auto;}
ul#sidemenu li a{background: #333;font-size: 12px;color: #fff;height: 28px;line-height: 28px;padding-left: 5px;}
ul#sidemenu li a: hover{background: #000;}
ul#sidemenu li ul li a{background: #ccc;color: #000;padding-left: 20px;}
ul#sidemenu li ul li a: hover{background: #aaa;border-left: 5px #000 solid;padding-left: 15px;}
</style>
</head>
<body>
<div class="leftbar">
 <ul id="sidemenu">
  <li><a href="#" >+ 网页菜单类素材一</a>       
   <ul>
     <li><a href="#">下滑菜单</a></li>
     <li><a href="#">折叠菜单</a></li>
     <li><a href="#">垂直菜单</a></li>
    </ul>
  </li>
  <li><a href="#" >+ 编程源码类资源</a>
   <ul>
    <li><a href="#">ASP源码</a></li>
    <li><a href="#">Delphi源码</a></li>
    <li><a href="#">vc++源码</a></li>
    <li><a href="#">VB源码</a></li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function initMenu() {
 $('#sidemenu ul').hide();
 $('#sidemenu ul:first').hide();
 $('#sidemenu li a').click(
 function() {
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
  return false;
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
  $('#sidemenu ul:visible').slideUp('normal');
  checkElement.slideDown('normal');
  return false;
  }
  }
 );
 }
$(document).ready(function() {initMenu();});
</script>
</body>
</html>

I hope this article will be helpful to everyone’s jquery programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Simple web page sliding tab menu effect code implemented in jsNext article：Simple web page sliding tab menu effect code implemented in js

Related articles

See more