gpt4 book ai didi

javascript - 在窗口大小更改时更改侧导航栏

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

我正在尝试为网站制作侧边导航。到目前为止,我使用的是 <nav>元素并用 <li> 填充它创建我的侧边栏。

到目前为止,我的代码如下(p.s 内联样式只是为了测试,稍后我将使用外部 css 文件):

<body>

<nav style="background: #3f9edd; height: 1000px; min-width: 200px; position:fixed;">
<li style="position: relative; display: block; background: #2ecc71; width: 100%; height: 10%; padding: 33px 25px;">Home Area</li>
<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item one</li>
<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item two</li>
<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item three</li>
<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item four</li>
<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item five</li>
</nav>

<div class="container" ng-controller="projectController">
</div>
</body>

以上代码输出如下:

enter image description here

我的问题是什么!

如果用户调整窗口大小或者他们可能从 iPad 或 iPhone 等访问网站,我会尝试更改侧边导航栏。

如果全屏显示这个(我已经在显示这个了)

enter image description here

但如果屏幕尺寸低于某个尺寸,导航栏会自动更改为:

enter image description here

我不确定如何开发此功能。谁能指导我正确的方向。如果您需要更多信息,请告诉我。

提前致谢。

最佳答案

这是一个使用纯 css 的非常粗略的示例,但可以用作基础,您也可以将转换等添加到断点以使其看起来更时髦

Codepen http://codepen.io/noobskie/pen/XmeXEo?editors=110

HTML

<nav role='navigation'>
<ul>
<li><a href="#"><i class="fa fa-chrome"></i><span>Home</span></a></li>
<li><a href="#"><i class="fa fa-chrome"></i><span>About</span></a></li>
<li><a href="#"><i class="fa fa-chrome"></i><span>Clients</span></a></li>
<li><a href="#"><i class="fa fa-chrome"></i><span>Contact Us</span></a></li>
</ul>
</nav>

CSS

body{
margin:0;
}
nav{
background:#2F404F;
height: 100vh;
width:auto;
position:fixed;
ul{
margin:0;
padding:0;
}
li{
position: relative;
display: block;
padding:20px 10px;
border-bottom:1px solid #000;
a{
color:#FFF;
text-decoration:none;
font-size:1.3em;
i{
padding:0 5px 0 0;
}
}
}
}


@media only screen and (max-width: 768px) {
span{
display:none;
}
}

关于javascript - 在窗口大小更改时更改侧导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33122361/

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