两个很炫的导航菜单（转自中国站长天空）

View Code

<!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>

<title>中国站长天空-网页特效-导航菜单-漂亮且兼容各种浏览器的多级下拉导航菜单(四)</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

* {

    margin: 0;

    padding: 0;

}

body {

    background: #171717;

}

div#menu {

    margin: 30px auto;

    width: 80%;

}

/* menu::base */

div#menu {

    height: 46px;

    padding-left: 10px;

    background: url(http://www.zzsky.cn/effect/images/20122/202245/left.png) no-repeat;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/left.gif);

    width: auto;

}

div#menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    float: left;

}

div#menu ul.menu {

    padding-right: 10px;

    background: url(http://www.zzsky.cn/effect/images/20122/202245/right.png) no-repeat right 0;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/right.gif);

}

div#menu li {

    position: relative;

    margin: 0;

    padding: 0 0 0 0;

    display: block;

    float: left;

    z-index: 9;

    width: auto;

}

div#menu ul ul li {

    z-index: 9;

}

div#menu li div {

    list-style: none;

    float: left;

    position: absolute;

    z-index: 11;

    top: 36px;

    left: 0;

    visibility: hidden;

    width: 187px;

    padding: 0 0 11px 7px;

    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.png) no-repeat 7px bottom;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.gif);

    margin: 0px 0 0 -4px;

}

div#menu li:hover>div {

    visibility: visible;

}

div#menu a {

    position: relative;

    z-index: 10;

    height: 41px;

    display: block;

    float: left;

    line-height: 41px;

    text-decoration: none;

    margin-top: 1px;

    white-space: nowrap;

    width: auto;

    padding-right: 5px;

    text-align: center;

}

div#menu span {

    display: block;

    cursor: pointer;

    background-repeat: no-repeat;

    background-position: 95% 0;

    text-align: center;

}

/* menu::level1 */

div#menu a {

    padding: 0 30px 0 0;

    line-height: 40px;

    height: 46px;

    margin-right: 5px;

    _margin-right: 1px;

    background: none;

}

div#menu span {

    margin-top: 2px;

    padding-left: 30px;

    color: #fff;

    font: bold 11px Trebuchet MS,Arial,san-serif;

    background: none;

    line-height: 40px;

}

div#menu a:hover,

div#menu a.over {

    background:  url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.png)  no-repeat right -1px;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.gif);

}

div#menu a:hover span,

div#menu a.over span {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.png) no-repeat 0 -3px;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.gif);

}

div#menu li.current a,

div#menu ul.menu>li:hover>a {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.png) no-repeat right -1px;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.gif);

}

div#menu li.current a span,

div#menu ul.menu>li:hover>a span {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.png) no-repeat 0 -3px;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.gif);

}

div#menu ul.menu>li:hover>a span {

    color: #043454;

}

div#menu li {}

div#menu li.last {

    background: none;

}

div#menu li.current a,

div#menu li.current a span,

div#menu.js-active a:hover,

div#menu.js-active a:hover span,

div#menu.js-active a,

div#menu.js-active span {

    background:none;

}

div#menu.js-active ul.menu>li:hover>a,

div#menu.js-active ul.menu>li:hover>a span {

    background:none;

}

div#menu li.current a.over {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.png)  no-repeat right -1px;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.gif);

}

div#menu li.current a.over span {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.png) no-repeat 0 -3px;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.gif);

}

div#menu a.over span {

    color: #043454;

}

/* menu::level2 */

div#menu ul ul li {

    background: none;

    padding: 0;

}

div#menu ul ul {

    padding-top: 10px;

}

div#menu ul ul a {

    padding: 0;

    height: auto;

    float: none;

    display: block;

    line-height: 26px;

    font-size: 11px;

    color: #ffffff;

    z-index: -1;

    padding-left: 5px;

    white-space: normal;

    width: 160px;

    margin: 0 5px;

    text-transform: none;

}

div#menu ul ul a span {

    padding: 0 15px;

    line-height: 26px;

    font-size: 11px;

}

div#menu li.current ul a,

div#menu li.current ul a span {

    background:none;

}

div#menu ul ul a:hover {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-selected-bottom.png) no-repeat 5px bottom;

}

div#menu ul ul a:hover span {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-selected-top.png) no-repeat 0 0;

}

div#menu ul ul a.parent {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-pointer-bottom.gif) no-repeat 5px bottom;

}

div#menu ul ul a.parent span {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-pointer-top.png) no-repeat 0 0;

}

div#menu ul ul a.parent:hover {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;

}

div#menu ul ul a.parent:hover span {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-selected-top.png) no-repeat 0 0;

}

div#menu ul ul span {

    margin-top: 0;

    text-align: left;

}

div#menu ul ul li.last {

    background: none;

}

div#menu ul ul li {

    width: 100%;

}

/* menu::level3 */

div#menu ul ul div {

    width: 180px;

    padding: 15px 0px 8px 0px;

    margin: -44px 0 0 169px !important;

    background: url(http://www.zzsky.cn/effect/images/20122/202245/subsubmenu-top.png) no-repeat 0px 0;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/subsubmenu-top.gif);

}

*+html div#menu ul ul div { height:10px }

*+html div#menu.ie7 ul ul div { height:auto }

div#menu ul ul ul {

    padding: 0 4px 5px 1px;

    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.png) no-repeat 0px bottom;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.gif);

}

