1.手风琴式导航，既可以适用于移动端也可使用与PC端

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                list-style: none;

                padding: ;

                margin: ;

            }

            ul{

                display: none;

            }

            h3{

                background-color: blue;

                width: 100px;

                height: 30px;

                text-align: center;

                line-height: 30px;

                border: 1px solid chartreuse;

                margin:  auto;

            }

            ul>li{

                background-color: chartreuse;

                width: 100px;

                height: 30px;

                text-align: center;

                line-height: 30px;

                border: 1px solid red;

                margin:  auto;

            }

        </style>

        <script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

//            通过jq的滑入滑出动画可作出手风琴式的导航栏

            $(document).ready(function(){//jq准备函数

                $("h3").on("click",function(){

                    $("h3").next().slideUp();//当前元素之下的节点

                    $(this).next().stop(true).slideToggle();//使用间歇

                })

            })

        </script>

    </head>

    <body>

        <h3>

            语文

        </h3>

        <ul>

            <li>语文1</li>

            <li>语文2</li>

            <li>语文3</li>

            <li>语文4</li>

        </ul>

        <h3>

            数学

        </h3>

        <ul>

            <li>数学1</li>

            <li>数学2</li>

            <li>数学3</li>

        </ul>

        <h3>

            英语

        </h3>

        <ul>

            <li>英语1</li>

            <li>英语2</li>

            <li>英语3</li>

        </ul>

        <h3>

            地理

        </h3>

        <ul>

            <li>地理1</li>

            <li>地理2</li>

            <li>地理3</li>

        </ul>

        <h3>

            政治

        </h3>

        <ul>

            <li>政治1</li>

            <li>政治2</li>

            <li>政治3</li>

        </ul>

    </body>

</html>

2.下拉式导航  适用于pc端

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            ul{

                list-style: none;

                margin-left: %;

            }

            ul li{

                float: left;

                width: 100px;

                height: 30px;

                background-color: deeppink;

                line-height: 30px;

                text-align: center;

                margin-left: 5px;

            }

            ul li>ul{

                margin-left: -45px;

                margin-top: 5px;

                display: none;

            }

        </style>

        <script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                $("#ul>li").hover(function(){//通过hover效果对该元素进行动画

                    $(this).find("ul").stop().slideDown();//找到当前目标元素下的所有子节点下滑

                },function(){

                    $(this).find("ul").stop().slideUp();//找到当前目标元素下的所有子节点上滑

                })

            })

        </script>

    </head>

    <body>

        <ul id="ul">

            <li>

                去岁一别

                <ul>

                    <li>一年</li>

                    <li>两年</li>

                    <li>三年</li>

                    <li>四年</li>

                    <li>五年</li>

                </ul>

            </li>

            <li>

                救赎问候

                <ul>

                    <li>一次</li>

                    <li>两次</li>

                    <li>三次</li>

                    <li>四次</li>

                    <li>五次</li>

                </ul>

            </li>

            <li>

                深感愧疚

                <ul>

                    <li>一句</li>

                    <li>两句</li>

                    <li>三句</li>

                    <li>四句</li>

                    <li>五句</li>

                </ul>

            </li>

        </ul>

    </body>

</html>

还有更多样式的导航，使用C3新属性，使用动画，就会实现各种样式导航。

用JQ帮你实现动画导航 手风琴是导航与下拉导航的更多相关文章

  1. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  2. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  3. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  4. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  5. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  6. Android实现下拉导航选择菜单效果

    本文介绍在Android中如何实现下拉导航选择菜单效果.   关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左 ...

  7. 通过html和css做出下拉导航栏的效果

    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...

  8. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  9. Javascript下拉导航

    1.右侧导航 tree.js function Toggle(e){ if(!document.getElementById) return; if(!e) var e = window.event; ...

  10. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

随机推荐

  1. select 插入数据 不自增列实现自增

  2. Not all processes could be identified, non-owned process info will not be shown, you would have to be root to see it all.

    分析:还是权限问题,所以给他加上权限就可以了!! 解决:chmod +s /bin/netstat

  3. javascript高级程序设计---js事件思维导图

    绘制思维软件与平时用的笔记,以及导出功能,这三个问题综合起来,于是我把思维导图分开画 1.js事件的基本概念 2.js事件的事件处理程序 3.js事件的事件对象

  4. Flask Web开发实战（入门、进阶与原理解析）

    URL重定向 错误响应 > 如果你想手动返回错误响应,可以使用Flask提供的abort()函数. XML 上下文全局变量 [](https://img2018.cnblogs.com/blog ...

  5. C++_异常1-调用abort()

    异常是相对较新的C++功能,有些老式编译器可能没有实现.另外有些编译器可能默认关闭这一特性,需要使用编译器选项来打开它. 这里先讨论一个基本问题: 2.0 * x * y / (x+y) 如果y是x的 ...

  6. HDU_3038 How Many Answers Are Wrong 【带权并查集】

    一.题面 HDU3038 二.分析 用并查集可以方便的判断两个位置是否有关系,这种关系可以通过是否有公共父节点判断,如果有公共父节点则可以直接判断是否正确,如果没有公共父节点,就可以把这个条件与之前的 ...

  7. 关于strcmp函数的用法

    strcmp函数是在string.h库下的han函数, 具体用法如下: strcmp函数是用来比较2个字符串的函数,如srcmp(字如果符串1,字符串2),从第一个字符开始比较,如果到最后两个字符串完 ...

  8. P4294 [WC2008]游览计划

    传送门 斯坦纳树 给一个联通图,求 $k$ 个关键点联通的最小生成树权值 设 $f[o][i]$ 表示当前关键点选择状态为 $o$ ,以点 $i$ 为根的树的最小权值 初始 $f[1<<( ...

  9. SQL批量提交修改业务

    把你需要批量提交修改的东西在内存中修改完毕 然后执行以下代码 SqlConnection conn = new SqlConnection(ConnectionString);SqlDataAdapt ...

  10. 关于vue2非表单元素使用contenteditable="true"实现textarea高度自适应

    <template> <div ref="sendContent" contenteditable="true" v-html="s ...