执行并格式化jQuery汉堡包菜单

我无法弄清楚如何制作汉堡包菜单，我只是花了一天的时间去实际做别的事情而非看起来很可爱。我一直在试图将我收集的几个不同的代码块放在一起来创建我所设想的内容，但是由于我对jQuery有些不熟悉，因此无法正常工作。我想我可能会错过简单的东西，但也许不会。无论如何...您的帮助非常感谢！（注释描述我尝试在代码中做。执行并格式化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>

来源

2017-04-20 SShine2

所以问题汉堡包图标显示不正确的？ – silvachathura

我编辑了代码。忘了在底部放置jQuery的

试试这个：

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

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/

来源

2017-04-20 07:16:24

我真的很喜欢这种转变！这不是我现在要做的，但我肯定会在这里放书签。谢谢！ – SShine2

欢迎@ SShine2 –

所以我删除了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>

来源

2017-04-20 07:23:21 RacoonOnMoon

这个问题已经回答，而我张贴，我猜。 Sry基因 – RacoonOnMoon

执行并格式化jQuery汉堡包菜单

相关问题