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

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

 30009  309  查看评论 (79)
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%}
相关插件-垂直导航,手风琴菜单

jQuery条件锚点导航

自动定位锚点导航
  垂直导航
 9684  40

手机端jQuery响应式菜单栏

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

jQuery旅游网站导航

简单的旅游网站导航,加入了ie6对png的支持
  垂直导航
 4922  26

jQuery后台左侧菜单导航

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

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

    阳_光_季_节 0
    2018/7/22 12:32:14
    好久不见 1
    2018/6/26 15:45:09
    后台一般他们用的都是 frame做的 我的方法是 右边的内容做个tab标签点击左边导航 判断是否已存在这个标签 如果存在 就跳转到这个标签如果不存在 AJAX获取导航链接页面内容 把内容写入该标签对应的容器 他们也有用frame 做多标签管理的 这样做 页面路径是一直在后台首页上的如果希望刷新后保留原来标签页 可以通过url的hash来操作.关于学习资源.我也不是什么高手,自己只要学了基础,每次尽量想办法去实现自己想要的功能,总会有进步的 回复
    yiluo521wzh 0
    2018/6/24 13:02:04
    四十大盗 0
    2018/6/23 14:29:07
    这个和bootsrap整合起来不能用啊 大佬能给个解决方案么 回复
    0
    2018/6/15 15:44:58
    有个问题不知道怎么解决,菜单动态生成string,用$("").html()或者$("").append()添加后,二级菜单不能打开 回复
    スイカ 0
    2018/6/5 10:47:16
    华安 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
    不错,怎么用
        别理我丿0
        2018/6/1 14:40:00
        下载下来就可以用了
    回复
取消回复