网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是基于jQuery和css flexbox实现很酷的网站菜单导航,点击固定的汉堡按钮可以让菜单从网页顶部向下滑动全屏显示导航菜单。
1.在页面中加载样式文件。
<link rel="stylesheet" href="style.css">
2. 在html页面中添加汉堡切换按钮和导航列表代码。
<header>
<div class="menu-toggler">
<div class="bar half top"></div>
<div class="bar"></div>
<div class="bar half bottom"></div>
</div>
<nav>
<ul class="nav-list">
<li>
<a href="#" class="nav-link">首页</a>
</li>
<li>
<a href="#" class="nav-link">新闻资讯</a>
</li>
<li>
<a href="#" class="nav-link">联系我们</a>
</li>
<li>
<a href="#" class="nav-link">关于我们</a>
</li>
</ul>
</nav>
</header>
3.添加jquery代码
<script src="jquery.slim.min.js"></script>
$(document).ready(function () {
$('.menu-toggler').on('click', function () {
$(this).toggleClass('open');
$('nav').toggleClass('open');
});
$('nav .nav-link').on('click', function () {
$('.menu-toggler').removeClass('open');
$('nav').removeClass('open');
});
});
转载请注明来源:jQuery带炫酷动画全屏菜单导航特效插件
本文永久链接地址:https://www.moyouyouw.cn/code/812.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论