div#menu ul ul div li {

    position:relative;

    top:-5px;

}

/* lava lamp */

div#menu li.back {

    background: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-left.png) no-repeat 0 0;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-left.gif);

    width: 10px;

    height: 46px;

    z-index: 8;

    position: absolute;

    padding: 0;

    margin: 0;

}

div#menu li.back .left {

    padding:0;

    width:auto;

    background: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-right.png) no-repeat right 0;

    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-right.gif);

    height: 46px;

    margin: 0 5px 0 10px;

    _margin-right: 2px;

    float: none;

    position: relative;

    top: 0;

    left: 0;

    visibility: visible;

}

div#copyright {

    margin: 0 auto;

    width: 80%;

    font: 11px 'Trebuchet MS';

    color: #124a6f;

    text-indent: 20px;

    padding: 40px 0 0 0;

}

div#copyright a {

    color: #4682b4;

}

div#copyright a:hover {

    color: #124a6f;

}

</style>

<script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202245/jquery.js"></script>

<script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202245/menu.js"></script>

</head>

<body>

<span style="color:#ffffff;">预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。</span><br>

<!--把下面代码加到<body>与</body>之间-->

<div id="menu">

    <ul class="menu">

        <li><a href="#" class="parent"><span>Home</span></a>

            <div><ul>

                <li><a href="#" class="parent"><span>Sub Item 1</span></a>

                    <div><ul>

                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>

                            <div><ul>

                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>

                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>

                            </ul></div>

                        </li>

                        <li><a href="#"><span>Sub Item 1.2</span></a></li>

                        <li><a href="#"><span>Sub Item 1.3</span></a></li>

                        <li><a href="#"><span>Sub Item 1.4</span></a></li>

                        <li><a href="#"><span>Sub Item 1.5</span></a></li>

                        <li><a href="#"><span>Sub Item 1.6</span></a></li>

                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>

                            <div><ul>

                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>

                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>

                            </ul></div>

                        </li>

                    </ul></div>

                </li>

                <li><a href="#"><span>Sub Item 2</span></a></li>

                <li><a href="#"><span>Sub Item 3</span></a></li>

            </ul></div>

        </li>

        <li><a href="#" class="parent"><span>Product Info</span></a>

            <div><ul>

                <li><a href="#" class="parent"><span>Sub Item 1</span></a>

                    <div><ul>

                        <li><a href="#"><span>Sub Item 1.1</span></a></li>

                        <li><a href="#"><span>Sub Item 1.2</span></a></li>

                    </ul></div>

                </li>

                <li><a href="#" class="parent"><span>Sub Item 2</span></a>

                    <div><ul>

                        <li><a href="#"><span>Sub Item 2.1</span></a></li>

                        <li><a href="#"><span>Sub Item 2.2</span></a></li>

                    </ul></div>

                </li>

                <li><a href="#"><span>Sub Item 3</span></a></li>

                <li><a href="#"><span>Sub Item 4</span></a></li>

                <li><a href="#"><span>Sub Item 5</span></a></li>

                <li><a href="#"><span>Sub Item 6</span></a></li>

                <li><a href="#"><span>Sub Item 7</span></a></li>

            </ul></div>

        </li>

        <li><a href="#"><span>Help</span></a></li>

        <li class="last"><a href="#"><span>Contacts</span></a></li>

    </ul>

</div>

<div id="copyright">Copyright © 2012 <a href="http://apycom.com" target="_blank">Apycom jQuery Menus</a></div>

</body>

</html>

View Code 2

<!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>

<title>中国站长天空-网页特效-导航菜单-漂亮且兼容各种浏览器的多级下拉导航菜单(一)</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

* {

    margin: 0;

    padding: 0;

}

body {

    background: rgb(74,81,85);

}

div#menu {

    margin: 5px auto;

}

/* menu::base */

div#menu {

    height: 41px;

    background: url(http://www.zzsky.cn/effect/images/20122/202200/main-bg.png) repeat-x;

}

div#menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    float: left;

}

div#menu ul.menu {

    padding-left: 30px;

}

div#menu li {

    position: relative;

    z-index: 9;

    margin: 0;

    padding: 0 5px 0 0;

    display: block;

    float: left;

}

div#menu li:hover>ul {

    left: -2px;

}

div#menu a {

    position: relative;

    z-index: 10;

    height: 41px;

    display: block;

    float: left;

    line-height: 41px;

    text-decoration: none;

    font: normal 12px Trebuchet MS;

}

div#menu a:hover, div#menu a:hover span {

    color: #fff;

}

div#menu li.current a {}

div#menu span {

    display: block;

    cursor: pointer;

    background-repeat: no-repeat;

    background-position: 95% 0;

}

div#menu ul ul a.parent span {

    background-position:95% 8px;

    background-image: url(http://www.zzsky.cn/effect/images/20122/202200/item-pointer.gif);

}

div#menu ul ul a.parent:hover span {

    background-image: url(http://www.zzsky.cn/effect/images/20122/202200/item-pointer-mover.gif);

}

/* menu::level1 */

div#menu a {

    padding: 0 10px 0 10px;

    line-height: 30px;

    color: #e5e5e5;

}

div#menu span {

    margin-top: 5px;

}/**@replace#1*/

