jQuery菜单，导航与标签页

最新推荐文章于 2023-04-11 08:46:50 发布

didiao9194

最新推荐文章于 2023-04-11 08:46:50 发布

阅读量234

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/cyjy/p/6473497.html

版权

一：导航

网站导航栏是网站导航的第一层导航结构，我们可以使用HTML和jQuery来创建类似flash的动画效果

一：下拉式菜单

法一：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
  #bigdiv{ position:relative; text-align:left; width:450px;}
  #header{ height:50px; color:#3FC;}
  #menu{ position:absolute; height:50px; top:0; right:0;}
  #menu ,#menu ul { padding:0px; margin:0px; list-style:none;}
  #menu,#menu li{ float:left; background-color:#3F6; border-right:1px solid #CF6;}
  #menu a{ display:block; padding:5px; color:#FFF; width:80px;}
  #menu li ul { position:absolute; left:auto; width:80px;}
  .active{ background-color:#F90;}
</style>
<script src="jquery-3.1.1.js"></script>
<script type="text/javascript">
  $(document).ready(function(e) {
    $('#menu li ul').hide();
    $('#menu li').hover(
      function(){
          $(this).find('ul').slideDown('fast');
          $(this).find('a:first').addClass('active');
          },function(){
              $(this).find('.ull').fadeOut('fast');
              $(this).find('a').removeClass("active");
              });
});
</script>
</head>

<body>
 <div id="bigdiv">
  <div id="header">
    <h1>下拉菜单</h1><hr />
  </div>
   <div id="content">
     <ul id="menu">
       <li>
          <a href="#">年级</a>
          <ul class="ull">
            <li><a href="#">一年级</a></li>
             <li><a href="#">二年级</a></li>
              <li><a href="#">三年级</a></li>
          </ul>
       </li>
       <li>
          <a href="#">专业</a>
          <ul  class="ull">
            <li><a href="#">计算机</a></li>
             <li><a href="#">会计</a></li>
              <li><a href="#">护士</a></li>
          </ul>
       </li>
       <li>
          <a href="#">扩展</a>
          <ul  class="ull">
            <li><a href="#">扩展一</a></li>
             <li><a href="#">扩展二</a></li>
              <li><a href="#">扩展三</a></li>
          </ul>
       </li>
     </ul>
   </div>
 </div>

</body>
</html>

有毒的代码，哈哈

法二：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
   <title>下拉菜单</title>
    <style type="text/css">
        #container {
    position:relative; text-align:left; width:450px;
}
#header h1 {
    height:45px;color:#00ff90;
}
#content {
    padding:0 15px 10px 15px ;
}
#nav li {
    text-align:center; float:left;list-style-type:none;
    height:20px; width:60px; padding:3px; border-right:1px solid #fff;
    background-color:#00ff90; background-position:center 30px;background-repeat:no-repeat;
     display:block; 
}
#nav ul { 
    padding:0px; margin:0px;
}
        #li1, #li2, #li3 {
            position:relative;  z-index:100; display:block;
        }
        .navs {
            display:none;
            position:absolute;
        }
    </style>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#li1").mouseover(function () { $("#div1").show() })
            $("#li1").mouseout(function () { $("#div1").hide() })
            $("#li2").mouseover(function () { $("#div2").show() })
            $("#li2").mouseout(function () { $("#div2").hide() })
            $("#li3").mouseover(function () { $("#div3").show() })
            $("#li3").mouseout(function () { $("#div3").hide() })
        });
    </script>
 <!--   设置了太多id而且代码也不简洁，希望能简化算法来实现，我想可以在移动到每一个li上的
    时候为其下面的div添加一个class，通过这个class能实现下拉的效果。不知道能不能成-->
    
</head>
<body>
<div id="container">
      <div id="header">
        <h1>网站导航</h1>
     </div>
      <div id="content">
          <div id="nav">
              <ul>
                  <li id="li1"><span>主页</span>
                      <div id="div1" class="navs">
                      <a href="#">主页1</a>
                          <a href="#">主页2</a>
                          <a href="#">主页3</a>
                          <a href="#">主页4</a>
                      </div>
                  </li>
                  <li id="li2"><span>目录</span>
                      <div  id="div2" class="navs">
                      <a href="#">目录1</a>
                          <a href="#">目录2</a>
                          <a href="#">目录3</a>
                          <a href="#">目录4</a>                       
                      </div>
                  </li>
                  <li id="li3"><span>分类</span>
                      <div id="div3" class="navs">
                      <a href="#">分类1</a>
                          <a href="#">分类2</a>
                          <a href="#">分类3</a>
                          <a href="#">分类4</a>
                      </div>
                  </li>
                  <li><span>购物车</span>                
                  </li>
              </ul>
          </div>
      </div>
       <br />
      <p>这是一个下拉菜单,这是一段很low的代码我知道，如果你看到这儿，你要是有什么好建议，希望能联系我，做个朋友嘛</p>
   </div> 
</body>
</html>

真是有毒，啊哈哈00

二：可折叠菜单

可折叠的菜单的HTML结构与下拉式菜单的HTML结构大致相同，只是li标签没有使用float属性值left，所以是垂直显示的。

因为菜单是单击显示，在单击就隐藏菜单选项，所以不使用hover事件处理，而是使用toggle事件来处理。

三：手风琴菜单

二：标签页

jQuery也可以创建标签页用户界面，例如：网站主页切换显示主题的用户界面。

转载于:https://www.cnblogs.com/cyjy/p/6473497.html

didiao9194

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery菜单，导航与标签页

一：导航网站导航栏是网站导航的第一层导航结构，我们可以使用HTML和jQuery来创建类似flash的动画效果一：下拉式菜单法一：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti...
复制链接

扫一扫