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

时间：2018-02-08 21:16:00

标签： javascript html css

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

＆＃13;
＆＃13; 
    $(window).on('scroll', function() {
      if ($(window).scrollTop()) {
        $('nav').addClass('black');
      } else {
        $('nav').removeClass('black');
      }
    })
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

这就是我能为这种代码做的事情。如果您评论要改进的内容，我仍然可以帮助您

＆＃13;
＆＃13; 
$(window).on('scroll', function() {
      if ($(window).scrollTop()) {
        $('nav').addClass('black');
      } else {
        $('nav').removeClass('black');
      }
    })
＆＃13; 
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}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这样做怎么样？如果你想尝试不同的尺寸，请看this小提琴。

$(window).on('scroll', function() {
  if ($(window).scrollTop()) {
    $('nav').addClass('black');
  } else {
    $('nav').removeClass('black');
  }
});

function toggleMenu(x) {
  x.classList.toggle('openMenu');
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  font-family: Quicksand;
  box-sizing: border-box;
}


/*Menu Bar*/

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 100px;
  transition: all 300ms;
}

nav.black {
  background: rgba(0, 0, 0, 0.8);
}

nav .logo {
  display: inline-block;
  width: 25%;
  padding: 0 5px;
  line-height: 80px;
  font-size: 24px;
  transition: all 0.3s;
  text-align: center;
}

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

nav a {
  display: inline-block;
  width: 12.5%;
  line-height: 80px;
  color: #151515;
  padding: 0 5px;
  text-decoration: none;
  text-transform: uppercase;
  transition: .3s;
  text-align: center;
  vertical-align: top;
}

nav.black a {
  color: #fefefe;
}

nav a:focus {
  outline: none;
}

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

section.sec1 {
  width: 100%;
  height: 100vh;
  background: url(http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg);
  background-size: cover;
  background-position: center;
}

.content {
  margin-top: 80px;
}


/* Hamburger icon */

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger .bar1,
.hamburger .bar2,
.hamburger .bar3 {
  width: 35px;
  height: 5px;
  background-color: #fefefe;
  margin: 6px 0;
  transition: all 0.4s;
}

.openMenu .hamburger .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.openMenu .hamburger .bar2 {
  opacity: 0;
}

.openMenu .hamburger .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}


/*Media*/

@media(max-width: 860px) {
  nav {
    background: rgba(0, 0, 0, 0.8);
    padding: 0 20px;
    color: #fefefe;
    overflow: hidden;
  }
  .logo {
    position: fixed;
    top: 0;
  }
  nav a {
    width: 100%;
    line-height: calc((100vh - 80px) / 6);
    transform: translateY(80px);
    visibility: hidden;
  }
  .openMenu a {
    color: #fefefe;
    visibility: visible;
  }
  .hamburger {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .openMenu {
    height: 100vh;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Quicksand:500" rel="stylesheet" />

<div class="wrapper">
  <nav>
    <div class="hamburger" onclick="toggleMenu(this.parentNode);">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
    <div class="logo">Landschaft</div><a href="index.html">НАЧАЛО</a
      ><a href="about.html">СЪБИТИЯ</a
      ><a href="index.html">ПЪТЕКИ</a
      ><a href="index.html">ФОРУМ</a
      ><a href="index.html">ВРЪЗКИ</a
      ><a class="active" href="index.html">ВХОД</a>
  </nav>


  <!--Section-->
  <section class="sec1"></section>
  <section class="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
    nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
    exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo
    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore
    dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
    sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
    praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
    accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem
    ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
    commodo
  </section>
</div>

相关问题
最新问题