当屏幕变得太小时，将导航栏变成汉堡推出/滑出菜单

时间：2016-01-12 23:11:41

标签： javascript jquery html css

Welp ......我再次陷入困境......

（仅供参考这是我自己编写的第一个网站（不是模板），所以不要以为我知道任何事情。）

我正在使我的主页更加移动/更小的屏幕尺寸。其中一个最大的问题是我的导航栏在移动设备上太大而且使得为了看到完整的导航栏你必须滚动到右边，这确实打破了网站的美观。我已经尽力将flexnav这样的东西应用到我的网站中，但我还没能成功实现它：

一个。是移动设备上的滑出/推出菜单，由汉堡菜单触发（在本教程中最好像样式2一样动画：http://callmenick.com/post/animating-css-only-hamburger-menu-icons）

B中。汉堡包菜单和导航栏都有透明背景。 B1。保留我的导航栏的颜色方案

℃。当屏幕宽度小于1200像素时，从完整导航栏切换到汉堡菜单。

我知道我要求很多，但希望有人能够帮助我。当我在JSBin中提交我的代码时，它会非常有用如果你可以做同样的事情（或者如果你喜欢Codepen或JSFiddle或其他什么）。而且我确信这种适用于屏幕大小的导航栏的时尚方法会让很多人发现自己处于相同的状态。此外，对于凌乱的代码感到抱歉。

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

代码：

    <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>

2 个答案:

答案 0 :(得分：3)

我看到你已经在使用Bootstrap了。 Bootstrap让你很容易做到，因为他们已经内置了你只需要使用他们的结构。下面我将导航栏结构放入您现有的代码中。我已经拿出你所拥有的菜单css，并添加了几行css来帮助你入门。您可以使用css并根据自己的喜好进行更改，但它应该与您的设置几乎相同。在这段代码中，导航将有一个navbar-default类，我给出了一个无背景和一个绝对顶部位置，以使其保持在页面顶部，宽度为100％。它内部是一个navbar-header和一个navbar-collapse。在navbar-header中是你的菜单汉堡包，其中bootstrap已经设置了样式并且以最大宽度767px打开javascript。然后导航栏崩溃是你有链接的地方，我给了透明黑色的媒体查询样式背景。因此，当你到达767像素时，它将被隐藏，直到你点击汉堡包。这些内置于Bootstraps框架中，使开发人员可以轻松地开始使用他们的网站。我希望这有帮助。以下是您修改后的代码，您应该可以按原样复制和粘贴它：

<!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>

答案 1 :(得分：2)

我不确定是否有人会为您编写代码，但我们可以指出您正确的方向。在指定不同屏幕尺寸的不同样式方面，您所寻找的是媒体查询。它们看起来像这样：

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

我已经构建了一些与你正在寻找的东西非常相似的东西（虽然我的东西可能比你想要的更多）所以如果你需要一个关于工作方式或其他方面的参考，我会发布一个链接。

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

你可以忽略angularJS的东西（HTML和javascript中的所有ng- *），只关注CSS媒体查询。这应该会让你很好地了解它是如何工作的，你应该能够将它应用到你的情况中。

相关问题
最新问题