流式导航菜单

最新推荐文章于 2022-06-15 14:59:04 发布

hexu_blog

最新推荐文章于 2022-06-15 14:59:04 发布

阅读量384

点赞数

文章标签： jQuery 流式导航菜单

本文链接：https://blog.csdn.net/hexu_blog/article/details/76167746

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript" src="js/jquery-1.4.1.js" ></script>
</head>
<script type="text/javascript">
  $(function(){
   $("#menuBar li").click(function(){
    var url=$(this).find("a").attr("href");
    document.location.href=url;
   })

   $("#menuBar li").hover(function(){
    $(this).find(".menuInfo").slideDown();
   },function(){
    $(this).find(".menuInfo").slideUp();
   })


  })


</script>
<style>
  #menuBar{
   width: 730px;
   height: 45px;
   background: #000;
   color: #fff;
   font-family: arial;
   font-size: 14px;
   margin-top: 20px;
  }
  #menuBarHolder{
   list-style-type: none;
   display: block;
  }
  .firstchild{
   border-left: 1px solid #ccc;
  }
  #container{
   margin-top: 10px;
  }
  #menuBar li{
   float: left;
   padding: 15px;
   height: 16px;
   width: 75px;
   border-right: 1px solid #ccc;
  }
  #menuBar li a{
   color: #fff;
   text-decoration: none;
   letter-spacing: -1px;
   font-weight: bold;
  }
  .menuHover{
   background-color: #999;
  }
  .menuInfo{
   cursor: hand;
   background-color: #000;
   color: #fff;
   width: 74px;
   font-size: 11px;
   height: 100px;
   padding: 3px;
   display: none;
   position: absolute;
   margin-left: -15px;
   margin-top: -10px;
   -moz-border-radius-bottomleft: 5px;
   -moz-border-radius-bottomright: 5px;
   -webkit-border-bottom-left-radius: 5px;
   -webkit-border-bottom-right-radius: 5px;
   -khtml-border-radius-bottomright:5px;
   -khtml-border-radius-bottomleft:5px;

  }
  h1{
   font: 50px normal georgia,"times new roman",times,serif;
   color: #111;
   margin: 0;
   text-align: 5px 0;
  }
  h1 small{
   font: 0.2em normal verdana,arial,helvetica,sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.4em;
   display: block;
   color: #ccc;
  }
</style>
<body>
  <center>
   <div id="container">
    <h1>流式导航菜单<br></h1>
    <div id="menuBarHolder">
     <ul id="menuBar">
      <li class="firstchild">
       <a href="JavaScript:#">首页</a>
       <div class="menuInfo">这是首页的链接</div>
      </li>
      <li>
       <a href="JavaScript:#">公司简介</a>
       <div class="menuInfo">公司成立于2005年...</div>
      </li>
      <li>
       <a href="JavaScript:#">公司产品</a>
       <div class="menuInfo">为有志进入IT行业的人提供优质服务</div>
      </li>
      <li>
       <a href="JavaScript:#">个性化服务</a>
       <div class="menuInfo">提供个性化的，对学习与帮助</div>
      </li>
      <li>
       <a href="JavaScript:#">关于</a>
       <div class="menuInfo">版权所有</div>
      </li>
      <li>
       <a href="JavaScript:#">联系我们</a>
       <div class="menuInfo">来吧，加入我们吧</div>
      </li>
     </ul>
    </div>
   </div>
  </center>
</body>
</html>

hexu_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
流式导航菜单

$(function(){ $("#menuBar li").click(function(){ var url=$(this).find("a").attr("href"); document.location.href=url; }) $("#menuBar li").hover
复制链接

扫一扫