用Sass制作响应式导航栏(原创)

所属分类:导航-水平导航

用Sass制作响应式导航栏(原创) ie兼容9

html

<nav> 
  <!-- logo -->
  <div class="nav-logo"> <a href="###"><img src="img/logo.png" alt=""></a> </div>
  
  <!-- 控制menu -->
  <div class="nav-menu"> <span></span> <span></span> <span></span> </div>
  
  <!-- 菜单 -->
  <ul class="nav-list">
    <li> <a href="" class="active">首页
      <div class="carect"></div>
      </a>
      <ul class="menu">
        <li><a href="">不断学习</a></li>
        <li><a href="">不断进步</a></li>
      </ul>
    </li>
    <li><a href="">我是
      <div class="carect"></div>
      </a></li>
    <li><a href="">一个</a></li>
    <li><a href="">热爱</a></li>
    <li><a href="">Web</a></li>
    <li><a href="">前端</a></li>
    <li><a href="">的有</a></li>
    <li><a href="">为青</a></li>
    <li><a href="">年!</a></li>
  </ul>
</nav>

需要一句js控制小屏的菜单栏:

$('nav').find('.nav-menu').click(function(){
	$('.nav-list').toggleClass('open')
})

有基础可在sass文件内修改,需要sass环境

相关插件-水平导航

beautif导航条

多彩背景色左右滑动菜单导航
  水平导航
 16819  95

五彩的带图标的动画菜单

今天我要给大家推荐一款好看的 jquery+css3菜单插件-Colorful CSS3 Animated Navigation Menu。每个菜单插件都设置了一个图标,而我们可以通过设置样式值来选择自己喜欢的图标,很方便。
  水平导航
 14124  23

jQuery宽屏下拉菜单导航 子菜单可自定义

jQuery宽屏下拉菜单导航 子菜单可自定义
  水平导航
 25828  380

jQuery粘性导航插件smint

jQuery粘性导航插件smint
  水平导航
 24355  176

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

取消回复