汉堡菜单不起作用

我想了解汉堡菜单的工作原理。它不工作。我曾尝试添加'ready函数'以及没有任何更改。我用脚本标记在html中编写js代码，我应该分别提到js代码吗？汉堡菜单不起作用

<script> 
 
$(document).ready(function() { 
 
$(".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{ 
 
    font-family: 'Noto Sans', sans-serif; 
 
\t margin:0; 
 
    background-image: url('https://unsplash.imgix.net/41/yEWFnFQRqfmY9l9efJ6g_Snap01-web.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=7580de2dc3b3821f0dc1c97f2d60fe7c'); 
 
} 
 
header{ 
 

 
    width:100%; 
 
\t background:#1d1f20; 
 
\t height:50px; 
 
\t line-height:50px; 
 
} 
 

 
.hamburger{ 
 
    background:none; 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    line-height:45px; 
 
    padding:0px 15px 0px 15px; 
 
    color:#fff; 
 
    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:0px 15px 0px 15px; 
 
    color:#fff; 
 
    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:#131313; position:absolute; text-align:center;} 
 
.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:#1d1f20 1px solid;} 
 
.menu li:hover{display: block; background:#181818; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;} 
 
.menu ul li a { text-decoration:none; margin: 0px; color:#fff;} 
 
.menu ul li a:hover { color: #fff; text-decoration:none;} 
 
.menu a{text-decoration:none; color:white;} 
 
.menu a:hover{text-decoration:none; color:white;} 
 

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

<html> 
 
\t <head> 
 
\t \t <title>Hello</title> 
 
\t \t <link type="text/css" rel="stylesheet" href="new9.css"/> 
 
\t </head> 
 
\t 
 
<header> 
 
    <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> 
 

 
</html>

来源

2015-08-17 sshivankur

你应该导入jQuery来你的头。

<head> 
    <title>Hello</title> 
    <link type="text/css" rel="stylesheet" href="new9.css"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
</head>

来源

2015-08-17 21:31:05 hetasbo

它工作。谢谢@hetasbo – sshivankur

这是否有诀窍？ – hetasbo

汉堡菜单不起作用

回答

相关问题