正在执行和格式化 jQuery 汉堡菜单

Question

我不知道如何制作我刚刚花了一天时间做的汉堡菜单，除了看起来很可爱之外，还做了其他事情。我一直在尝试将我收集的几个不同的代码块放在一起，以创建我所设想的内容，但由于我对 jQuery 有点陌生，所以它不起作用。我想我可能会遗漏一些简单的东西，但也许不会。无论如何...非常感谢您的帮助！（描述我在代码中尝试做的事情的评论。

此外-我在此处内联添加了我的外部 jQuery 和 css 文件中的内容，但我的实际文件有指向这两个文件的链接。

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <script src="http://www.google.com/jsapi" type="text/javascript"></script>

  <script type="text/javascript">
    google.load("jquery", "1.3.2");
  </script>

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  <link rel="stylesheet" href="hamburgers.css">

  <script type="text/javascript" src="ham.js"></script>

  <style>
    /* The following CSS is for the red hamburger animation in the lower left corner */
    
    #nav-icon4 {
      width: 60px;
      height: 45px;
      position: fixed;
      bottom: 25px;
      right: 25px;
      -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;
    }
    
    #nav-icon4 span {
      display: block;
      position: absolute;
      height: 9px;
      width: 100%;
      background: darkred;
      border-radius: 9px;
      opacity: 2;
      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;
    }
    
    #nav-icon4 span:nth-child(1) {
      top: 0px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    
    #nav-icon4 span:nth-child(2) {
      top: 18px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    
    #nav-icon4 span:nth-child(3) {
      top: 36px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    
    #nav-icon4.open span:nth-child(1) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      top: -3px;
      left: 8px;
    }
    
    #nav-icon4.open span:nth-child(2) {
      width: 0%;
      opacity: 0;
    }
    
    #nav-icon4.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 39px;
      left: 8px;
    }
    /* CSS for the grey hamburger icon and menu -- note about what I'm tying to figure out: how to replace the grey hamburger icon with the fancier red one in the bottom left corner */
    
    body {
      font-family: 'Noto Sans', sans-serif;
      margin: 0;
      width: 100%;
      height: 100vh;
      background: #ffffff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    header {
      width: 100%;
      background: #ffffff;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #dddddd;
    }
    
    .hamburger {
      background: none;
      position: absolute;
      top: 0;
      right: 0;
      line-height: 45px;
      padding: 5px 15px 0px 15px;
      color: #999;
      border: 0;
      font-size: 1.4em;
      font-weight: bold;
      cursor: pointer;
      outline: none;
      z-index: 10000000000000;
    }
    
    .cross {
      background: none;
      position: absolute;
      top: 0px;
      right: 0;
      padding: 7px 15px 0px 15px;
      color: #999;
      border: 0;
      font-size: 3em;
      line-height: 65px;
      font-weight: bold;
      cursor: pointer;
      outline: none;
      z-index: 10000000000000;
    }
    
    .menu {
      z-index: 1000000;
      font-weight: bold;
      font-size: 0.8em;
      width: 100%;
      background: #f1f1f1;
      position: absolute;
      text-align: center;
      font-size: 12px;
    }
    
    .menu ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      list-style-image: none;
    }
    
    .menu li {
      display: block;
      padding: 15px 0 15px 0;
      border-bottom: #dddddd 1px solid;
    }
    
    .menu li:hover {
      display: block;
      background: #ffffff;
      padding: 15px 0 15px 0;
      border-bottom: #dddddd 1px solid;
    }
    
    .menu ul li a {
      text-decoration: none;
      margin: 0px;
      color: #666;
    }
    
    .menu ul li a:hover {
      color: #666;
      text-decoration: none;
    }
    
    .menu a {
      text-decoration: none;
      color: #666;
    }
    
    .menu a:hover {
      text-decoration: none;
      color: #666;
    }
    
    .glyphicon-home {
      color: white;
      font-size: 1.5em;
      margin-top: 5px;
      margin: 0 auto;
    }
    
    header {
      display: inline-block;
      font-size: 12px;
      padding-left: 20px;
    }
  </style>

  <title>hamburgers</title>

