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

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

 14304  178  查看评论 (66)
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结合jQuery侧边导航酷炫展开效果

鼠标移入侧边栏,二级菜单3D展开 鼠标hover背景变色,鼠标移入二维码图片背景变色
  垂直导航
 18162  141

jQuery后台左侧菜单导航

jQuery导航菜单 适用于后台网站侧边多级下拉导航菜单
  垂直导航
 40220  281

最强大的手机侧栏

html5 css3手机侧栏侧栏,完美兼容移动端开发
  垂直导航
 19773  314

jquery淘宝电器左侧分类菜单

jquery淘宝电器左侧分类菜单,简单的导航悬停展示
  垂直导航
 14307  90

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

    石灰粉 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

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

    回复
    marsxuc 0
    2017/12/26 21:12:21

    这个可以使用在移动开发吗

        小闰土0
        2017/12/26 23:29:17

        不合适的

        这个一般用于PC端的后台.

    回复
    五味先生 0
    2017/12/25 20:08:00

    你好,可以优化一下吗?头部 ,栏目导航,登录区域,底部区域,内容区域 自适应,最近在做,但是不会这个css3 ,麻烦了

        小闰土1
        2017/12/26 0:01:11

        你看一下12月7号回复的那个内容

        是分成上  左 右三部分的

        这个一般用到后台使用的

        你说这个  应该分为 头 内容 尾部 三部分   登录 导航 放头部   内容放中间   footer方法尾部

    回复
    op 0
    2017/12/23 15:30:59

    怎么下载

        小闰土0
        2017/12/26 0:02:12

        要jq币 可以下载

        如果没有 可以在个人中心签到

        连续签到3天以上  每天签到可以给一个

    回复
    嘴角上扬 0
    2017/12/22 19:45:46

    居然是河南省信阳市息县,老乡啊

        op0
        2017/12/23 15:30:10

        6666

        小闰土0
        2017/12/26 0:02:58

        我不是信阳的  我许昌的    这的IP库不准   天天给我怼到信阳或者开封

    回复
    Envy 0
    2017/12/22 9:40:50
    可以的,之前还不知道iconfont可以弄成图标库呢
        Shira770
        2018/1/4 16:46:01

        请问,怎么将自己的图标弄成图标库使用呢?

    回复
取消回复