可展开收缩的图标导航菜单

来源:https://www.sucaihuo.com/js/2537.html 2017-07-25 18:58浏览(3713) 收藏

一款可展开收缩的图标导航菜单代码,点击菜单图标可以展开或者收缩图标菜单,菜单展开后的菜单图标也有90度的旋转,每个图标导航都有相应的鼠标悬停效果,当然啦,小伙伴们也可以自行添加图标的说明文字等,喜欢的童鞋请收下吧。
可展开收缩的图标导航菜单
分类:导航菜单 > 图标导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需远程调用一个字体图标库font-awesome,并引入一个本地CSS样式文件,代码如下:

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,机构很简单,多个i标签放入不同图标的导航菜单,可以自由增减的,代码如下:

<h1>可展开收缩的图标导航菜单</h1>
<nav>
  <div class="nav-inner">
    <div class="links"><i class="fa fa-bars nav-toggle"></i><i class="fa fa-home"></i><i class="fa fa-user"></i><i class="fa fa-calendar-plus-o"></i><i class="fa fa-envelope"></i><i class="fa fa-cogs"></i></div>
  </div>
</nav>

页面的底部,需远程调用jQuery库,并设置好图标导航的点击事件响应,代码如下:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>
<script type="text/javascript">
$('.nav-toggle').on('click', function(){
  $('.nav-inner').toggleClass('open');
});
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2