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

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

 69580  751  查看评论 (112)
分享到微信朋友圈
X
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垂直四级导航

jQuery垂直下拉多级菜单
  垂直导航
 28382  279

jquery下拉菜单导航

jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局,通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果
  垂直导航
 39432  300

Css多级侧边栏导航

纯Css多级侧边栏导航
  垂直导航
 33979  315

最强大的手机侧栏

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

讨论这个项目(112)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    qzuser 0
    2019/10/8 13:25:15
    感谢分享
        挽江.0
        2020/2/19 11:34:15
        正好需要
    回复
    齿轮 0
    2019/8/28 22:37:35
    这个插件怎么添加自己从网上下的字体图标 回复
    GeraltX 0
    2019/8/21 11:14:55
    刚好需要这个,好评 回复
    __未、完成。 0
    2019/7/7 15:17:15
    感谢分享
        ●^●??0
        2019/7/15 15:54:10
        感谢分享
    回复
    Mr. 豆 - 0
    2019/6/11 16:49:43
    风丶楠 【十月】 0
    2019/5/15 2:21:22
    waltxia 0
    2019/4/25 23:03:50
    很不错的左侧导航
        三里清风三里路0
        2019/6/24 14:12:00
        是很不错
    回复
    Mykaaa 0
    2019/4/2 11:00:30
    小-E 0
    2019/3/14 11:23:46
    如何设置成自己的样式呢
        相忘春秋,决堤江湖0
        2019/4/1 10:05:43
        在iconfont上下载自己的图标就可以改变
    回复
    纵马. 0
    2019/2/12 17:50:56
    字体图标用的什么网站搞的 在线等回复 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复