如何使导航按钮移动响应和按顺序折叠？ [英] How to Make Navigation Buttons Mobile-Responsive and Collapse in Order?
本文介绍了如何使导航按钮移动响应和按顺序折叠？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在尝试使用不同方法工作数小时，以使我的导航按钮移动响应，并以指定的垂直顺序折叠。一旦屏幕尺寸缩小（大约500px），我希望导航按钮在两个徽标下面的垂直列中折叠。如何修复我的代码以实现此目的？
.container-fluid {border：1px solid＃000000;最大宽度：1600px; overflow：hidden;}。wrap {/ * background-color：yellow; * / / * overflow：hidden; * /}。Logos {width：312px;显示：inline-block; / * background-color：blue; * /} / * .Logos img {max-width：300px;身高：自动; } * /。nav.wrap.one {display：inline-block; / * background-color：green; * / float：right; margin-top：25px;} ul.navigation {font：bold 11pxHelvetica Neue，Helvetica，Arial，sans-serif; / * text-align center; * / / * border：1px纯绿色; * / / * overflow：hidden; * /}。背景：线性梯度（＃49708f，＃293f50）; border-right：1px solid rgba（0，0，0，.3）;颜色：#fff;填充：12px 20px; text-decoration：none;}。navigation a：hover {background：＃314b0; box-shadow：inset 0 0 10px 1px rgba（0，0，0，.3）;}。导航li：first-child a {border-radius：4px 0 0 4px;}。navigation li：last-child a { border-right：0; border-radius：0 4px 4px 0;}。row.two {background-image：url（https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg）; background-position：绝对; background-size：cover;背景重复：不重复;最大宽度：100％; height：550px; margin：auto;}。floater.box {background-color：rgba（255，255，255，.40）; border-radius：10px; / *不透明度：.45; * /最大宽度：75％; height：200px;位置：绝对;顶部：50％;左：0;正确：0;保证金：汽车; overflow：hidden;}。form-search {margin：0 auto; text-align：center; font：bold 13px sans-serif; max-width：325px; position：relative;}。form-search input {width：230px;盒子尺寸：边框; border-bottom-left-radius：2px; border-left-left-radius：2px; background-color：#ffffff; box-shadow：1px 2px 4px 0 rgba（0，0，0，0.08）; padding：14px 15px 14px 40px; border：1px solid＃b6c3cd; ; border-right：0;颜色：＃4E565C;概要：无; margin-top：70px; -webkit-appearance：none;}。form-search button {border-bottom-right-radius：2px; border-right-right-radius：2px; background-color：＃6caee0; box-shadow：1px 2px 4px 0 rgba（0，0，0，0.08）;颜色：#ffffff; padding：15px 22px; margin-left：-4px;光标：指针; border：none; outline：none;}。form-search i {position：absolute; top：15px; left：20px; font-size：16px; color：＃80A3BD;} / * Placeholder color * /。form-search input :: webkit-input-placeholder {color：＃879097;}。form-search input :: - moz-placeholder {color：＃879097; opacity：1;}。form-search input：-ms-input-placeholder {color：＃879097;}。nav.wrap.two {display：inline-block; text-align：center;宽度：100％; } < div class = 容器流体> <！ - Top Box - > < div class =wrap> < div class =Logos> < img src =https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpgwidth =150height =82class =img-responsive/> < img src =https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpgwidth =150height =82class =img-responsive/> < / DIV> < div class =nav wrap one> <！ - 导航按钮 - > < ul class =navigation> < li id =NAV-ONE>< a href =＃>登入< / a>< / li> < li id =NAV-TWO>< a href =＃>购买家庭< / a>< / li> < li id =NAV-THREE>< a href =＃> SELL A HOME< / a>< / li> < li id =NAV-FOUR>< a href =＃>联系我们< / a>< / li> < / UL> < / DIV> < / DIV> <！ - 中间框 - > < div class =row two> < DIV> < div class =floater box> < form class =form-searchmethod =getaction =＃> < input type =searchname =searchplaceholder =我正在寻找..> <按钮类型=提交>搜索< /按钮> < i class =fa fa-search>< / i> < /形式> < / DIV> < / DIV> < / div>< / div><！ - 底部框 - >< div class =row three> < div class =nav wrap two> <！ - 导航按钮 - > < ul class =navigation> < li id =NAV-A>< a href =＃> MY LISTINGS< / a>< / li> < li id =NAV-B>< a href =＃>社群服务< / a>< / li> < li id =NAV-C>< a href =＃> PROPERTIES< / a>< / li> < / UL> < / div>< / div>
p>以下是我的CodePen的链接： https://codepen.io/IDCoder/full/rGWeEE /
解决方案
CSS就是自然顺序，自然位置，自然风格......我的意思是你的代码不是很自然的，你可以在这里看到：
.navigation li {
display：inline-块;
}
。导航a {
padding：12px 20px;
}
我想把注意力集中在这些属性上，因为我们在这里说： p>
< a> 这个男人里面的元素 - > <$ c $ < a
href =＃>登入< />< a>< / li> ），是的你！即使你在他内部，你也会变得更大！
嗯，在现实生活中，我们不能把更大的东西放进更小的空间。在现实生活中，CSS会发生什么： 更小的东西变成更大的东西
所以如果我们做出这个改变： .navigation li {
display：inline-block;
padding：12px 20px;
}
。导航a {
/ *我们改变了谁比谁更大* /
}
它需要一个自然顺序（因为现在
.navigation li {
display ：inline-block;
padding：12px 20px;
背景：线性渐变（＃49708f，＃293f50）;
背景：＃395870;
border-right：1px solid rgba（0，0，0，.3）;
}
。导航a {
颜色：#fff;
text-decoration：none;
}
更多
我在玩，当屏幕很小时，我发现这种很酷的方式来包装，我认为它很酷：
@media all和（max-width：500px）{
ul.navigation {
display：flex;
flex-wrap：wrap;
justify-content：flex-end;
$ / code> 另外，请记住，当您想进行响应式设计您需要将 meta：viewport 放入您的html头部：
< meta name =viewport内容=width = device-width，user-scalable = no，initial-scale = 1.0，maximum-scale = 1.0，minimum-scale = 1.0>
I have been trying for hours with different methods to get my navigation buttons to be mobile-responsive and collapse in a specified vertical order. I want the nav buttons to collapse in a vertical column below the two logos, once the screen size is shrunken (to around 500px). How do I fix my code to achieve this?
.container-fluid {
border: 1px solid #000000;
max-width: 1600px;
overflow: hidden;
}
.wrap {
/*background-color: yellow;*/
/*overflow: hidden;*/
}
.Logos {
width: 312px;
display: inline-block;
/*background-color: blue;*/
}
/*
.Logos img{
max-width: 300px;
height: auto;
}
*/
.nav.wrap.one {
display: inline-block;
/*background-color: green;*/
float: right;
margin-top: 25px;
}
ul.navigation {
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
/*text-align center;*/
/*border: 1px solid green;*/
/*overflow: hidden;*/
}
.navigation li {
display: inline-block;
}
.navigation a {
background: #395870;
background: linear-gradient(#49708f, #293f50);
border-right: 1px solid rgba(0, 0, 0, .3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover {
background: #314b0;
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}
.row.two {
background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg);
background-position: absolute;
background-size: cover;
background-repeat: no-repeat;
max-width: 100%;
height: 550px;
margin: auto;
}
.floater.box {
background-color: rgba(255, 255, 255, .40);
border-radius: 10px;
/*opacity: .45;*/
max-width: 75%;
height: 200px;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
}
.form-search {
margin: 0 auto;
text-align: center;
font: bold 13px sans-serif;
max-width: 325px;
position: relative;
}
.form-search input {
width: 230px;
box-sizing: border-box;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
background-color: #ffffff;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 14px 15px 14px 40px;
border: 1px solid #b6c3cd;
;
border-right: 0;
color: #4E565C;
outline: none;
margin-top: 70px;
-webkit-appearance: none;
}
.form-search button {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
background-color: #6caee0;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
color: #ffffff;
padding: 15px 22px;
margin-left: -4px;
cursor: pointer;
border: none;
outline: none;
}
.form-search i {
position: absolute;
top: 15px;
left: 20px;
font-size: 16px;
color: #80A3BD;
}
/* Placeholder color */
.form-search input::-webkit-input-placeholder {
color: #879097;
}
.form-search input::-moz-placeholder {
color: #879097;
opacity: 1;
}
.form-search input:-ms-input-placeholder {
color: #879097;
}
.nav.wrap.two {
display: inline-block;
text-align: center;
width: 100%;
margin-top: 10px;
}
<div class="container-fluid">
<!-- Top Box -->
<div class="wrap">
<div class="Logos">
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" />
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" /> </div>
<div class="nav wrap one">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-ONE"><a href="#">LOG IN</a></li>
<li id="NAV-TWO"><a href="#">BUY A HOME</a></li>
<li id="NAV-THREE"><a href="#">SELL A HOME</a></li>
<li id="NAV-FOUR"><a href="#">CONTACT US</a></li>
</ul>
</div>
</div>
<!-- Middle Box -->
<div class="row two">
<div>
<div class="floater box">
<form class="form-search" method="get" action="#">
<input type="search" name="search" placeholder="I am looking for..">
<button type="submit">Search</button>
<i class="fa fa-search"></i>
</form>
</div>
</div>
</div>
</div>
<!-- Bottom Box -->
<div class="row three">
<div class="nav wrap two">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-A"><a href="#">MY LISTINGS</a></li>
<li id="NAV-B"><a href="#">COMMUNITIES SERVED</a></li>
<li id="NAV-C"><a href="#">PROPERTIES</a></li>
</ul>
</div>
</div>
</div>
Here is a link to my CodePen: https://codepen.io/IDCoder/full/rGWeEE/
解决方案
CSS is all about be natural order, natural position, natural styles... what I means is that your code isn't being natural, you can see here:
.navigation li {
display: inline-block;
}
.navigation a {
padding: 12px 20px;
}
I want to focus me in those properties because here we are saying:
You
<a>element that are inside this man -><li>(<li id="NAV-ONE"><a href="#">LOG IN</a></li>), yes you! You will be bigger even if you're inside him!
Well, in real life, we can't put bigger things into smaller spaces. What happens in real life and CSS is: smaller things into bigger things.
So if we make this change:
.navigation li {
display: inline-block;
padding: 12px 20px;
}
.navigation a {
/* We changed who is bigger than who */
}
It takes a natural order (because now the spaces where .navigation a will be is bigger than him). The final code is something like this (this will wrap when you use phone):
.navigation li {
display: inline-block;
padding: 12px 20px;
background: linear-gradient(#49708f, #293f50);
background: #395870;
border-right: 1px solid rgba(0, 0, 0, .3);
}
.navigation a {
color: #fff;
text-decoration: none;
}
More
I was playing and I found this cool way to wrap when screen is small, I think it's cool:
@media all and (max-width: 500px){
ul.navigation{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
}
Also, remember that when you want to make responsive design you need meta:viewport into your html's head:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
这篇关于如何使导航按钮移动响应和按顺序折叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
