Home >Web Front-end >JS Tutorial >jQuery implements secondary drop-down menu effect_jquery

jQuery implements secondary drop-down menu effect_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 15:21:531429browse

Everyone knows that jQuery is a framework that encapsulates JS to make it more convenient to use. The previous two blog posts were implemented using CSS styles and JS respectively, so this article will use jQuery to implement the secondary drop-down menu.
The knowledge required to implement using JQuery is:

1) Use $(function(){...}) to get the HTML element you want to act on.
2) Find child elements by using the children() method.
3) Display HTML elements by using the show() method.
4) Hide HTML elements by using the hide() method.
5) jQuery library reference method:

The first method: Download the jQuery library to your computer and then quote it. I downloaded the jquery-1.7.1.min.js version.
For example:
The second method: Directly reference the jQuery library file on the online server, such as Google server jQuery library, Baidu server jQuery library, etc.
Quoting the jQuery library file on Baidu server
Let’s take a look at the production process:
1. Call the jQuery library: write code and reference the jQuery library. Since Google has withdrawn from mainland China, it is recommended to use the jQuery library of Baidu server. Note: Baidu server’s jQuery library address: http://libs.baidu.com/jquery/1.9.0/jquery.js 2. Write a function to display the submenu, use $, and obtain the first-level menu li through the class name, use children() to find the child element ul of li, and use the show() method to display the second-level menu.
3. Write a hidden submenu function, use $, and get the first-level menu li through the class name, use children() to find the child element ul of li, and use the hide() method to hide the second-level menu.
4. Do browser compatibility testing, at least five browsers. IE7,8,9, Firefox, Google, 2345 browser, etc.

Let’s take a look at the renderings first:

Finally, let’s take a look at the code, which is not much different from the previous one:
HTML code:

CSS style sheet external style.css file code:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>下拉菜单</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<!--引用百度服务器的jQuery库--> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript" src="script.js"></script> 
</head> 
 
<body> 
<div id="nav" class="nav"> 
  <ul> 
    <li><a href="#">网站首页</a></li> 
   <li class="navmenu"><a href="#">课程大厅</a> 
    <ul> 
     <li><a href="#">JavaScript</a></li> 
     <li><a href="#">jQuery</a></li> 
     <li><a href="#">Ajax</a></li> 
    </ul> 
   </li> 
   <li class="navmenu"><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></li> 
   <li><a href="#">关于我们</a></li> 
  </ul> 
</div> 
</body> 
</html>

JS script external script, js file code:

/*CSS全局设置*/ 
*{ 
 margin:0; 
 padding:0; 
} 
.nav{ 
 background-color:#EEEEEE; 
 height:40px; 
 width:450px; 
 margin:0 auto; 
} 
ul{ 
 list-style:none; 
} 
ul li{ 
 float:left; 
 line-height:40px; 
 text-align:center; 
} 
a{ 
 text-decoration:none; 
 color:#000000; 
 display:block; 
 width:90px; 
 height:40px; 
} 
a:hover{ 
 background-color:#666666; 
 color:#FFFFFF; 
} 
ul li ul li{ 
 float:none; 
 background-color:#EEEEEE; 
} 
ul li ul{ 
 display:none; 
} 
/*为了兼容IE7写的CSS样式，但是必须写在a:hover前面*/ 
ul li ul li a:link,ul li ul li a:visited{ 
 background-color:#EEEEEE; 
} 
ul li ul li a:hover{ 
 background-color:#009933; 
}

I hope this article will be helpful to everyone learning jquery programming.

$(function(){ 
  $(".navmenu").mouseover(function(){ 
   $(this).children("ul").show();  
  }) 
  
  $(".navmenu").mouseout(function(){ 
   $(this).children("ul").hide(); 
  }) 
})

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：jQuery implements simple like effect_jqueryNext article：jQuery implements simple like effect_jquery

See more

jQuery implements secondary drop-down menu effect_jquery

Related articles