gpt4 book ai didi

jquery - 响应式导航在响应模式下激活时搞砸了,然后再次调整大小

转载 作者:行者123 更新时间:2023-11-28 06:00:25 25 4
gpt4 key购买 nike

我正在尝试构建一个响应式导航,但当我执行以下步骤时,它似乎会变得一团糟:1.调整导航到小于940px2.激活菜单3.然后我再次调整浏览器大小超过940px。4.现在菜单不再内联。一切都搞砸了。

这是我构建的代码。同样在代码笔上:https://codepen.io/rezasan/pen/YqjNMgHTML:

<header>
<nav class="clearfix">
<div class="pullmenu">
</div>
<ul class="clearfix">
<li><a>About</a></li>
<li><a>Services</a></li>
<li><a>Products</a></li>
</ul>
<div class="logo">
<a><img src="img/site_assets/logo_nav.png"></a>
</div>
<ul>
<li><a>Media</a></li>
<li><a>News</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
</header>

CSS:

    header {
position: fixed;
z-index: 1;
width: 100%;
}

.logo {
display: inline-block;
vertical-align: top;
}

.logo img {
width: 145px;
}

.pullmenu {
display: none;
}

nav {
height: 110px;
width: 100%;
background: #fff;
letter-spacing: 0.2em;
font-family: 'brandon-grotesque';
font-weight: 500;
position: relative;
text-transform: uppercase;
}

nav ul {
padding: 0;
margin: 0 auto;
display: inline-block;
}

nav li {
display: inline;
float: left;
}

nav a {
display: inline-block;
text-align: center;
line-height: 110px;
padding: 0px 20px;
font-size: 8pt;
}

nav a:hover {
text-decoration: underline;
}

@media screen and (max-width: 940px) {
.logo {
display: none;
}
nav {
height: auto;
}
nav ul {
width: 100%;
display: none;
height: auto;
}
nav li {
width: 100%;
float: none;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
}
nav ul:last-child li:last-child a {
border-bottom: none;
}
nav a {
width: 100%;
text-indent: 25px;
}
.pullmenu {
display: block;
background: gray;
height: 110px;
width: 100%;
position: relative;
}
}

JQuery:

$(function() {
var pull = $('.pullmenu');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});

$(window).resize(function() {
var w = $(window).width();
if (w > 940 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});

请参阅附件中的困惑对齐。

enter image description here

最佳答案

找到解决方案。这是由于 slideToggle 在调整回正常屏幕时将两个 ul 更改为显示为一个 block 。解决方案是创建一个将两个 ul 包装在一起的 div,并将该 div 用作要控制的目标。然后媒体查询将在浏览器宽度较短时隐藏该类。最后滑动切换 div。

http://codepen.io/rezasan/pen/YqjNMg

HTML

    <header>
<nav class="clearfix">
<div class="pullmenu">MENU
</div>
<div class="nav-group">
<ul class="clearfix">
<li><a>About</a></li>
<li><a>Services</a></li>
<li><a>Products</a></li>
</ul>
<div class="logo"><a><img src="http://placehold.it/200x100"></a></div>
<ul>
<li><a>Media</a></li>
<li><a>News</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</nav>
</header>

CSS

    header{
position: fixed;
z-index: 1;
width: 100%;
}

.logo{
display: inline-block;
vertical-align: top;
}

.logo img{
width: 145px;

}

.pullmenu{
display: none;
}

nav {
height: 110px;
width: 100%;
background: #fff;
letter-spacing: 0.2em;
font-family: 'brandon-grotesque';
font-weight: 500;
position: relative;
text-transform: uppercase;
}

nav ul {
padding: 0;
margin: 0 auto;
display: inline-block;
}

nav li {
display: inline;
float: left;
}

nav a {
display: inline-block;
text-align: center;
line-height: 110px;
padding: 0px 20px;
font-size: 8pt;
}

nav a:hover{
text-decoration: underline;
}

@media screen and (max-width: 940px) {
.logo{
display: none;
}
nav {
height: auto;
}
nav ul {
width: 100%;
height: auto;
}

.nav-group{
display:none;
}

nav li {
width: 100%;
float: none;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
}

nav ul:last-child li:last-child a {
border-bottom: none;
}

nav a {
width: 100%;
text-indent: 25px;
}
.pullmenu {
display: block;
background: gray;
height: 110px;
width: 100%;
position: relative;
}
}

JQuery

    $(function() {
var pull = $('.pullmenu');
menu = $('.nav-group');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});

$(window).resize(function(){
var w = $(window).width();
if(w > 940 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});

关于jquery - 响应式导航在响应模式下激活时搞砸了,然后再次调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36786773/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com