导航首页 »  JavaScript代码  » js+css实现三级导航菜单

js+css实现三级导航菜单

王朝235网址导航 2021-10-17 56 ℃

本文实例为大家分享了js+css实现三级导航菜单的具体代码,供大家参考,具体内容如下


导航菜单hover事件用css实现相对容易,只需要将透明度更改即可,如果想要菜单有一个渐变的效果,然而可惜的是transition并不支持display,所以用opacity实现效果完全相同。


下面是用css实现的完整代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>三级导航菜单</title>
 </head>
 <style>
  *{
 margin: 0;
 padding: 0;
}
body{
 font-size: 16px;
 background-color:#EDEDED ;
 font-style: inherit;
 color:#757576 ;
}
.main{
 width: 1050px;
 margin: 0 auto;
}
.fl{
 float: left;
}
.fr{
 float: right;
}
a{
 text-decoration: none;
 outline: none;
 color:#757576 ;
}
ul,ol{
 list-style: none;
}
.clear{ 
 clear: both;
}
.clearfix{
 *zoom:1;
}
li{
 float: left;
 display: inline-block;
 width: 120px;
 height: 40px;
 text-align: center;
 line-height: 40px;
}
li a:hover{
 color: red;
}
#frist {
 opacity: 0;
}
#frist li{
 float: none;
 position: relative;
}
 li a:hover{
 color: red;
 transition: all 0.5s;
}
:hover{
 transition: all 2s; 
}
#second {
 opacity: 0;
 margin: -40px 0 0 80px;
 padding: 0px;
 position: absolute;
}
#nav_one:hover #frist{
 opacity:1;
 transition: all 2s;
}
#nav_two:hover #second{
 opacity:1;
 transition: all 2s;
}
 </style>
 
 <body>
  <div class="nav main">
   <ul id="nav">
    <li id="nav_one"><a href="#" >一级</a>
     <ul id="frist">
      <li id="nav_two" class="nav_two">
       <a href="#" >二级</a>
       <ul id="second">
        <li><a href="#" >三级</a></li>
        <li><a href="#" >三级</a></li>
        <li><a href="#" >三级</a></li>
       </ul>
      </li>
      <li class="nav_two"><a href="#" >二级</a></li>
      <li class="nav_two"><a href="#" >二级</a></li>
     </ul>
    </li> 
    <li><a href="#" >一级</a></li>
    <li><a href="#" >一级</a></li>
    <li><a href="#" >一级</a></li>
    <li><a href="#" >一级</a></li>
   </ul>
 </div>  
 </body>
</html>

js实现的相对麻烦一点,但也可以,代替了css中hover效果。

<!--<script>
 window.onload = function(){
  var one = document.getElementById("nav_one");
  var frist = document.getElementById("frist");
  var second = document.getElementById("second");
   one.onmouseover = function(){
    frist.style.opacity = "1";
    frist.style.transition = "all 2s";
    frist.style.WebkitTransition = "all 2s";
   }
   one.onmouseout = function(){
    frist.style.opacity = "0";
    frist.style.transition = "all 0.5s";
    frist.style.WebkitTransition = "all 0.5s";
   }
  var two = document.getElementById("nav_two");
   two.onmouseover = function(){
    second.style.opacity = "1";
    second.style.transition = "all 2s";
    second.style.WebkitTransition = "all 2s";
   }
   two.onmouseout = function(){
    second.style.opacity = "0";
    second.style.transition = "all 0.5s";
    second.style.WebkitTransition = "all 0.5s";
   }
  }
</script>-->

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持王朝235网址导航。

免责声明
文章内容由王朝235网址导航整理发布,仅供学习交流使用,不代表本站的观点和立场,具体内容请自行甄别。
加入好处
简单来说就是可以给您的网站提升权重排名,增加外链和网站流量!如果细分的话那么有如下几个好处!
让您的网站更快、更多地被搜索引擎收录
让您的网站名称的关键词在搜索引擎的搜索结果的第一页甚至第一个
通过本站这个分类目录平台从而给您的网站带来巨大流量
如您网站被搜索引擎屏蔽,王朝235网址导航永久缓存贵站信息,通过这个页面浏览者照样借助王朝235网址导航进入您的网站!
温馨提示:如果贵站想上百度,希望贵站能添加本页面为友情链接,感谢您对本站的支持!
<a href="http://www.wc235.com" target="_blank">王朝235网址导航</a>