个人中心
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
文章推荐： css - 在 Notepad++ 中突出显示 PHP 文件中的 CSS 代码
文章推荐： c++ - 来自环形拓扑的全局最大值，而不是来自 C++ 中的 MPI_REDUCE
文章推荐： html - 如何根据屏幕尺寸对齐图片和文字？
文章推荐： css - 绝对定位的 child 与边界
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com