</head>

<body>

  <!-- This is how I want my hamburger icon/animation to look (the red one on the bottom right). However I need to put the text "menu" next to the icon when in desktop, but responsive and disappearing in mobile -->

  <div id="nav-icon4">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <!--I want the rest of the nav bar to resemble this (but with the red hamburger on the top right) and the drop down menu appearing when said icon is clicked-->

  <!-- The menu isn't working at all now. I assume there's some conflict with the jQuery codes for each menu but I may be totally off on that assumption. -->

  <header>
    <span>Shine Design</span>
    <button class="hamburger">&#9776;</button>
    <button class="cross">&#735;</button>
  </header>

  <div class="menu">
    <ul>
      <a href="#">
        <li>LINK ONE</li>
      </a>
      <a href="#">
        <li>LINK TWO</li>
      </a>
      <a href="#">
        <li>LINK THREE</li>
      </a>
      <a href="#">
        <li>LINK FOUR</li>
      </a>
      <a href="#">
        <li>LINK FIVE</li>
      </a>
    </ul>
  </div>

  <!-- Script (normally linked in external) for red hamburger -->

<script>
  $(document).ready(function(){ $('#nav-icon4').click(function(){ $(this).toggleClass('open'); }); });

  <!-- The following is the code for the grey hamburger icon-->

  $( ".cross" ).hide(); $( ".menu" ).hide(); $( ".hamburger" ).click(function() { $( ".menu" ).slideToggle( "slow", function() { $( ".hamburger" ).hide(); $( ".cross" ).show(); }); }); $( ".cross" ).click(function() { $( ".menu" ).slideToggle( "slow", function()
  { $( ".cross" ).hide(); $( ".hamburger" ).show(); }); });
</script>
</body>

</html>

Answer 1

试试这个：

$(document).ready(function(){
 $('#nav-icon').click(function(){
  $(this).toggleClass('open');
   if($('#menu').css('opacity') == '0'){
     $('#menu').css('opacity','1');
     $('#menu').fadeIn(300).css('display','table');
   }else{
     $('#menu').css('opacity','0');
     $('#menu').fadeOut(300).css('display','none');
   }
 });
});

body{
  background-color: #000;
}

#menu{
    z-index: 5;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.95);
    position: fixed;
    font-size: 1.5em;
    text-align: center;
    right: 0px;
    top: 0px;
    opacity: 0;
    display: table;
}

.hidden{
    display: none;
    visibility: none;
}

#menu ul{
    margin: 0;
    padding: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

#menu ul li{
    cursor: pointer;
    text-decoration: none;
}

#menu ul li:hover{
    background-color: #006973;
    -webkit-transition: .15s ease-in-out;
    -moz-transition: .15s ease-in-out;
    -o-transition: .15s ease-in-out;
    transition: .15s ease-in-out;
}

#menu ul a{
    letter-spacing: 5px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    list-style: none;
    text-transform: uppercase;
    padding: 0px;
    line-height: 75px;
    padding: 10px 700px;
    text-decoration: none;
}

#menu ul a:hover{
    text-decoration: none;
    color: #fff ;
}

#nav-icon {
    z-index: 20;
  width: 50px;
  height: 35px;
  position: relative;
  margin: 35px 30px;
  -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;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 40px;
  background: #bada33;
  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;
}

/* Icon 3 */

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 12px;
}

#nav-icon span:nth-child(4) {
  top: 24px;
}

#nav-icon.open span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>

    <div id="topbar"> <!-- top bar -->

            <div id="nav-icon">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>

        <div id="menu">
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
            </ul>
        </div>

    </div>

</header>

参考：https://jsfiddle.net/f19kz640/

Answer 2

去掉动画汉堡包的固定位置，将其添加到header并向右浮动，先隐藏菜单再切换

