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

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

 6776  23  查看评论 (0)
用Sass制作响应式导航栏(原创) ie兼容9

更新时间:2017/12/29 下午8:33:04

更新说明:细节优化data-stop='true' : 在手机版上禁止跳转页面

// 插入js代码
$(document).click(function(){
		$('.nav-list').removeClass('open')
	})
	$('.nav-menu,.nav-list').click(function(e){e.stopPropagation()})
	$('nav').find('.nav-menu').click(function(e){
		$('.nav-list').toggleClass('open')
	})

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环境

相关插件-水平导航

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

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

二级菜单导航栏

简单的菜单栏
  水平导航
 29201  152

导航布局菜单

开发web端比用布局,不用导航,赶紧戳一下
  水平导航
 25969  235

jQuery四级菜单导航

轻量级的四级菜单导航,代码简单一看就会。
  水平导航
 1745  15

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

取消回复