div#menu li {

    background: url(http://www.zzsky.cn/effect/images/20122/202200/main-delimiter.png) 98% 4px no-repeat;

}

div#menu li.last {

    background: none;

}

/* menu::level2 */

div#menu ul ul li {

    background: none;

}

div#menu ul ul {

    position: absolute;

    top: 38px;

    left: -999em;

    width: 163px;

    padding: 5px 0 0 0;

    background: rgb(45,45,45);

    margin-top:1px;

}

div#menu ul ul a {

    padding: 0 0 0 15px;

    height: auto;

    float: none;

    display: block;

    line-height: 24px;

    color: rgb(169,169,169);

}

div#menu ul ul span {

    margin-top: 0;

    padding-right: 15px;

    _padding-right: 20px;

    color: rgb(169,169,169);

}

div#menu ul ul a:hover span {

    color: #fff;

}

div#menu ul ul li.last {

    background: none;

}

div#menu ul ul li {

    width: 100%;

}

/* menu::level3 */

div#menu ul ul ul {

    padding: 0;

    margin: -38px 0 0 163px !important;

    margin-left:172px;

}

/* colors */

div#menu ul ul ul {

    background: rgb(41,41,41);

}

div#menu ul ul ul ul {

    background: rgb(38,38,38);

}

div#menu ul ul ul ul {

    background: rgb(35,35,35);

}

/* lava lamp */

div#menu li.back {

    background: url(http://www.zzsky.cn/effect/images/20122/202200/lava.png) no-repeat right -44px !important;

    background-image: url(http://www.zzsky.cn/effect/images/20122/202200/lava.gif);

    width: 13px;

    height: 44px;

    z-index: 8;

    position: absolute;

    margin: -1px 0 0 -5px;

}

div#menu li.back .left {

    background: url(http://www.zzsky.cn/effect/images/20122/202200/lava.png) no-repeat top left !important;

    background-image: url(http://www.zzsky.cn/effect/images/20122/202200/lava.gif);

    height: 44px;

    margin-right: 8px;

}

div#copyright {

    font: 11px 'Trebuchet MS';

    color: #222;

    text-indent: 30px;

    padding: 40px 0 0 0;

}

div#copyright a {

    color: #aaa;

}

div#copyright a:hover {

    color: #222;

}

</style>

<script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202200/jquery.js"></script>

<script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202200/menu.js"></script>

</head>

<body>

<span style="color:#ffffff;">预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。</span><br>

<!--把下面代码加到<body>与</body>之间-->

<div id="menu">

    <ul class="menu">

        <li><a href="#" class="parent"><span>Home</span></a>

            <ul>

                <li><a href="#" class="parent"><span>Sub Item 1</span></a>

                    <ul>

                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>

                            <ul>

                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>

                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>

                            </ul>

                        </li>

                        <li><a href="#"><span>Sub Item 1.2</span></a></li>

                        <li><a href="#"><span>Sub Item 1.3</span></a></li>

                        <li><a href="#"><span>Sub Item 1.4</span></a></li>

                        <li><a href="#"><span>Sub Item 1.5</span></a></li>

                        <li><a href="#"><span>Sub Item 1.6</span></a></li>

                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>

                            <ul>

                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>

                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>

                            </ul>

                        </li>

                    </ul>

                </li>

                <li><a href="#"><span>Sub Item 2</span></a></li>

                <li><a href="#"><span>Sub Item 3</span></a></li>

            </ul>

        </li>

        <li><a href="#" class="parent"><span>Product Info</span></a>

            <ul>

                <li><a href="#" class="parent"><span>Sub Item 1</span></a>

                    <ul>

                        <li><a href="#"><span>Sub Item 1.1</span></a></li>

                        <li><a href="#"><span>Sub Item 1.2</span></a></li>

                    </ul>

                </li>

                <li><a href="#" class="parent"><span>Sub Item 2</span></a>

                    <ul>

                        <li><a href="#"><span>Sub Item 2.1</span></a></li>

                        <li><a href="#"><span>Sub Item 2.2</span></a></li>

                    </ul>

                </li>

                <li><a href="#"><span>Sub Item 3</span></a></li>

                <li><a href="#"><span>Sub Item 4</span></a></li>

                <li><a href="#"><span>Sub Item 5</span></a></li>

                <li><a href="#"><span>Sub Item 6</span></a></li>

                <li><a href="#"><span>Sub Item 7</span></a></li>

            </ul>

        </li>

        <li><a href="#"><span>Help</span></a></li>

        <li class="last"><a href="#"><span>Contacts</span></a></li>

    </ul>

</div>

<div id="copyright">Copyright © 2012 <a href="http://apycom.com" target="_blank">Apycom jQuery Menus</a></div>

</body>

</html>

原文地址：http://www.zzsky.cn/effect/list/5-3.htm

