gpt4 book ai didi

javascript - 如何让我的导航栏响应?

转载 作者:行者123 更新时间:2023-11-27 23:32:16 25 4
gpt4 key购买 nike

我在 codepen 有这个导航栏:http://codepen.io/DogburnDesign/pen/zymID .一切都很好,但我意识到它没有响应。我在制作网站方面很有经验,但我对这种响应式的东西还是陌生的。有帮助的人吗?

谢谢。这是代码:

HTML:

    <div id="bg"></div>
<section>
<nav>
<div></div>
<ul>
<li data-xcoord="0px" class="active">Home</li>
<li data-xcoord="160px">About</li>
<li data-xcoord="320px">Contact</li>
<li data-xcoord="480px">Store</li>
</ul>
</nav>
</section>

CSS:

#bg{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background: #38a8d1;
background: -moz-linear-gradient(top, #38a8d1 0%, #34bc9a 36%, #34bc9a 57%, #8645f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#38a8d1), color-stop(36%,#34bc9a), color-stop(57%,#34bc9a), color-stop(100%,#8645f7));
background: -webkit-linear-gradient(top, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -o-linear-gradient(top, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -ms-linear-gradient(top, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: linear-gradient(to bottom, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a8d1', endColorstr='#8645f7',GradientType=0 );
}

section{
position:relative;
width:640px;
margin:50px auto;
}
nav{
width:100%;
}
nav ul li{
display:inline-block;
list-style:none;
width:160px;
text-align:center;
font-family:Helvetica, sans-serif;
border: 1px dashed rgba(255,255,255, 0);
color:#fff;
padding:10px 0 10px 0;
margin:-1px -5px -1px -1px;
cursor:pointer;
transition:all .2s;
-webkit-transition:all .2s;
}
nav ul li:hover{
/*border:1px dashed #fff;*/
background:rgba(255,255,255,.1);
}
nav ul{
border: 1px solid #fff;
position:absolute;
width:100%;
padding:0;
z-index:100;
}
nav div{
position:absolute;
left:0;
top:16px;
background: #fff;
width:162px;
height:40px;
z-index:99;
}
.active{
color:rgba(55, 186, 177, 1);
}

最后但同样重要的是,JS:

$("nav ul li").click(function(){
var xcoord = $(this).data("xcoord");

$("nav div").stop().animate({marginLeft:xcoord}, 500, "easeInOutExpo");
$(this).addClass("active");
$("nav ul li").not(this).removeClass("active");

});

最佳答案

您需要使用媒体查询。 请参阅下面的工作示例 (您应该检查全屏版本并调整浏览器宽度)

如果您创建响应式布局,那么考虑百分比会更容易。您没有创建 640px 宽的元素,而是创建了 100% 宽但最大宽度为 640px 的元素。因此,如果用户的视口(viewport)宽度大于 640px,则元素为 640px,如果视口(viewport)宽度小于 640px,则元素为宽度的 x%。我的观点是你需要考虑响应式,为每 10 像素的屏幕宽度创建数千个媒体查询不是一个好习惯

我还建议你使用一些响应式 css 框架,即 Bootstrap 3

$("nav ul li").click(function(){
var xcoord = $(this).data("xcoord");

$("nav div").stop().animate({marginLeft:xcoord}, 500, "easeInOutExpo");
$(this).addClass("active");
$("nav ul li").not(this).removeClass("active");

});
#bg{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background: #38a8d1;
background: -moz-linear-gradient(top, #38a8d1 0%, #34bc9a 36%, #34bc9a 57%, #8645f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#38a8d1), color-stop(36%,#34bc9a), color-stop(57%,#34bc9a), color-stop(100%,#8645f7));
background: -webkit-linear-gradient(top, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -o-linear-gradient(top, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -ms-linear-gradient(top, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: linear-gradient(to bottom, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a8d1', endColorstr='#8645f7',GradientType=0 );
}

section{
position:relative;
width: 100%;
max-width:640px;
margin:50px auto;
}
nav{
width:100%;
}
nav ul li{
display:inline-block;
list-style:none;
width:160px;
text-align:center;
font-family:Helvetica, sans-serif;
border: 1px dashed rgba(255,255,255, 0);
color:#fff;
padding:10px 0 10px 0;
margin:-1px -5px -1px -1px;
cursor:pointer;
transition:color .2s, background .2s;
-webkit-transition:color .2s, background .2s;
}
nav ul li:not(.active):hover{
/*border:1px dashed #fff;*/
background:rgba(255,255,255,.1);
}
nav ul{
border: 1px solid #fff;
position:absolute;
width:100%;
padding:0;
z-index:100;
}
.active{
color:rgba(55, 186, 177, 1);
background: #fff;
}

@media only screen and (max-width : 720px) {
nav ul{
width: 80%;
left: 10%;
}
nav ul li{
display: block;
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="bg"></div>
<section>
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
</nav>
</section>

解决方案 2 不需要媒体查询并保持列表元素 float 。 请参阅下面的解决方案

$("nav ul li").click(function(){
var xcoord = $(this).data("xcoord");

$("nav div").stop().animate({marginLeft:xcoord}, 500, "easeInOutExpo");
$(this).addClass("active");
$("nav ul li").not(this).removeClass("active");

});
#bg{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background: #38a8d1;
background: -moz-linear-gradient(top, #38a8d1 0%, #34bc9a 36%, #34bc9a 57%, #8645f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#38a8d1), color-stop(36%,#34bc9a), color-stop(57%,#34bc9a), color-stop(100%,#8645f7));
background: -webkit-linear-gradient(top, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -o-linear-gradient(top, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -ms-linear-gradient(top, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: linear-gradient(to bottom, #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a8d1', endColorstr='#8645f7',GradientType=0 );
}

section{
position:relative;
width: 100%;
max-width:640px;
margin:50px auto;
}
nav{
width:100%;
}
nav ul li{
display:inline-block;
list-style:none;
width:25%;
text-align:center;
font-family:Helvetica, sans-serif;
border: 1px dashed rgba(255,255,255, 0);
color:#fff;
padding:10px 0 10px 0;
margin:-1px -5px -1px -1px;
cursor:pointer;
transition:color .2s, background .2s;
-webkit-transition:color .2s, background .2s;
}
nav ul li:not(.active):hover{
/*border:1px dashed #fff;*/
background:rgba(255,255,255,.1);
}
nav ul{
border: 1px solid #fff;
position:absolute;
width:100%;
padding:0;
z-index:100;
}
.active{
color:rgba(55, 186, 177, 1);
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg"></div>
<section>
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
</nav>
</section>

关于javascript - 如何让我的导航栏响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35241268/

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