0
我無法弄清楚如何製作漢堡包菜單，我只是花了一天的時間去實際做別的事情而非看起來很可愛。我一直在試圖將我收集的幾個不同的代碼塊放在一起來創建我所設想的內容，但是由於我對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">☰</button>
<button class="cross">˟</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>
所以問題漢堡包圖標顯示不正確的？ – silvachathura
我編輯了代碼。忘了在底部放置jQuery的
試試這個：
編號：https://jsfiddle.net/f19kz640/
來源
2017-04-20 07:16:24
我真的很喜歡這種轉變！這不是我現在要做的，但我肯定會在這裏放書籤。謝謝！ – SShine2
歡迎@ SShine2 –
所以我刪除了jQuery的灰色圖標它不工作。 另外你不需要用文檔準備好包裝紅色漢堡包菜單的jQuery。
來源
2017-04-20 07:23:21 RacoonOnMoon
這個問題已經回答，而我張貼，我猜。 Sry基因 – RacoonOnMoon