JS CSS implémente des compétences simples d'effet_javascript dans le menu de navigation déroulant secondaire-js tutoriel-php.cn

JS CSS implémente des compétences simples d'effet_javascript dans le menu de navigation déroulant secondaire

WBOY

Libérer： 2016-05-16 15:38:33

original

1543 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter un simple effet de menu déroulant secondaire à l'aide de JS CSS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un CSS et d'un JavaScript pour implémenter un menu de navigation déroulant à deux niveaux. Il semble que CSS doive être combiné avec JS pour obtenir de bons résultats. Ce menu utilise également JS. Le menu prend actuellement en charge deux niveaux. La navigation déroulante est ce que nous utilisons souvent. C'est un formulaire de menu. Vous pouvez l'utiliser en le modifiant. La structure est assez simple.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

Le code spécifique est le suivant :

<!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>CSS二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}
#mainNavBar{width:100%;background:#999;padding:10px 0;}
#nav{width:760px;height:30px;margin:0 auto;}
#nav ul{padding:0;margin:0;}
#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}
#nav ul li a{display:block;color:#fff;text-decoration:none;}
#nav ul li a:hover{font-weight:bold;background:#666;}
#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}
#subNav a{text-decoration:none;font-weight:normal;display:block;}
#subNav a:hover{color:#f00;background:#f00;}
</style>
</head>
<body>
<div id="mainNavBar">
 <div id="nav">
  <ul>
   <li>
    <a href="#">添加</a>
    <div id="subNav">
     <a href="#">日志</a>
     <a href="#">分类</a>
    </div>
   </li>
   <li>
    <a href="#">管理</a>
    <div id="subNav">
     <a href="#">分类</a>
     <a href="#">文章</a>
    </div>
   </li>
   <li>
    <a href="#">扩展</a>
    <div id="subNav">
     <a href="#">评论管理</a>
     <a href="#">留言管理</a>
     <a href="#">注销退出</a>
    </div>
   </li>
  </ul>
 </div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i<nav.length;i++){
nav[i].onmouseover=function(){
 this.style.fontWeight="bold";
 this.style.overflow="visible";
 this.style.background="#666666";
 }
nav[i].onmouseout=function(){
 this.style.fontWeight="normal";
 this.style.background="#999999"
 this.style.overflow="hidden";
 }
}
</script>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la programmation JavaScript de chacun.