0
나는 앞으로 프로젝트에서 작업 할 때 반응 형 탐색 모음을 템플릿으로 사용하려고 노력해 왔습니다. Ive는 몇 가지 자습서를 따랐고 ive가 배웠던 것을 함께 뭉개 버렸습니다. 이제는 내가 만들 수없는 햄버거 메뉴를 토글하려고 할 때 전환 할 수있는 것처럼 보이고 내가 뭘 잘못하고 있는지 파악할 수 없습니다. 아직도 이것에 초보자 그래서 만약 누군가가 큰 방향으로 나를 가리킬 수 있습니다. 여기자바 스크립트 햄버거 메뉴 토글
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Navigation</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<nav class="nav-main">
<img class="logo" src="images/melogo.png" alt="logo">
<span class="nav-button"> </span>
<ul class="nav">
<li>
<a href="#" class="nav-item">Home</a>
</li>
<li>
<a href="#" class="nav-item">Images</a>
</li>
<li>
<a href="#" class="nav-item">Spots</a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li><a href="#" class="nav-item">Street spots</a></li>
<li><a href="#" class="nav-item">Skateparks</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav-item">About us</a>
</li>
</ul>
</nav>
<script>
$('span.nav-button').click(function {
$('.nav-main ul').toggle();
})
</script>
<div class="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<!-- page content -->
</body>
</html>
그리고 내 CSS입니다 : 어떤 도움을 크게 감상 할 수
body, html{
margin: 0;
padding: 0;
}
.content{
padding: 30px;
}
.nav-main{
width: 100%;
background-color: #222;
height: 70px;
color: #fff;
}
.nav-main .logo{
float: left;
max-width: 250px;
padding: 20px 30px;
}
.nav-main > ul {
margin: 0;
padding: 0;
float: right;
list-style-type: none;
}
.nav-main > ul > li{
float: right;
}
.nav-item{
display: inline-block;
padding: 25px 10px;
color: #fff;
text-decoration: none;
}
.nav-item:hover{
background-color: #444;
}
.nav-content{
position: absolute;
top: 70px;
overflow: hidden;
background-color: #222;
max-height: 0;
}
.nav-content a{
text-decoration: none;
color: #fff;
}
.nav-content a:hover{
}
.nav-sub{
padding: 20px;
}
.nav-sub ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-sub ul li a{
padding: 5px 0;
display: inline-block;
}
.nav-item:focus{
background-color: #444;
}
.nav-item:focus ~ .nav-content{
max-height: 400px;
-webkit-transition: max-height: 0.4s ease-in;
-moz-transition: max-height: 0.4s ease-in;
transition: max-height: 0.4s ease-in;
}
@media screen and (max-width: 600px){
.nav-main{
width: 100%;
background-color: #222;
min-height: 70px;
color: #fff;
display: block;
}
.nav-main > ul {
clear:both;
background-color: #222;
width: 100%;
}
.nav-main > ul > li{
width: 100%;
}
.nav-item{
text-decoration: none;
width: 100%;
text-align: center;
}
.nav-button{
display: block;
background-color: #222;
color: red;
font-size: 40px;
text-align: center;
cursor: pointer;
float: right;
padding-right: 30px;
}
.nav-button:before{
content: "H";
}
}
이
은 여기 내 HTML과 자바 스크립트입니다.
감사합니다.
$('span.nav-button').click(function() {
$('.nav-main ul').slideToggle();
});
:
f를 알기가 어렵습니다. 문제가 무엇인지 정확하게 물어보십시오. '전환하지 않음'은 우리의 관점에서 너무 모호합니다. 당신이 이미 시도한 것들과 함께 당신의 문제를 JS 바이올린을 제공 할 수 있다면 가장 좋을 것입니다. –
당신이 원하는 코드가 무엇을하는지에 대해 설명 할 수 있습니까? –
구문 오류 : https://jsfiddle.net/dkdsgrry/ 피들에서 코드 검사 ... $ ('span.nav-button') .click (function() { $ ('. nav-main ul'). toggle(); }); – sinisake