0
Я пытаюсь узнать, как работает меню для гамбургеров. Это не работает. Я попытался добавить «готовую функцию», и ничего не изменилось. Я пишу js-код в html с тегом скрипта, должен ли я указывать код 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">☰</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>
</html>
It's Working. Спасибо @hetasbo – sshivankur
Это сделало трюк? – hetasbo