Question

我基本上是在移动设备上为我的学校作业制作响应式网页。我做了汉堡包菜单，但是我将它转换成普通的水平菜单时遇到了麻烦。我有一个1280px的媒体查询，并且不完全确定将什么放入我的媒体查询，因为我尝试使用inline-block for nav元素，但它不起作用。

这是我的代码：

$(".cross").hide();
$(".navholding").hide();
$(".hamburger").click(function() {
  $(".navholding").slideToggle("slow", function() {
    $(".hamburger").hide();
    $(".cross").show();
  });
});

$(".cross").click(function() {
  $(".cross").hide();
  $(".navholding").slideToggle("slow", function() {
    $(".hamburger").show();
  });
});

.hamburger {
  transform: translateY(-80px);
  height: 65px;
  width: 65px;
  background-color: #b56969;
  margin-left: 20px;
  background: url(images/Hamburger.png);
  background-size: 100%;
  display: inline-block;
  cursor: pointer;
}

.cross {
  background: none;
  position: absolute;
  top: 0px;
  right: 0;
  padding: 7px 15px 0px 15px;
  color: #f1f1f1;
  border: 0;
  font-size: 3em;
  line-height: 65px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 101;
}

nav {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: left;
}

nav ul,
nav:active ul {
  display: none;
  position: absolute;
  background: black;
  height: 100%;
  top: 65px;
  width: 100%;
  z-index: 100;
}

nav li {
  text-align: center;
  width: 100%;
  padding: 15px 0;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: hidden;
  width: 20%;
  background-color: black;
  transform: translateY(-75px);
}

li a {
  padding: 10px;
  border-radius: 5px;
  font-size: 20pt;
  color: #b56969;
  text-align: center;
  text-decoration: none;
  background-color: #333333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="hamburger"></div>
  <div class="cross">&#10006;</div>
  <ul class="navholding">
    <li><a href="#">Home</a></li>
    <li><a href="#"> About Me </a></li>
    <li><a href="#"> Services </a></li>
    <li><a href="#"> Hobbies </a></li>
    <li><a href="#"> Work </a></li>
    <li><a href="#"> Contact </a></li>
  </ul>
</nav>

Answer 1

即使已经接受了答案，我也会在这里发帖，因为这是（在我看来）干净的方式。

如果有人需要对某些内容的工作方式或原因有任何解释，请发表评论，我会在这篇文章中添加。

＆＃13;

function burgerSwitch(nav) {
    if (nav.className == "open") {
        nav.className = "close";
    } else {
        nav.className = "open";
    }
}

＆＃13;

   nav ul {
  padding: 0;
  margin: 0;
}
nav ul li{
  float:left; /*instead of 'display:inline-block;' to make hamburger easier*/
  width: calc( (100vw - 40px ) / 6);/*6 = number of navitems you have*/
  list-style-type: none;
  
}
nav ul li a {
  background-color: #2fa35f;
  display:block;
  color: white;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  border: 2px solid green;
  width:100%; //expand to entire li
}

nav ul li a:hover {
  background-color: #3bcc77;
}

@media (max-width: 1000px) {
  
  burgerButton {
    display: block; 
    width: 50px;
    height: 50px;
    background-color: #d84b3e;
    color: white;
    cursor: pointer;
    margin-bottom:5px;
  }
  burgerButton:hover{
    background-color:#b74137;
  }
  burgerButton:after{
    position: absolute;
    left: 20px;
    top: 3px;
    font-family: Arial Black;
    font-size: 40px;
  }
  nav.open burgerButton:after {
    content: '\00d7';
  }

  nav.close burgerButton:after {
    content: '\2261';
  }
  nav.close ul { 
    display: none; /*if nav has tag 'close', don't display list*/
  }
  nav ul li { 
    width: calc(100vw - 40px);
  }
}

＆＃13;

<nav class="close" id="nav">
    <burgerButton class="open" onclick="burgerSwitch(this.parentNode);">
    </burgerButton>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#"> About Me </a></li>
        <li><a href="#"> Services </a></li>
        <li><a href="#"> Hobbies </a></li>
        <li><a href="#"> work </a></li>
        <li><a href="#"> contact </a></li>
    </ul>
</nav>

＆＃13;

Answer 2

你可以给你当前导航的移动ID，然后创建一个id为桌面的第二个导航。

使nav＃desktop {display：none;}

然后使用媒体查询显示：none;在nav＃mobile上，显示：在nav＃desktop上继承。

我必须在这里创建自己的汉堡包，因为你的汉堡包与图像相关联，但这个想法就在那里。

调整屏幕大小以查看更改。

最佳，列维

更新：正如Sam指出的那样，这只能用CSS完成，我相信他的意思是没有两个导航就可以完成。代码已更新。

在媒体查询中，display：none;在汉堡上。显示：块;关于ul.navholding。

你的css可以清理很多，我认为这就是问题所在。

$('#nav-icon1').click(function() {
    $('#nav_list').toggleClass('active');
  });

ul li {
    display: inline-block;
  }

  .navholding {
    display: none;
  }

  #nav_list.active {
    display: inherit;
  }

  /* Hamburgesa Icono de Navegación =========================================== */
  #nav-icon1 {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 10px 10px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    z-index: 10000;
  }

  #nav-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 25px;
    background: #282828;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    z-index: 10000;
  }

  #nav-icon1 span:nth-child(1) {
    top: 15px;
    left: 7.5px;
  }

  #nav-icon1 span:nth-child(2) {
    top: 23px;
    left: 7.5px;
  }

  #nav-icon1.cross span {
    background: #8a1913;
  }

  #nav-icon1.cross span:nth-child(1) {
    top: 22px;
    left: 7.5px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  #nav-icon1.cross span:nth-child(2) {
    top: 22px;
    left: 7.5px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  /* Final de la Hamburgesa Icono de Navegación =============================== */

  @media screen and (min-width: 1025px) {
    div#nav-icon1 {
      display: none;
    }

    .navholding {
      display: block;
    }
  }

<nav>
          <div id="nav-icon1">
            <span></span>
            <span></span>
          </div>
          <ul id="nav_list" class="navholding">
            <li><a href="#">Home</a></li>
            <li><a href="#"> About Me </a></li>
            <li><a href="#"> Services </a></li>
            <li><a href="#"> Hobbies </a></li>
            <li><a href="#"> Work </a></li>
            <li><a href="#"> Contact </a></li>
          </ul>
        </nav>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

如何将汉堡菜单转换为水平菜单？

2 个答案: