jQuery响应式网站导航菜单栏代码
   0 关注度:

简单实用的jQuery响应式网站导航菜单栏代码,自适应不同浏览器宽度,是一款电脑和手机移动端通用的导航栏代码。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//用于判断导航栏的状态
var toggle = true;

//导航栏按钮
$('.btnImg').click(function() {
	if (toggle) {
		$('.btnImg').css("border", "1px solid #b0ccf3");
		toggle = false
	} else {
		$('.btnImg').css("border", "1px solid transparent");
		toggle = true;
	}
	$(".show").slideToggle(300);
})

//窗口大小发生改变
$(window).resize(function() {
	//获取窗口宽度
	var windSize = $(window).width();

	if (windSize > 576) {
		$(".show").slideDown(0);
	} else {
		$(".show").slideUp(0);
	}
});
</script>

 

TAG标签:导航菜单(6)响应式菜单(1)自适应菜单(1)

  • 本地下载
  • 相关模板

    jQuery仿百度知道宽屏下拉导航菜单代码

    jQuery垂直手风琴展开收缩多级菜单代码

    CSS3鼠标悬停3D图标菜单动画展开特效

    jQuery左侧固定多级导航下拉菜单代码

    CSS3宽屏菜单导航带下拉二级菜单代码

    添加微信
    添加微信,免费咨询

    15205695834

    新手指南支付购买售后服务关于我们版权合规
    合肥秀站网络科技有限公司
    Copyright 2002-2022 麦站 版权所有
    皖ICP备12018676号 网站地图