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

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

 25468  272  查看评论 (72)
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原生jsrem适配左侧竖排导航

样式和效果还可以的使用的rem适配兼容ie
  垂直导航
 8323  56

超酷的SVG左侧导航栏特效

超酷的SVG左侧导航栏特效(Cool SVG left navigation bar effects)
  垂直导航
 13118  124

Css多级侧边栏导航

纯Css多级侧边栏导航
  垂直导航
 8501  42

手机端jQuery响应式菜单栏

手机端响应式菜单栏,请把浏览器宽度调整到640像素查看效果
  垂直导航
 23195  71

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

    华安 0
    2018/4/13 14:07:38
    能不能详细讲一下怎么修改图标啊?我弄了两天了都没弄好。我在阿里iconfont上下得图标添加进去后显示框框 回复
    森七 0
    2018/4/12 10:15:30
    我也是河南许昌的。哈哈哈。像作者这种的效果才是项目中经常遇到的,给你点赞哦 回复
    l_o_v_e 0
    2018/4/10 14:03:20
    很好,可以分享吗?积分还不够用。 回复
    尘埃 0
    2018/2/23 16:39:06
    cnlis 0
    2018/1/22 10:41:03

    ie11,不支持,不知道什么原因!!!

        西瓜0
        2018/1/22 10:43:18

        我这里测试,没有问题。

    回复
    石灰粉 0
    2018/1/8 9:25:40

    设计器跟网站调试的样式不一样

    回复
    Shira77 0
    2018/1/4 16:29:11

    你好,我是初学者,这个对我特别有用,请问,第一,我想修改图标,大概都修改哪里呢?第二,我想点击的时候,右边出现自己的界面,有类似的代码供我学习吗?

        小闰土0
        2018/1/7 22:13:32

        你看前面的评论  已经说过你这几个问题的

        1 关于修改图标

        你可以直接引入Awesome 图标库

        <i class="fa fa-bars"></i>
        <i class="fa fa-vcard"></i>

        这样就可以了

        之前的my_icon 是我在iconfont自定义的图标库名字.用Awesome 图标库的话 可以给之前 i 里的class 都删掉 CSS 文件里的 .icon_1 等定义也删掉 就行

        小闰土3
        2018/1/7 22:14:36

        2关于你说的右边出现自己界面

        这个是基础的页面布局问题

        <body>
            <div class="container">
                <div class="nav">
                    这里放导航代码
                </div>
                <div class="main">
                    这里放网页内容代码
                </div>
            </div>
        </body>

        上面是HTML代码

        .container{
            display: flex;
            width: 100%;
            min-height: 100%;
        }
        .nav{
            height: auto !important;
            width: 220px;
            min-height: 100%;
        }
        .main{
            width: 100%;
            min-height: 100%;
            height: auto !important;
        }

        这个是CSS 代码

        Shira770
        2018/1/8 11:27:50

        非常谢谢!第一个问题顺利解决了。第二个问题,我知道怎么布局,但是不知道点击左边导航栏第二级的时候,右边对应出现自己的页面,这又分为两种情况:

        1,页面路径改变。

        2,页面路径不变。请问针对我的第二个问题,您有比较好的学习资源吗?再次感谢

        小闰土1
        2018/1/13 17:18:13
        后台一般他们用的都是 frame做的  我的方法是 右边的内容做个tab标签点击左边导航   判断是否已存在这个标签  如果存在 就跳转到这个标签如果不存在   AJAX获取导航链接页面内容  把内容写入该标签对应的容器 他们也有用frame 做多标签管理的     这样做  页面路径是一直在后台首页上的如果希望刷新后保留原来标签页 可以通过url的hash来操作.关于学习资源.我也不是什么高手,自己只要学了基础,每次尽量想办法去实现自己想要的功能,总会有进步的
        小闰土0
        2018/1/13 17:24:49
        另外,像我这种全部用ajax 获取页面   是个大坑,最好别用这种方法,填起来太麻烦了.  直接用frame 就好
    回复
    阿祥丶 0
    2018/1/3 18:12:53

    二级菜单的内容过多,超出屏幕部分颜色不是黑色,咋解决

        小闰土0
        2018/1/7 22:12:43

        需要从html   body 开始 到.nav   逐级设置高度为100%的

    回复
    35 0
    2018/1/3 16:38:36
    Snail-Design 0
    2018/1/3 11:37:01

    亲,看到请回复,我想要三级菜单,今天在线等,帮忙做一下,可付费

    回复
取消回复