繁体   English   中英

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

[英]Make a navbar turn into a Hamburger push-out/slide-out menu when the screen gets too small

嗯...我又被卡住了...

(仅供参考,这是我有史以来第一个为自己编码的网站(不是模板),所以不要以为我什么都知道。)

我正在努力使我的主页更具移动性/缩小屏幕尺寸。 最大的问题之一是,我的导航栏在移动设备上太大了,因此要想看到完整的导航栏,就必须向右滚动,这实际上从美学上破坏了网站。 我已经尽力将flexnav之类的东西实现到我的网站中,但未能成功:

A.是由汉堡菜单触发的移动设备上的“滑出/推入”菜单(在本教程中,动画最好像样式2所示: http//callmenick.com/post/animating-css-only-hamburger -menu-icons

B.汉堡菜单和导航栏都具有透明背景。 B1。 保持导航栏的颜色方案

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

我知道我要问的很多,但希望有人能够帮助我。 当我在JSBin中提交我的代码时,如果您可以做同样的事情(或者如果您更喜欢Codepen或JSFiddle或其他方法),那将非常有帮助。 而且我敢肯定,这种适应屏幕尺寸的导航栏时尚方法将受到许多发现与我处于相同情况的人们的赞赏。 另外,对不起,代码混乱。

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

码:

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

我看到您已经在使用Bootstrap。 Bootstrap使它们非常容易执行,因为它们已经内置,您只需要使用其结构即可。 下面,我将它们的导航栏结构放入您现有的代码中。 我已取出您拥有的菜单css,并仅添加了几行css即可开始使用。 您可以将CSS弄乱,并根据自己的喜好进行更改,但它看起来应该与您的设置几乎相同。 在此代码中,导航将具有navbar-default的类,我给它提供了none的背景和绝对顶部的位置,以使其保持在页面顶部,宽度为100%。 它的内部是一个导航栏标题和一个导航栏折叠。 在navbar-header中,是您的菜单汉堡包,其引导程序已设置样式,并允许javascript以767px的最大宽度打开。 那么navbar-collapse是您拥有链接的地方,我给了它一个透明黑色的媒体查询样式背景。 因此,当您到达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>

我不确定有人会为您编写代码,但是我们可以为您指明正确的方向。 在不同的屏幕尺寸下指定不同的样式时,您要查找的内容称为媒体查询。 他们看起来像这样:

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

我已经构建了与您正在寻找的东西非常相似的东西(尽管我的东西可能比您正在寻找的东西还要多),因此,如果您需要有关事物如何工作的参考,我将发布一个链接。

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

您可以忽略angularJS内容(HTML和javascript中的所有ng- *),而只关注CSS媒体查询。 这应该使您对所有工作原理都非常了解,并且应该能够将其应用于您的情况。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM