一：导航

网站导航栏是网站导航的第一层导航结构，我们可以使用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也可以创建标签页用户界面，例如：网站主页切换显示主题的用户界面。

jQuery菜单，导航与标签页的更多相关文章

  1. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  2. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  3. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  4. [置顶] JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  5. JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  6. Jquery实现的Tabs标签页

    效果图: HTML: <div class="tabs"> <ul id="tabs"> <li class="tab- ...

  7. JQuery攻略（六）菜单导航

    jQuery菜单导航的基础应用 此章节有 1.0 页面导航 1.01面包屑菜单 1.02菜单悬停 1.03菜单快捷键 1.04两个单独的菜单 1.05折叠菜单 1.01面包屑菜单 html <b ...

  8. Bootstrap入门（十二）组件6：导航标签页

    Bootstrap入门(十二)组件6:导航标签页   1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单   先引入本地的CSS文件和JS文件(注:1. ...

  9. Bootstrap 导航元素（标签页）

    [Bootstrap 导航元素] 1.基本的导航元素:标签导航.基于ul.li而来,给ul添加 class="nav nav-tabs" 即可.选中的li添加 class=&quo ...

随机推荐

  1. HTML相对路径与绝对路径

    在网页制作的过程中,少不了跟路径打交道,比如,包含一个文件,插入一个图片等,与路径都有关系,如果使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等).初学者可能会感到困惑 ...

  2. Debug tool 学习笔记

    GDB调试命令大全 gdb --pid 1235 gdb core.1234 where (bt)    //where the segmentation fault occurred f 1     ...

  3. 数据库基本表创建 完整性约束 foreign Key

    理解以下几张表的内容,根据实际情况设计属性名.数据类型.及各种完整性约束(primary key.foreign key.not null.unique.check),用数据定义语言实现,然后设计实验 ...

  4. 20145229吴姗珊《Java程序设计》第二周学习总结

    教材学习内容总结 一.类型.变量与运算符 1.类型 整数:可细分为short整数.int整数和long整数.不同长度的整数可储存的整数范围也不同. 字节:byte类型顾名思义.长度就是一字节,需要逐字 ...

  5. 单链表（C++实现）

    单链表的结构有多种 这里介绍的链表有头结点.有尾节点并且尾节点指向头结点 单链表的每个结点的地址存放在其直接前驱结点的指针域中.其中第一个结点没有前驱结点,因此需要一个头指针指向第一个节点,便于我们对 ...

  6. 操作系统原理２——OS结构

    操作系统原理2——OS结构   计算机系统是由硬件系统和软件系统两部分组成, 操作系统是软件系统的一个组成部分,它是直接在硬件系统的基础上工作的,所以在研究操作系统之前,先必须对计算机系统的结构有一个 ...

  7. HDU 3954 Level up（多颗线段树+lazy操作）

    又是一开始觉得的水题,结果GG了好久的东西... 题意是给你n个英雄,每个英雄开始为1级经验为0,最多可以升到k级并且经验一直叠加,每一级都有一个经验值上限,达到就升级.接着给你两种操作:W li r ...

  8. Python- and & or 的短路原则

    条件1 and 条件2 条件1 or 条件2 短路原则 对于and 如果前面的第一个条件为假,那么这个and前后两个条件组成的表达式的计算结果就一定为假,第二个条件就不会被计算 对于or 如果前面的第 ...

  9. C#中substring ()的用法

    C#中substring ()的用法:http://www.cnblogs.com/bluespace/archive/2007/12/11/782336.html

  10. struts2 框架 的环境搭建 与配置

    一,Struts2简介: 1,来由:Struts(金属支架),在程序中表示起支撑作用的通用程序代码,Struts2是在Struts1框架的基础上融合了WebWork优秀框架升级得到的. 2,解释:St ...