Home > Article > Web Front-end > JS implements ultra-simplified responsive mouse display secondary menu code_javascript skills

JS implements ultra-simplified responsive mouse display secondary menu code_javascript skills

WBOYOriginal: 2016-05-16 15:39:441327browse

The example in this article describes the JS implementation of ultra-simplified responsive mouse display secondary menu code. Share it with everyone for your reference. The details are as follows:

This is a simplified version of the secondary navigation menu. It responds to mouse movements and displays the menu when the mouse is placed. It is a common menu style. Friends who like it can take it and modify it and beautify it, and it will be enough.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/

The specific code is as follows:

<html>
<head>
<title>二级菜单，响应鼠标</title>
<style type="text/css">
.mainNav ul li {float: left;width: 150px;}
.mainNav li ul {display: none;}
li.hover ul {display: block;}
</style>
<script language="javascript" type="text/javascript">
 function showSubLevel(Obj){
  Obj.className="hover";
 }
 function hideSubLevel(Obj){
  Obj.className="";
 }
</script>
</head>
<body>
<div class="mainNav">
 <ul>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目A
 <ul>
 <li>A的二级栏目</li>
 <li>A的二级栏目</li>
 <li>A的二级栏目</li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目B
 <ul>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目C
 <ul>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 </ul>
 </li>
 </ul>
</div>
</body>
</html>

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

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 super exquisite picture carousel slideshow special effects code sharing_jqueryNext article：jQuery super exquisite picture carousel slideshow special effects code sharing_jquery

See more

JS implements ultra-simplified responsive mouse display secondary menu code_javascript skills

Related articles