jQuery响应式网站导航菜单栏代码 点击下拉收缩效果

92建站   菜单导航   2023-03-06   收藏本文
响应式网站导航菜单

特效编号:C33

编码格式:UTF8

布局形式:响应式

下载对象:积分会员 (1积分)

旺铺招租1 旺铺招租2 旺铺招租3

这款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>

效果截图:

响应式网站导航菜单

旺铺招租4
免责声明:本资源仅供研究/学习使用,商用请找版权人;严禁用于违法犯罪活动,一切后果自负;若侵权请联系客服删除。
旺铺招租5
展开