elementUI中的Nav meau yourana123 前端 elementui
在做项目中遇到一个需求，当用户处于某种状态时，点击导航菜单的某项，不能切换，并且弹出消息提示.例如，我在新建状态下，点击了其中一项，不能切换，并弹出消息提示，原来选中的一项没有改变。default-active表示默认选中的一项，无法动态实时的显示激活的那项。所以无法通过改变default-active，设置激活项。解决方案：由于导航菜单的每一项都是通过key绑定的index来的，每一次点击不同的
关于vue+element ui 中的导航菜单问题空心闲人前端程序员
关于vue+elementui中的导航菜单问题最近公司要开发一个vue项目，自己搭框架的时候用到了element，目标是实现一个顶部菜单以及侧边菜单栏。直接上代码。importcommonHeaderfrom"@/components/header"importleftContentfrom"@/components/leftContent"exportdefault{name:'layout',
vue element NavMenu 导航菜单星光君 Vue vue elemnt NavMenu 导航菜单
今天给大家带来一个垂直的导航菜单：点击左边的菜单栏，右边也跟着变。上代码：这是.vue文件购物指南购物流程常见问题支付方式积分支付售后服务换货流程换货政策特色栏目高端专区关于我们联系我们意见建议上路由route/index.js{path:'/goodsList/Goods_Index',name:'Goods_Index',component:GoodsIndex,meta:{title:'商品
前端面试题三前端
以下是一些前端面试题：一、HTML/CSS部分如何实现一个响应式的导航菜单，在移动设备上能够以汉堡菜单的形式展示？答案：使用CSS媒体查询来检测屏幕宽度。在HTML中，创建导航菜单结构，包含导航项和一个用于切换菜单显示的按钮（汉堡菜单图标）。在CSS中，对于较大屏幕（桌面端），正常显示导航菜单项，隐藏汉堡菜单按钮。当屏幕宽度小于某个阈值（如768px）时，隐藏导航菜单项，显示汉堡菜单按钮。通过Ja
用CSS实现下拉菜单的多种方法 yezi1305 html(div+css)
本文转自：http://www.51xuediannao.com/js/nav/ullidaohang.html用CSS实现下拉菜单的多种方法详细出处参考：http://www.jb51.net/article/5959.htmULLI结构实现二级导航菜单(HTML+CSS+JS)_懒人建站http://www.51xuediannao.com0?"":"")+"sfhover";}sfEls[i
利用HTML和css技术编写学校官网页面彭友圈101 css 前端 html
目录一，图例展示二，代码说明1，html部分：【第一张图片】【第二张图片】【第三张图片】2，css部分：【第一张图片】【第二张图片】【第三张图片】三，程序代码一，图例展示二，代码说明1，html部分：【第一张图片】创建了一个基本的页面结构，包含header（顶部导航栏）和main（主横幅区域）。在header中，设置了学校logo、学校名称、主导航菜单以及用户相关选项（学生、教工等）。main区域
【产品经理修炼之道】- 导航架构设计 xiaoli8748_软件开发产品经理产品经理
目录一、导航是什么二、导航的作用三、导航的分类四、导航菜单的广度与深度五、导航的颜色六、导航的形态七、导航的研究八、导航的设计九、导航改版案例分享总结每个网页的设计都需要包括导航，那么导航架构该如何设计？作者结合之前用户体验设计的相关经验给大家分享关于导航架构设计的思路，希望对你有所帮助。过完元宵佳节就正式进入新的一年了，告别与家人团聚的欢乐重新回归繁忙的工作生活中，今天结合之前用户体验设计的相关
一个简单的自适应html5导航模板很酷的站长 html5专题 css css3 前端
一个简单的HTML导航模板示例，它包含基本的导航栏结构，同时使用了CSS进行样式美化，让导航栏看起来更美观。另外，还添加了一些JavaScript代码，用于在移动端实现导航菜单的展开和收起功能。PHP网址导航模板body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f4f4f4;}header{backgrou
第20节课： jQuery基础—简化JavaScript编程的强大工具学问小小谢 HTML学习 javascript jquery 前端 html 学习交互搜索引擎
目录jQuery简介为什么使用jQuery？jQuery选择器基本选择器属性选择器伪类选择器事件处理事件绑定常见事件类型事件触发动画效果基本动画自定义动画实践：使用jQuery增强网页交互示例：创建一个带有动画效果的按钮示例：创建一个交互式的导航菜单结语在Web开发中，JavaScript是实现网页交互和动态效果的核心语言。然而，原生JavaScript的语法有时显得繁琐，为了提高开发效率，jQu
【Material-UI】Lists组件中的Customization功能详解 Peter-Lu #material-ui ui list javascript Material-UI 前端
文章目录一、Lists组件概述1.组件介绍2.Customization的意义二、Lists组件的Customization方法1.使用主题（Theme）定制化组件2.通过`styled`API定制化组件3.样式覆盖（Overrides）三、使用案例：打造一个定制化的导航菜单四、总结在现代Web开发中，UI的定制化需求越来越高。Material-UI作为React生态系统中的顶级UI框架，提供了丰
Vue2 - 详细实现解析富文本内容生成侧边栏Toc目录索引，识别富文本内容根据标题h1~h6自动生成文章目录，点击目录导航时跳转到文章内容对应的锚点位置带过渡动画，鼠标滚动内容滑过锚点时高亮对应标题王佳斌 +Vue vue2.js nuxt2.js 根据富文本内容自动生成目录方法根据h标签标题做侧边栏导航目录 vue读取富文本中的h1标题博客文章资讯新闻文章富文本富文本和目录相互联动高亮菜单
前言如果您需要Vue3版本，请访问这篇文章。在vue2|nuxt2项目开发中，详解实现“解析识别富文本内容，并在侧边栏动态生成文章目录”，对富文本内的h1~h6标题进行读取分析（可自定义要读取的标签，支持多级标题嵌套渲染），然后在指定位置生成渲染富文本对应的文章锚点目录TOC，点击目录导航菜单时会跳转到文章内容对应的标题锚点位置并且有过渡跳转动画，另外用户浏览富文本滚动经过标题锚点时右侧目录会自动
响应式Web设计：纯HTML和CSS的实现技巧-2 Dingdangr 前端 html css
0px){body{font-size:16px;}}@media(min-width:1201px){body{font-size:18px;}}###6.响应式导航菜单导航菜单是网站中非常重要的一部分，特别是在移动设备上，传统的水平导航菜单可能会占用太多空间，导致页面内容被压缩或遮挡。因此，创建一个响应式的导航菜单对于提升用户体验至关重要。你可以使用媒体查询和CSS来控制导航菜单的显示方式，如
【前端 VUE】vue Elemente-UI 管理后台自定义导航菜单栏悟空_大师兄_ vue vue
记录管理后台侧边导航栏做成通用小组件借助Elemente-UI：侧边栏容器：导航菜单创建父组件页面aside.vue*（default-active为当前激活菜单的index，（设置为当前的路由名称this.$route.fullPath）@select事件为菜单选择触发的事件借助跳转路由并设置default-active的值）importNavMenufrom'@/components/NavM
python自动化测试脚本实操单叼红中测试用例 python
'''=====================测试woniusales进销存系统的部分功能==============================需求1（10分）：正确账号可以登录系统登录后跳转页面导航菜单右侧出现一个注销链接需求2（20分）：导航栏中每个菜单可以正确打开对应的页面,点击菜单名，打开对应的页面的URL地址正确，页面标题正确如：点击“商品入库”页面URL为http://loca
CSS二级导航菜单的实现魅美笔记 html css
用CSS实现二级导航菜单效果如下HTML代码CSS二级导航菜单一级菜单1一级菜单2二级菜单1二级菜单2二级菜单3二级菜单4二级菜单5二级菜单6一级菜单3二级菜单1二级菜单2二级菜单3二级菜单4二级菜单5二级菜单6一级菜单4二级菜单1二级菜单2二级菜单3二级菜单4二级菜单5二级菜单6一级菜单5CSS代码*{margin:0;padding:0;}body{width:100vm;background
HTML-介绍-MDN文档学习笔记 LoveEmiliaForever MDN前端入门文档 html 学习笔记前端
HTML-介绍查看更多学习笔记：GitHub：LoveEmiliaForeverMDN中文官网HTML-简介MDN文档引用：就其核心而言，HTML是一种相当简单的、由不同元素组成的标记语言，它可以被应用于文本片段，使文本在文档中具有不同的含义（它是段落吗？它是项目列表吗？它是表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。H
进入详情页，隐藏底部导航菜单小刘先生很努力 vue.js 前端 javascript
有次在写app项目时，后来客户加了个要求就是点击进入详情页的时候底部的导航栏隐藏掉，不在显示，然后就看下边操作吧。我们首先在index.js路由文件中配置我们的页面路由{path：'/detail/:id',name:'Detail',component:()=>import('../views/Detail.vue'),meta:{hideNav:true,//是否隐藏底部导航}}然后我们在Ap
分享88个CSS3特效，总有一款适合您记忆的小河 css3 前端 css
分享88个CSS3特效，总有一款适合您88个CSS3特效下载链接：https://pan.baidu.com/s/1pDAyFESnO8HSnCZj4-DOzQ?pwd=8888提取码：8888Python采集代码下载链接：采集代码.zip-蓝奏云学习知识费力气，收集整理更不易。知识付费甚欢喜，为咱码农谋福利。CSS3气泡动画文字导航菜单代码CSS3可拖动动画人物关系图代码CSS文字组合成心形动画
JS特效第131弹：jQuery响应式下拉导航菜单插件megamenu 马coder javascript 前端开发语言
jQuery响应式下拉导航菜单插件megamenu，先来看看效果：一部分关键的代码如下：jQuery响应式下拉导航菜单插件megamenuHomeAboutSchoolLidershipHistoryLocationsCareersStudyUndergraduateMastersInternationalOnlineResearchUndergraduateresearchMastersrese
JS特效第134弹：jQuery响应式全屏背景图片导航菜单特效马coder javascript 开发语言 ecmascript
jQuery响应式全屏背景图片导航菜单特效，先来看看效果：一部分关键的代码如下：jQuery响应式全屏背景图片导航菜单特效主页jQuery从1.4-2.1版本下载适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.不支持IE8及以下浏览器。内容leanModal.js轻巧的弹出层插件设置wysiwyg微小的Bootstrap富文本编辑器bootstra
Vue 前置导航还是大剑师兰特 #vue2常用示例500+vue.js 前端
Vue前置导航（VueFrontNavigation）是一种在Vue.js框架中实现导航功能的常见方式。它通常用于构建单页应用程序（SinglePageApplication），通过在页面顶部或侧边栏显示导航菜单，使用户能够轻松切换到不同的页面或功能模块。以下是一个简单的Vue前置导航示例，包括代码和解释：首先，创建一个Vue项目或在现有项目中添加Vue组件。假设我们有一个名为Navbar.vue
《CSS 简易速速上手小册》第2章：CSS 布局与定位（2024 最新版）江帅帅《CSS 简易速速上手小册》css 前端人工智能数据分析数据挖掘 web3 网页
文章目录2.1Flexbox：灵活的布局解决方案2.1.1基础知识2.1.2重点案例：创建一个响应式导航菜单2.1.3拓展案例1：卡片布局2.1.4拓展案例2：中心对齐的登录表单2.2Grid布局：网格系统的魔力2.2.1基础知识2.2.2重点案例：创建一个新闻网站的布局2.2.3拓展案例1：画廊布局2.2.4拓展案例2：个人博客的文章布局2.3定位技巧：Static、Relative、Absol
（十三）c#Winform自定义控件-导航菜单 kwwwvagaa 自定义控件 c#winform 自定义控件
（十三）c#Winform自定义控件-导航菜单前提入行已经7,8年了，一直想做一套漂亮点的自定义控件，于是就有了本系列文章。GitHub：https://github.com/kwwwvagaa/NetWinformControl码云：https://gitee.com/kwwwvagaa/net_winform_custom_control.git如果觉得写的还行，请点个star支持一下吧欢迎前
学习之旅10------掌握jQuery：实用应用案例深度解析 theskylife Javascript总结学习 jquery 前端
目录写在开头1.jQuery基础知识回顾1.1.选择器1.2.事件1.3.效果1.4.DOM操作1.5.AJAX2.实用应用案例分析2.1.动态内容加载2.2.表单验证2.3.图像滑动门效果2.4.创建动态导航菜单3.高级技巧与最佳实践3.1.优化jQuery代码的性能3.2.jQuery插件的使用和自定义3.3.jQuery在移动开发中的应用写在最后参考资料写在开头jQuery，作为一种轻量级的
浮木云随笔小记（2）--静态界面搭建原型设计git页面布局
上次简单记录了浮木云的基本知识，本次我将按照自己掌握的基础知识搭建静态页面。1、创建应用我先根据模版中心的订单管理系统搭建一个简单的Web静态页面，是关于订单管理的页面。因为不涉及其他页面，所以子应用可以直接略过。2、导航配置接下来给自己所创建的应用配置一个导航菜单，导航菜单我就配置一个侧边导航。选择侧边导航，同时对导航的顶部高度、侧边宽度和导航主题进行配置。在子应用配置中将原有的logo图片去掉
《CSS 简易速速上手小册》第5章：CSS 动画与过渡（2024 最新版）江帅帅《CSS 简易速速上手小册》css 前端网络安全数据分析 html javascript web3
文章目录5.1CSS过渡基础：网页的微妙舞步5.1.1基础知识5.1.2重点案例：按钮悬停效果5.1.3拓展案例1：渐变显示导航菜单5.1.4拓展案例2：动态调整元素大小5.2关键帧动画：编排你的网页芭蕾5.2.1基础知识5.2.2重点案例：呼吸效果的背景色变化5.2.3拓展案例1：滚动显示的文字5.2.4拓展案例2：旋转进入的图标5.3实用动画案例分析：优雅地迈出每一步5.3.1基础知识5.3.
《CSS 简易速速上手小册》第1章：CSS 基础入门（2024 最新版）江帅帅《CSS 简易速速上手小册》css html javascript 动画 web3 网站前端
文章目录1.1CSS语法和选择器：挑选你的画笔1.1.1基础知识1.1.2重点案例：创建一个响应式导航菜单1.1.3拓展案例1：为特定链接添加图标1.1.4拓展案例2：创建一个简单的问答折叠面板1.2盒模型的基础：构建你的乐高城堡1.2.1基础知识1.2.2重点案例：创建一个卡片布局1.2.3拓展案例1：垂直居中一个元素1.2.4拓展案例2：创建带有内边距和外边距的流式布局1.3级联、继承和特异性
百度统计的token值和站点ID怎么获取？附图文教程 boke112百科综合其他百度
我们在使用百度统计API调用站点在百度统计的数据等操作时，需要输入我们在百度统计中的token值和站点ID，那么这两个值在百度统计哪里可以获取到？1、开通百度统计数据导出服务并获取Token值1.1开通数据导出服务：打开百度统计官网并登录>>点击顶端导航菜单“管理”>>点击左侧导航菜单“其他设置>数据导出服务”>>勾选“我已经阅读并同意《API服务系统保密协议》”并点击【立即开通】按钮。1.2获取
Vue - Vue3 封装组件(更新中...) 青柠t 笔记前端
组件目录1、穿梭框DataTransfer2、按钮组3、顶部导航菜单4、弹窗组件5、特色按钮5、PDFWordExcel预览插件6、编辑器1、穿梭框DataTransfer示例应用示例组件代码import{ArrowLeft,ArrowRight,Search}from"@element-plus/icons-vue";import{computed,getCurrentInstance,onMo
Vue3中使用element-plus菜单折叠后文字不消失浮生若梦777 vue.js 前端 elementui
今天使用element-plus中国的导航菜单时，发现菜单栏折叠起来时文字不会自动消失，因为element-plus中内置了菜单折叠文字自动消失的，使用collapse=true/false即可，但在实际使用中出现了一下问题：折叠以后文字并没有消失，查资料说是el-menu子标签中不能含有div，但是排查了后也没有使用div，最后发现是因为我的一级导航没有包裹到标签中，因为是直接使用了一个简易的非
java封装继承多态等麦田的设计者 java eclipse jvm c encapsulatopn
最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。 1、final关键字译为：最终的 &
F5与集群的区别 bijian1013 weblogic 集群 F5
http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。 F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似
LeetCode[Math] - #7 Reverse Integer Cwind java 题解 Math LeetCode Algorithm
原题链接：#7 Reverse Integer 要求：按位反转输入的数字例1：输入 x = 123, 返回 321 例2：输入 x = -123, 返回 -321 难度：简单分析：对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但
BufferedOutputStream 周凡杨
首先说一下这个大批量，是指有上千万的数据量。例子：有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！ select t.msisd
linux下模拟按键输入和鼠标被触发 linux
查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 linux/in
ContentProvider初体验肆无忌惮_ ContentProvider
ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte
关于Spring MVC项目（maven）中通过fileupload上传文件 843977358 mybatis spring mvc 修改头像上传文件 upload
Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。 1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定） <!-- 文件上传 start by zhangyd-c --&g
使用svnkit api，纯java操作svn，实现svn提交，更新等操作 aigo svnkit
原文：http://blog.csdn.net/hardwin/article/details/7963318 import java.io.File; import org.apache.log4j.Logger; import org.tmatesoft.svn.core.SVNCommitInfo; import org.tmateso
对比浏览器，casperjs，httpclient的Header信息 alleni123 爬虫 crawler header
@Override protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { String type=req.getParameter("type"); Enumeration es=re
java.io操作 DataInputStream和DataOutputStream基本数据流百合不是茶 java 流
1，java中如果不保存整个对象，只保存类中的属性，那么我们可以使用本篇文章中的方法，如果要保存整个对象先将类实例化后面的文章将详细写到 2，DataInputStream 是java.io包中一个数据输入流允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型。应用程序可以使用数据输出流写入稍后由数据输入流读取的数据。
车辆保险理赔案例 bijian1013 车险
理赔案例：一货运车，运输公司为车辆购买了机动车商业险和交强险，也买了安全生产责任险，运输一车烟花爆竹，在行驶途中发生爆炸，出现车毁、货损、司机亡、炸死一路人、炸毁一间民宅等惨剧，针对这几种情况，该如何赔付。赔付建议和方案：客户所买交强险在这里不起作用，因为交强险的赔付前提是：“机动车发生道路交通意外事故”；如果是交通意外事故引发的爆炸，则优先适用交强险条款进行赔付，不足的部分由商业
学习Spring必学的Java基础知识(5)—注解 bijian1013 java spring
文章来源：http://www.iteye.com/topic/1123823，整理在我的博客有两个目的：一个是原文确实很不错，通俗易懂，督促自已将博主的这一系列关于Spring文章都学完；另一个原因是为免原文被博主删除，在此记录，方便以后查找阅读。有必要对
【Struts2一】Struts2 Hello World bit1129 Hello world
Struts2 Hello World应用的基本步骤创建Struts2的Hello World应用，包括如下几步： 1.配置web.xml 2.创建Action 3.创建struts.xml，配置Action 4.启动web server，通过浏览器访问配置web.xml <?xml version="1.0" encoding="
【Avro二】Avro RPC框架 bit1129 rpc
1. Avro RPC简介 1.1. RPC RPC逻辑上分为二层，一是传输层，负责网络通信；二是协议层，将数据按照一定协议格式打包和解包从序列化方式来看，Apache Thrift 和Google的Protocol Buffers和Avro应该是属于同一个级别的框架，都能跨语言，性能优秀，数据精简，但是Avro的动态模式（不用生成代码，而且性能很好）这个特点让人非常喜欢，比较适合R
lua　set get cookie ronin47 lua cookie
lua: local access_token = ngx.var.cookie_SGAccessToken if access_token then ngx.header["Set-Cookie"] = "SGAccessToken="..access_token.."; path=/;Max-Age=3000" end
java-打印不大于N的质数 bylijinnan java
public class PrimeNumber { /** * 寻找不大于N的质数 */ public static void main(String[] args) { int n=100; PrimeNumber pn=new PrimeNumber(); pn.printPrimeNumber(n); System.out.print
Spring源码学习-PropertyPlaceholderHelper bylijinnan java spring
今天在看Spring 3.0.0.RELEASE的源码，发现PropertyPlaceholderHelper的一个bug 当时觉得奇怪，上网一搜，果然是个bug，不过早就有人发现了，且已经修复：详见： http://forum.spring.io/forum/spring-projects/container/88107-propertyplaceholderhelper-bug
[逻辑与拓扑]布尔逻辑与拓扑结构的结合会产生什么? comsci 拓扑
如果我们已经在一个工作流的节点中嵌入了可以进行逻辑推理的代码,那么成百上千个这样的节点如果组成一个拓扑网络,而这个网络是可以自动遍历的,非线性的拓扑计算模型和节点内部的布尔逻辑处理的结合,会产生什么样的结果呢? 是否可以形成一种新的模糊语言识别和处理模型呢? 大家有兴趣可以试试,用软件搞这些有个好处,就是花钱比较少,就算不成
ITEYE 都换百度推广了 cuisuqiang Google AdSense 百度推广广告外快
以前ITEYE的广告都是谷歌的Google AdSense，现在都换成百度推广了。为什么个人博客设置里面还是Google AdSense呢？都知道Google AdSense不好申请，这在ITEYE上也不是讨论了一两天了，强烈建议ITEYE换掉Google AdSense。至少，用一个好申请的吧。什么时候能从ITEYE上来点外快，哪怕少点
新浪微博技术架构分析 dalan_123 新浪微博架构
新浪微博在短短一年时间内从零发展到五千万用户，我们的基层架构也发展了几个版本。第一版就是是非常快的，我们可以非常快的实现我们的模块。我们看一下技术特点，微博这个产品从架构上来分析，它需要解决的是发表和订阅的问题。我们第一版采用的是推的消息模式，假如说我们一个明星用户他有10万个粉丝，那就是说用户发表一条微博的时候，我们把这个微博消息攒成10万份，这样就是很简单了，第一版的架构实际上就是这两行字。第
玩转ARP攻击 dcj3sjt126com r
我写这片文章只是想让你明白深刻理解某一协议的好处。高手免看。如果有人利用这片文章所做的一切事情，盖不负责。网上关于ARP的资料已经很多了，就不用我都说了。用某一位高手的话来说，“我们能做的事情很多，唯一受限制的是我们的创造力和想象力”。 ARP也是如此。以下讨论的机子有一个要攻击的机子：10.5.4.178 硬件地址：52:54:4C:98
PHP编码规范 dcj3sjt126com 编码规范
一、文件格式 1. 对于只含有 php 代码的文件，我们将在文件结尾处忽略掉 "?>" 。这是为了防止多余的空格或者其它字符影响到代码。例如：<?php$foo = 'foo';2. 缩进应该能够反映出代码的逻辑结果，尽量使用四个空格，禁止使用制表符TAB，因为这样能够保证有跨客户端编程器软件的灵活性。例
linux 脱机管理（nohup） eksliang linux nohup nohup
脱机管理 nohup 转载请出自出处：http://eksliang.iteye.com/blog/2166699 nohup可以让你在脱机或者注销系统后，还能够让工作继续进行。他的语法如下 nohup [命令与参数] --在终端机前台工作 nohup [命令与参数] & --在终端机后台工作但是这个命令需要注意的是，nohup并不支持bash的内置命令，所
BusinessObjects Enterprise Java SDK greemranqq java BO SAP Crystal Reports
最近项目用到oracle_ADF 从SAP/BO 上调用水晶报表，资料比较少，我做一个简单的分享，给和我一样的新手提供更多的便利。首先，我是尝试用JAVA JSP 去访问的。官方API：http://devlibrary.businessobjects.com/BusinessObjectsxi/en/en/BOE_SDK/boesdk_ja
系统负载剧变下的管控策略 iamzhongyong 高并发
假如目前的系统有100台机器，能够支撑每天1亿的点击量（这个就简单比喻一下），然后系统流量剧变了要，我如何应对，系统有那些策略可以处理，这里总结了一下之前的一些做法。 1、水平扩展这个最容易理解，加机器，这样的话对于系统刚刚开始的伸缩性设计要求比较高，能够非常灵活的添加机器，来应对流量的变化。 2、系统分组假如系统服务的业务不同，有优先级高的，有优先级低的，那就让不同的业务调用提前分组
BitTorrent DHT 协议中文翻译 justjavac bit
前言做了一个磁力链接和BT种子的搜索引擎 {Magnet & Torrent}，因此把 DHT 协议重新看了一遍。 BEP: 5Title: DHT ProtocolVersion: 3dec52cb3ae103ce22358e3894b31cad47a6f22bLast-Modified: Tue Apr 2 16:51:45 2013 -070
Ubuntu下Java环境的搭建 macroli java 工作 ubuntu
配置命令：　　$sudo apt-get install ubuntu-restricted-extras 　　再运行如下命令：　　$sudo apt-get install sun-java6-jdk 　　待安装完毕后选择默认Java. 　　$sudo update- alternatives --config java 　　安装过程提示选择，输入“2”即可，然后按回车键确定。
js字符串转日期（兼容IE所有版本） qiaolevip TO Date String IE
/** * 字符串转时间（yyyy-MM-dd HH:mm:ss） * result （分钟） */ stringToDate : function(fDate){ var fullDate = fDate.split(" ")[0].split("-"); var fullTime = fDate.split("
【数据挖掘学习】关联规则算法Apriori的学习与SQL简单实现购物篮分析 superlxw1234 sql 数据挖掘关联规则
关联规则挖掘用于寻找给定数据集中项之间的有趣的关联或相关关系。关联规则揭示了数据项间的未知的依赖关系，根据所挖掘的关联关系，可以从一个数据对象的信息来推断另一个数据对象的信息。例如购物篮分析。牛奶 ⇒ 面包 [支持度：3%，置信度：40%] 支持度3%：意味3%顾客同时购买牛奶和面包。置信度40%：意味购买牛奶的顾客40%也购买面包。规则的支持度和置信度是两个规则兴
Spring 5.0 的系统需求，期待你的反馈 wiselyman spring
Spring 5.0将在2016年发布。Spring5.0将支持JDK 9。 Spring 5.0的特性计划还在工作中，请保持关注，所以作者希望从使用者得到关于Spring 5.0系统需求方面的反馈。

两个很炫的导航菜单（转自中国站长天空）

你可能感兴趣的:(导航菜单)