jQuery后台适用扁平化伸缩导航(原创)

所属分类:导航-垂直导航,手风琴菜单

jQuery后台适用扁平化伸缩导航(原创) ie兼容8

使用方法

本着简单 易用 美观的原则,使用时分别引入nav.css、 jquey.min.js、iconfont.css、nav.js即可导航基本结构

<div class="nav">
        <div class="nav-top">
            <div id="mini"><img src="伸缩按钮图片地址" ></div>
        </div>
        <ul>
            <li class="nav-item">
                <a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>菜单名称</span><i class="my-icon nav-more"></i></a>
                <ul>
                    <li><a href="javascript:;"><span>导航1</span></a></li>
                    <li><a href="javascript:;"><span>导航2</span></a></li>
                </ul>
            </li>
        </ul>
    </div>

 更换图标可使用阿里iconfont 自行更换导航图标更换位置在nav.css文件中有注释说明注意要将html代码中的my-icon 更换为自己定义的类名.注意在自己的font项目里添加一个右箭头.nav 父级元素需逐级设置

html,body,{height:100%}
相关插件-垂直导航,手风琴菜单

侧边抽屉_纯CSS3抽屉式滑动侧边栏菜单设计

该侧边栏在鼠标滑过菜单项时,会以平滑的方式滑出相应的主菜单,就像拉开抽屉的效果,非常的时尚。
  垂直导航
 9695  40

jquery天猫左边导航CSS3效果

jquery天猫左边导航CSS3效果,向下滚动导航折叠效果实现
  垂直导航
 17798  42

jQuery三维立体菜单插件Meny

jQuery三维立体菜单插件Meny,一款可以旋转的3D导航栏,支持移动设备的触摸事件。
  垂直导航
 10316  98

页面左侧下拉菜单

用jquery写的左侧下拉菜单
  垂直导航
 37261  185

讨论这个项目(23)回答他人问题或分享插件使用方法奖励jQ币

    hubins 0
    2017/11/17 16:24:39
    这个找了很久啊! 回复
    逆光飞羽 0
    2017/11/17 15:17:06

    确定是自己原创的??而不是借鉴了别人,截取了sidebar部分?

        小闰土0
        2017/11/17 22:21:23
        以前看到这种样式很喜欢 又找不来,就自己做了一个.html结构 css js部分 确实是自己写的.现在我项目里的已经又改了一点.我项目做完 会把nav-top的管理员信息部分   top菜单部分  content内容部分包括一些下拉菜单 开关按钮UI 都一起发出来.
    回复
    莱蒙 0
    2017/11/14 11:12:59

    导航顶部的回拉菜单如何实现的

        小闰土0
        2017/11/16 8:22:24
        新增一个 .mini类    来定义导航收缩后的样式当点击顶部按钮     增加或删除 .mini
    回复
    PL阿PL 0
    2017/10/28 14:14:04
    我也需要金币
        小闰土0
        2017/10/28 21:38:29

        我也是刚知道  做个东西发上来卖  还是挺好的啊

    回复
    微笑向暖 0
    2017/10/26 22:46:55

    这个上面自己加三级导航好加吗

        小闰土0
        2017/10/27 17:14:03

        如果是220px定宽  当然好加 

        因为还要考虑宽度收缩时候的样式和操作的便捷性   所以不建议加的

        如果确实有这个需求的话 

        我抽空再重新单独做一个支持3级的.

        不过时间就不确定了,因为在这里上传完单审核就得快一个星期.

        而且我肯定要卖的更贵~~

    回复
    clarezzx 0
    2017/10/25 14:45:04

    这个怎么默认把所有一级菜单都打开?

        小闰土1
        2017/10/25 20:47:13
        <li class="nav-item">
        ...
        </li>

        这个带有nav-item的是一个菜单

        如果默认要打开  该li标签增加 nav-show类  即可  修改后如下

        <li class="nav-item nav-show">
        ...
        <>

        可以

    回复
    0
    2017/10/23 15:31:03

    需要金币

        小闰土0
        2017/10/23 21:11:44

        我需要JQ币  去下载其他人的插件啊

    回复
    简单 0
    2017/10/20 17:33:27

    能改成支持多个打开么

        小闰土0
        2017/10/20 21:38:03
        js目录下的nav.js   第九行.siblings('li').removeClass('nav-show')删掉  保留后面的分号你试试
        小闰土1
        2017/10/20 21:43:18

        不好意思 我试了试 搞错了

        把第七行

        $('.nav-item').children('ul').slideUp(300);

        全部删除  就可以了

    回复
    耶耶耶 0
    2017/10/19 10:35:53

    这个感觉还蛮实用的

    回复
    水中影子 0
    2017/10/17 16:40:12

    支持三级菜单吗?

        小闰土0
        2017/10/17 18:12:46

        这导航本来是我做出来自己用的,因为没需求  所以暂时不支持三级的呢

        卟灵卟灵哒0
        2017/10/18 16:52:13

        不支持的

        微笑向暖0
        2017/10/26 22:47:28

        自己稍作修改应该就可以

        绘Θ昌昼dé文??小 青年0
        2017/11/7 10:24:51

        自己修改修改应该可以的

    回复
取消回复