$(document).ready(function() {
  $('.menu-title,#nav-icon4').click(function() {
    $('#nav-icon4').toggleClass('open');
    $(".menu").slideToggle("slow");
  });
});

/* The following CSS is for the red hamburger animation in the lower left corner */

#nav-icon4 {
  width: 35px;
  height: 25px;
  float: right;
  margin-top: 15px;
  margin-right: 30px;
  -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;
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #999;
  border-radius: 5px;
  opacity: 2;
  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;
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 10px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
  left: 6px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 25px;
  left: 6px;
}


/* CSS for the grey hamburger icon and menu -- note about what I'm tying to figure out: how to replace the grey hamburger icon with the fancier red one in the bottom left corner */

body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header {
  width: 100%;
  background: #ffffff;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #dddddd;
}

.menu {
  z-index: 1000000;
  display: none;
  font-weight: bold;
  font-size: 0.8em;
  width: 100%;
  background: #f1f1f1;
  position: absolute;
  text-align: center;
  font-size: 12px;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}

.menu li {
  display: block;
  padding: 15px 0 15px 0;
  border-bottom: #dddddd 1px solid;
}

.menu li:hover {
  display: block;
  background: #ffffff;
  padding: 15px 0 15px 0;
  border-bottom: #dddddd 1px solid;
}

.menu ul li a {
  text-decoration: none;
  margin: 0px;
  color: #666;
}

.menu ul li a:hover {
  color: #666;
  text-decoration: none;
}

.menu a {
  text-decoration: none;
  color: #666;
}

.menu a:hover {
  text-decoration: none;
  color: #666;
}

.glyphicon-home {
  color: white;
  font-size: 1.5em;
  margin-top: 5px;
  margin: 0 auto;
}

