个人中心
gpt4 book ai didi

javascript - 在 css/html 响应式中创建菜单栏

转载 作者：行者123 更新时间：2023-11-28 02:12:04 25 4
gpt4 key购买 nike

你好我想问你如何让我的菜单栏响应所有设备。我用过那个视频:https://www.youtube.com/watch?v=LOWjWRy_Kks&t=258s .当我从我的笔记本电脑打开它时，一切看起来都很酷，但是当我尝试从我的其他设备(平板电脑或智能手机)打开它时，我看不到我的菜单。

    $(window).on('scroll', function() {
      if ($(window).scrollTop()) {
        $('nav').addClass('black');
      } else {
        $('nav').removeClass('black');
      }
    })
body {
  margin: 0;
  padding: 0;
  font-family: Quicksand;
}


/*Menu Bar*/

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  padding: 10px 100px;
  box-sizing: border-box;
  transition: .3s;
}

nav.black {
  background: rgba(0, 0, 0, 0.8);
  height: 100px;
  padding: 10px 100px;
}

nav .logo {
  padding: 22px 20px;
  height: 80px;
  float: left;
  font-size: 24px;
  transition: .3s;
}

nav.black .logo {
  color: #fff;
}

nav ul {
  list-style: none;
  float: right;
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  line-height: 80px;
  color: #151515;
  padding: 12px 30px;
  text-decoration: none;
  text-transform: uppercase;
  transition: .3s;
}

nav.black ul li a {
  color: #fff;
}

nav ul li a: focus {
  outline: none;
}

nav ul li a.active {
  background: #E2472F;
  color: #fff;
  border-radius: 6px;
}

section.sec1 {
  width: 100%;
  height: 100vh;
  background: url(img/backgroud.jpg);
  background-size: cover;
  background-position: center;
}

.content {
  margin-top: 80px;
}


}

/*Media*/
@media(max-width: 580px) {
  nav ul {
    max-height: 0px;
  }
  
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }
  
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px 0;
    text-align: center;
  }
}
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <title> Landschaft </title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Quicksand:500" rel="stylesheet">

  <!--JavaScript-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<!--Body-->

<body>
  <div class="wrapper">
    <nav>
      <div class="logo">Landschaft</div>
      <ul>
        <li><a href="index.html">НАЧАЛО</a></li>
        <li><a href="about.html">СЪБИТИЯ</a></li>
        <li><a href="index.html">ПЪТЕКИ</a></li>
        <li><a href="index.html">ФОРУМ</a></li>
        <li><a href="index.html">ВРЪЗКИ</li>			
    <li><a class="active" href="index.html">ВХОД</a></li>
      </ul>
    </nav>


    <!--Section-->
    <section class="sec1"></section>
    <section class="content"> </section>

</body>

</html>

最佳答案

这就是我可以为这种代码做的。如果你对你想改进的地方发表评论，我仍然可以帮助你

$(window).on('scroll', function() {
      if ($(window).scrollTop()) {
        $('nav').addClass('black');
      } else {
        $('nav').removeClass('black');
      }
    })
body {
  margin: 0;
  padding: 0;
  font-family: Quicksand;
}


/*Menu Bar*/

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  padding: 10px 100px;
  box-sizing: border-box;
  transition: .3s;
}

nav.black {
  background: rgba(0, 0, 0, 0.8);
  height: 100px;
  padding: 10px 100px;
}

nav .logo {
  padding: 22px 20px;
  height: 80px;
  float: left;
  font-size: 24px;
  transition: .3s;
}

nav.black .logo {
  color: #fff;
}

nav ul {
  list-style: none;
  float: right;
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  line-height: 80px;
  color: #151515;
  padding: 12px 30px;
  text-decoration: none;
  text-transform: uppercase;
  transition: .3s;
}

nav.black ul li a {
  color: #fff;
}

nav ul li a: focus {
  outline: none;
}

nav ul li a.active {
  background: #E2472F;
  color: #fff;
  border-radius: 6px;
}

section.sec1 {
  width: 100%;
  height: 100vh;
  background: url(img/backgroud.jpg);
  background-size: cover;
  background-position: center;
}

.content {
  margin-top: 80px;
}


}

/*Media*/
@media(max-width: 580px) {
  nav ul {
    max-height: 0px;
  }
  
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }
  
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px 0;
    text-align: center;
  }
}

@media(max-width: 767px) {
  nav {padding: 5px}
  nav .logo {padding: 0}
  nav ul li a {padding: 5px}
}
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <title> Landschaft </title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Quicksand:500" rel="stylesheet">

  <!--JavaScript-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<!--Body-->

<body>
  <div class="wrapper">
    <nav>
      <div class="logo">Landschaft</div>
      <ul>
        <li><a href="index.html">НАЧАЛО</a></li>
        <li><a href="about.html">СЪБИТИЯ</a></li>
        <li><a href="index.html">ПЪТЕКИ</a></li>
        <li><a href="index.html">ФОРУМ</a></li>
        <li><a href="index.html">ВРЪЗКИ</li>			
    <li><a class="active" href="index.html">ВХОД</a></li>
      </ul>
    </nav>


    <!--Section-->
    <section class="sec1"></section>
    <section class="content"> </section>

</body>

</html>

关于javascript - 在 css/html 响应式中创建菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48694913/

25 4 0
文章推荐： C++ 对象不保存值
文章推荐： javascript - 如何在 JavaScript 中进行字母数字排序
文章推荐： html - Angular ng serve，spa 应用程序不加载 css 背景图片
文章推荐： javascript - 带有远程内容的 jQuery UI 选项卡，链接到选定选项卡的当前页面
行者123
个人简介

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

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