Home >Web Front-end >JS Tutorial >js css implements super simple secondary drop-down menu effect code_javascript skills

js css implements super simple secondary drop-down menu effect code_javascript skills

WBOYOriginal: 2016-05-16 15:40:202227browse

The example in this article describes the implementation of ultra-concise secondary drop-down menu effect code using js css. Share it with everyone for your reference. The details are as follows:

This is a very concise CSS JavaScript secondary menu. It does not use too many modification materials and tries not to use external images. It is concise and elegant, and it is easy for secondary development and improvement. It was originally a menu on a government website.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/

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>二级下拉菜单</title>
<style type="text/css">
/*
#193B5F 栏目字体颜色
*/
*{margin:0; padding:0}
body{width:960px; margin:20px auto; font-size:14px;}
/*导航条*/
#nav {background-color:blue; color:#fff;height:25px;line-height:25px;text-align:center;list-style:none;}
 #nav a{color:#fff;}
 #nav li{width:75px;float:left;position:relative;z-index:1;}
 #nav li .title{display:block;}
 #nav li .title:hover{background-color:green;}
 #nav li .submenu{width:75px;margin:0 auto;background:green;position:absolute;left:0;top:25px;display:none;}
 #nav li .submenu dd{border-top:1px dotted #ddd;color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<!-- 有二级菜单的，给li加class="menu" 没有的不用加 -->
  <li class="menu">
   <a href="#" class="title">国家政务</a>
   <dl class="submenu">
    <dd><a href="#">时政要闻</a></dd>
    <dd><a href="#">远程党教</a></dd>
    <dd><a href="#">村务管理</a></dd>
   </dl>
  </li>
  <li>
   <a href="#" class="title">网络服务</a>
  </li>
  <li class="menu">
   <a href="#" class="title">信息交流</a>
   <dl class="submenu">
    <dd><a href="#">求购信息</a></dd>
    <dd><a href="#">转让信息</a></dd>
   </dl>
  </li>
</div><!--end nav-->
<script type="text/javascript">
<!--
var nav = document.getElementById("nav").childNodes;
for (var i=0;i<nav.length;i++)
{
 if (nav[i].className=="menu")
 {
  nav[i].onmouseover = function(){fnNav(this,"block")};
  nav[i].onmouseout = function(){fnNav(this,"none")};
 }
}
function fnNav(obj,flag)
{
 obj.getElementsByTagName("dl")[0].style.display = flag;
}
//-->
</script>
</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：Based on jQuery full screen focus map left and right switching plug-in responsiveslides_jqueryNext article：Based on jQuery full screen focus map left and right switching plug-in responsiveslides_jquery

See more

js css implements super simple secondary drop-down menu effect code_javascript skills

Related articles