header {
  display: inline-block;
  font-size: 12px;
  padding-left: 20px;
}
.menu-title {
float:right;
margin-top:20px;
margin-right:10px;
line-height:1;
color:#999;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <script src="http://www.google.com/jsapi" type="text/javascript"></script>

  <script type="text/javascript">
    google.load("jquery", "1.3.2");
  </script>

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  <link rel="stylesheet" href="hamburgers.css">

  <script type="text/javascript" src="ham.js"></script>

  <title>hamburgers</title>

</head>

<body>


  <header>
    <span>Shine Design</span>
    <div id="nav-icon4">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <h2 class="menu-title">MENU</h2>
  </header>

  <div class="menu">
    <ul>
      <a href="#">
        <li>LINK ONE</li>
      </a>
      <a href="#">
        <li>LINK TWO</li>
      </a>
      <a href="#">
        <li>LINK THREE</li>
      </a>
      <a href="#">
        <li>LINK FOUR</li>
      </a>
      <a href="#">
        <li>LINK FIVE</li>
      </a>
    </ul>
  </div>


</body>

</html>

Answer 3

所以我删除了灰色图标的 jQuery，它无论如何都不起作用。此外，您不需要为准备好文档的红色汉堡包菜单包装 jQuery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <script src="http://www.google.com/jsapi" type="text/javascript"></script>

  <script type="text/javascript">
    google.load("jquery", "1.3.2");
  </script>

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  <link rel="stylesheet" href="hamburgers.css">

  <script type="text/javascript" src="ham.js"></script>

  <style>
    /* The following CSS is for the red hamburger animation in the lower left corner */
    
    #nav-icon4 {
      width: 60px;
      height: 45px;
      position: fixed;
      bottom: 25px;
      right: 25px;
      -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;
    }
    
    #nav-icon4 span {
      display: block;
      position: absolute;
      height: 9px;
      width: 100%;
      background: darkred;
      border-radius: 9px;
      opacity: 2;
      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;
    }
    
    #nav-icon4 span:nth-child(1) {
      top: 0px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    
    #nav-icon4 span:nth-child(2) {
      top: 18px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    
    #nav-icon4 span:nth-child(3) {
      top: 36px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    
    #nav-icon4.open span:nth-child(1) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      top: -3px;
      left: 8px;
    }
    
    #nav-icon4.open span:nth-child(2) {
      width: 0%;
      opacity: 0;
    }
    
    #nav-icon4.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 39px;
      left: 8px;
    }
    /* CSS for the grey hamburger icon and menu -- note about what I'm tying to figure out: how to replace the grey hamburger icon with the fancier red one in the bottom left corner */
    
    body {
      font-family: 'Noto Sans', sans-serif;
      margin: 0;
      width: 100%;
      height: 100vh;
      background: #ffffff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    header {
      width: 100%;
      background: #ffffff;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #dddddd;
    }
    
    .hamburger {
      background: none;
      position: absolute;
      top: 0;
      right: 0;
      line-height: 45px;
      padding: 5px 15px 0px 15px;
      color: #999;
      border: 0;
      font-size: 1.4em;
      font-weight: bold;
      cursor: pointer;
      outline: none;
      z-index: 10000000000000;
    }
    
    .cross {
      background: none;
      position: absolute;
      top: 0px;
      right: 0;
      padding: 7px 15px 0px 15px;
      color: #999;
      border: 0;
      font-size: 3em;
      line-height: 65px;
      font-weight: bold;
      cursor: pointer;
      outline: none;
      z-index: 10000000000000;
    }
    
    .menu {
      z-index: 1000000;
      font-weight: bold;
      font-size: 0.8em;
      width: 100%;
      background: #f1f1f1;
      position: absolute;
      text-align: center;
      font-size: 12px;
    }
    
    .menu ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      list-style-image: none;
    }
    
    .menu li {
      display: block;
      padding: 15px 0 15px 0;
      border-bottom: #dddddd 1px solid;
    }
    
    .menu li:hover {
      display: block;
      background: #ffffff;
      padding: 15px 0 15px 0;
      border-bottom: #dddddd 1px solid;
    }
    
    .menu ul li a {
      text-decoration: none;
      margin: 0px;
      color: #666;
    }
    
    .menu ul li a:hover {
      color: #666;
      text-decoration: none;
    }
    
    .menu a {
      text-decoration: none;
      color: #666;
    }
    
    .menu a:hover {
      text-decoration: none;
      color: #666;
    }
    
    .glyphicon-home {
      color: white;
      font-size: 1.5em;
      margin-top: 5px;
      margin: 0 auto;
    }
    
    header {
      display: inline-block;
      font-size: 12px;
      padding-left: 20px;
    }
  </style>

  <title>hamburgers</title>

</head>

<body>

  <!-- This is how I want my hamburger icon/animation to look (the red one on the bottom right). However I need to put the text "menu" next to the icon when in desktop, but responsive and disappearing in mobile -->

  <div id="nav-icon4">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <!--I want the rest of the nav bar to resemble this (but with the red hamburger on the top right) and the drop down menu appearing when said icon is clicked-->

  <!-- The menu isn't working at all now. I assume there's some conflict with the jQuery codes for each menu but I may be totally off on that assumption. -->

  <header>
    <span>Shine Design</span>
    <button class="hamburger">&#9776;</button>
    <button class="cross">&#735;</button>
  </header>

  <div class="menu">
    <ul>
      <a href="#">
        <li>LINK ONE</li>
      </a>
      <a href="#">
        <li>LINK TWO</li>
      </a>
      <a href="#">
        <li>LINK THREE</li>
      </a>
      <a href="#">
        <li>LINK FOUR</li>
      </a>
      <a href="#">
        <li>LINK FIVE</li>
      </a>
    </ul>
  </div>

  <!-- Script (normally linked in external) for red hamburger -->

<script>

  $('#nav-icon4').click(function(){ 
    $(this).toggleClass('open'); 
  }); 

</script>

</body>

</html>

正在执行和格式化 jQuery 汉堡菜单

Executing and formatting jQuery hamburger menu

html

javascript

css

jquery

hamburger-menu