当屏幕太小时，使导航栏变成“汉堡包”推出/滑出菜单

Question

Welp... I'm stuck... again... 嗯...我又被卡住了...

(FYI This is my first ever website that I am coding myself (not a template) so don't assume that I know anything.) （仅供参考，这是我有史以来第一个为自己编码的网站（不是模板），所以不要以为我什么都知道。）

I am in the process of making my homepage more mobile / smaller screen sizes freindly. 我正在努力使我的主页更具移动性/缩小屏幕尺寸。 One of the biggest problems is that my navbar is too large on mobile and makes it so that in order to see the full navbar you have to scroll to the right, and this really breaks the website aesthetically. 最大的问题之一是，我的导航栏在移动设备上太大了，因此要想看到完整的导航栏，就必须向右滚动，这实际上从美学上破坏了网站。 I have tried my best to implement things like flexnav into my website but I haven't been able to succeed in making it: 我已经尽力将flexnav之类的东西实现到我的网站中，但未能成功：

A. Be a Slide-Out / Push-Out menu on mobile which is triggered by a hamburger menu (which is preferably animated like style 2 in this tutorial: http://callmenick.com/post/animating-css-only-hamburger-menu-icons ) A.是由汉堡菜单触发的移动设备上的“滑出/推入”菜单（在本教程中，动画最好像样式2所示： http ： //callmenick.com/post/animating-css-only-hamburger -menu-icons ）

B. Have a TRANSPARENT background for both the hamburger menu and the navbar. B.汉堡菜单和导航栏都具有透明背景。 B1. B1。 Keep my navbar's color-scheme 保持导航栏的颜色方案

C. Switch from the full nav-bar to the hamburger menu when the screen is less than 1200 px wide. C.当屏幕宽度小于1200像素时，从完整的导航栏切换到汉堡菜单。

I know that I am asking a lot, but hopefully someone will be able to help me. 我知道我要问的很多，但希望有人能够帮助我。 As I am submitting my code in JSBin it would be really helpful If you could do the same (or if you prefer Codepen or JSFiddle or whatever). 当我在JSBin中提交我的代码时，如果您可以做同样的事情（或者如果您更喜欢Codepen或JSFiddle或其他方法），那将非常有帮助。 And I am sure that this stylish approach to a navbar which adapts to screen size would be appreciated by many people who find themselves in the same situation I do. 而且我敢肯定，这种适应屏幕尺寸的导航栏时尚方法将受到许多发现与我处于相同情况的人们的赞赏。 Also, sorry for the messy code. 另外，对不起，代码混乱。

JSFBin: http://jsbin.com/jefosiweci/edit?html,css,js,output JSFBin： http ://jsbin.com/jefosiweci/edit?html,css,js，输出

Code: 码：

    <meta name="robots" content="noindex">
  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
    <link rel="stylesheet" href="CSS/main.css">
    <link rel="stylesheet" href="CSS/animate.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <title>Lor emIp sumDo lorSita</title>
    <link rel="stylesheet" href="CSS/lightbox.min.css">
    <script src="https://use.typekit.net/pzl7njn.js"></script>
    <link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
    <script>
      try {
        Typekit.load({
          async: false
        });
      } catch (e) {}

    </script>
    <script src="JS/wow.min.js"></script>
              <script>
              new WOW().init();
              </script>
  <style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/

.clearfix:after {
  display: block;
  clear: both;
}


/*----- Menu Outline -----*/

.menu-wrap {
  width: 100%;
  background: #DAE6EB;
  margin: 0px auto
}

.menu {
  width: 1200px;
  margin: 0px;
  margin-bottom: -55px;
  opacity: 5;

}

.menu li {
  margin: 0px;
  list-style: none;
  font-family: 'industry';
  font-size: 18px;
}

.menu a {
  transition: all linear 0.15s;
  color: #98a1a4;
  font-size: 18px;
}

.menu li:hover > a,
.menu li:active > a,
.menu .current-item > a {
  text-decoration: none;
  color: #414546;
  font-size: 18px;
}

.menu .arrow {
  font-size: 11px;
  line-height: 0%;
}


/*----- Top Level -----*/

.menu > ul > li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 18px;
}

.menu > ul > li > a {
  padding: 10px 40px;
  display: inline-block;
}

.menu > ul > li:hover > a,
.menu > ul > li:active > a,
.menu > ul > .current-item > a {
  background: #98a1a4;
}


/*----- Bottom Level -----*/

.menu li:hover .sub-menu,
.menu li:active {
  z-index: 1;
  opacity: 1;
}

.sub-menu {
  width: 160%;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  background: #98a1a4B;
  text-align: left;
}

.sub-menu li {
  display: block;
  font-size: 18px;
}

.sub-menu li a {
  padding: 10px 10px;
  display: block;
  font-size: 18px;
}

.sub-menu li a:hover,
.sub-menu li a:active,
.sub-menu .current-item a {
  background: #98a1a4;
}

/*Jumbotron. Ignore*/
.jumbotron {
  background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
  background-repeat: no-repeat;
  background-position: center top;
  margin-top: 0px;
  margin-bottom: -0px;
}

.jumbotron .container {
  position: relative;
  left: auto;
  right: auto;
  height: 100vh;
  width: 100vw;
  padding: 100px 0;
  text-align: center;
}

.jumbotron h1 {
  color: #fff;
  font-size: 84px;
  font-family: "industry", sans-serif;
  font-style: normal;
  font-weight: 900;
  text-shadow: 3px 3px #000;
}

.jumbotron p {
  font-size: 24px;
  font-family: "industry", sans-serif;
  font-style: italic;
  font-weight: 1000;
  color: #f7f7f7;
}
</style>
</head> 


<section id="Top">
  </section>
    </div>
    <div class="menu-wrap">
      <nav class="menu">
        <ul class="clearfix" data-breakpoint="1200">
          <li class="current-item wow fadeInDown"><a href="#"><i class="fa fa-home fa"></i> Lore</a></li>
          <li class="wow fadeInDown delay05"><a href="#"><i class="fa fa-user fa"></i> mIpsu mD</a></li>
          <li class="wow fadeInDown delay05"><a href="#"><i class="fa fa-map fa"></i> olorS</a></li>
          <li class="wow fadeInDown delay15"><a href="#"><i class="fa fa-bolt fa"></i> itAmet.L</a></li>
          <li class="wow fadeInDown delay2"><a href="#"><i class="fa fa-paint-brush fa"></i> or emIps</a></li>
          <li class="wow fadeInDown delay25"><a href="#"><i class="fa fa-envelope fa"></i> umDolor</a></li>
          <li class="wow fadeInDown delay3"><a href="/blog/index.html"><i class="fa fa-pencil fa"></i> Sita</a></li>
        </ul>
      </nav>
    </div>
   <div class="jumbotron">
      <div class="container">
        <h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
        <p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
        <div class="container">
          <ul class="actions">
            <li class="wow fadeInUp Big delay2"><a href="#one" class="button special scrolly"><i class="fa fa-chevron-down fa"></i></a></li>
          </ul>
        </div>
      </div>
    </div>

Answer 1

I see that you are already using Bootstrap. 我看到您已经在使用Bootstrap。 Bootstrap makes this very easy for you to do as they have it built in already you just need to use their structure. Bootstrap使它们非常容易执行，因为它们已经内置，您只需要使用其结构即可。 Below I have put in their navbar structure into your existing code. 下面，我将它们的导航栏结构放入您现有的代码中。 I have taken out the menu css that you had and added just a couple of lines of css to get you started. 我已取出您拥有的菜单css，并仅添加了几行css即可开始使用。 You can mess with the css and change it to your liking but it should look almost identical to the setup that you had. 您可以将CSS弄乱，并根据自己的喜好进行更改，但它看起来应该与您的设置几乎相同。 In this code the nav will have a class of navbar-default which I have given a background of none and a position of absolute top to keep it at the top of the page and a width of 100%. 在此代码中，导航将具有navbar-default的类，我给它提供了none的背景和绝对顶部的位置，以使其保持在页面顶部，宽度为100％。 Inside of it is a navbar-header and a navbar-collapse. 它的内部是一个导航栏标题和一个导航栏折叠。 In the navbar-header is your menu-hamburger which bootstrap has already styled and given javascript to open at a max-width of 767px. 在navbar-header中，是您的菜单汉堡包，其引导程序已设置样式，并允许javascript以767px的最大宽度打开。 Then the navbar-collapse is where you have your links which I have given a media query style background of transparent black. 那么navbar-collapse是您拥有链接的地方，我给了它一个透明黑色的媒体查询样式背景。 So when you get to the 767 px it will be hidden until you click on the hamburger. 因此，当您到达767像素时，它将被隐藏，直到您单击汉堡包为止。 This is all built into Bootstraps framework making it very easy for developers to get started on their sites. 这全部内置在Bootstraps框架中，使开发人员可以轻松地开始其网站。 I hope this helps. 我希望这有帮助。 Here is your revised code you should be able to just copy and paste this as is: 这是您的修改后的代码，您应该可以照原样复制并粘贴它：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
    <link rel="stylesheet" href="CSS/main.css">
    <link rel="stylesheet" href="CSS/animate.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <title>Lor emIp sumDo lorSita</title>
    <link rel="stylesheet" href="CSS/lightbox.min.css">
    <script src="https://use.typekit.net/pzl7njn.js"></script>
    <link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
    <script>
      try {
        Typekit.load({
          async: false
        });
      } catch (e) {}

    </script>
    <script src="JS/wow.min.js"></script>
              <script>
              new WOW().init();
              </script>
  <style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/

.clearfix:after {
  display: block;
  clear: both;
}
.navbar-default {
  background:none;
  margin:0;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  border:none;
  z-index:1;
}
.navbar-default .navbar-nav>li>a {
  font-size:18px;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a.active{
  background:#98a1a4;
  color:#333;
}
@media screen and (max-width: 767px){
  .navbar-collapse{background:rgba(0,0,0,0.8);}
}
/*Jumbotron. Ignore*/
.jumbotron {
  background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
  background-repeat: no-repeat;
  background-position: center top;
  margin-top: 0px;
  margin-bottom: -0px;
}

.jumbotron .container {
  position: relative;
  left: auto;
  right: auto;
  height: 100vh;
  width: 100vw;
  padding: 100px 0;
  text-align: center;
}

.jumbotron h1 {
  color: #fff;
  font-size: 84px;
  font-family: "industry", sans-serif;
  font-style: normal;
  font-weight: 900;
  text-shadow: 3px 3px #000;
}

.jumbotron p {
  font-size: 24px;
  font-family: "industry", sans-serif;
  font-style: italic;
  font-weight: 1000;
  color: #f7f7f7;
}
</style>
</head> 


<section id="Top">
  </section>
    <nav role="navigation" class="navbar navbar-default">
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="wow fadeInDown"><a class="active" href="#"><i class="fa fa-home fa"></i> Lore</a></li>
                <li class="wow fadeInDown delay05"><a href="#"><i class="fa fa-user fa"></i> mIpsu mD</a></li>
                <li class="wow fadeInDown delay05"><a href="#"><i class="fa fa-map fa"></i> olorS</a></li>
                <li class="wow fadeInDown delay15"><a href="#"><i class="fa fa-bolt fa"></i> itAmet.L</a></li>
                <li class="wow fadeInDown delay2"><a href="#"><i class="fa fa-paint-brush fa"></i> or emIps</a></li>
                <li class="wow fadeInDown delay25"><a href="#"><i class="fa fa-envelope fa"></i> umDolor</a></li>
                <li class="wow fadeInDown delay3"><a href="/blog/index.html"><i class="fa fa-pencil fa"></i> Sita</a></li>
            </ul>
        </div>
    </nav>
   <div class="jumbotron">
      <div class="container">
        <h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
        <p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
        <div class="container">
          <ul class="actions">
            <li class="wow fadeInUp Big delay2"><a href="#one" class="button special scrolly"><i class="fa fa-chevron-down fa"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 2

I'm not sure anyone is going to write the code for you, but we can point you in the right direction. 我不确定有人会为您编写代码，但是我们可以为您指明正确的方向。 What you are looking for, in terms of specifying different styles at different screen sizes are called media queries. 在不同的屏幕尺寸下指定不同的样式时，您要查找的内容称为媒体查询。 They look like this: 他们看起来像这样：

@media screen and (max-width: 1199px) {...}

I have built something very similar to what you are looking for (although mine has probably more than what you are looking for) so if you need a reference on how things work or whatnot, I'll post a link. 我已经构建了与您正在寻找的东西非常相似的东西（尽管我的东西可能比您正在寻找的东西还要多），因此，如果您需要有关事物如何工作的参考，我将发布一个链接。

http://codepen.io/mhodges44/pen/dGMMOK http://codepen.io/mhodges44/pen/dGMMOK

You can ignore the angularJS stuff (all of the ng-* in the HTML and the javascript), just focus on the CSS media queries. 您可以忽略angularJS内容（HTML和javascript中的所有ng- *），而只关注CSS媒体查询。 That should give you a pretty good idea of how it all works and you should be able to apply it to your situation. 这应该使您对所有工作原理都非常了解，并且应该能够将其应用于您的情况。

当屏幕太小时，使导航栏变成“汉堡包”推出/滑出菜单

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-01-13 01:03:22

解决方案2
2 2016-01-12 23:26:03

当屏幕太小时，使导航栏变成“汉堡包”推出/滑出菜单

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-01-13 01:03:22

解决方案2 2 2016-01-12 23:26:03

解决方案1
3 已采纳 2016-01-13 01:03:22

解决方案2
2 2016-01-12 23:26:03