1차메뉴 2차메뉴 채택완료

아이소크 2년 전 조회 2,118

아래 사진처럼 메뉴1을 "클릭"하면 하단 공간에 메뉴1의 하위메뉴들이 나오고 메뉴2를 클릭하면 메뉴2의 하위메뉴들이 나오게 하고 싶습니다. 펼쳐진 하위 메뉴들은 다른 상위메뉴를 클릭하기 전까지는 다른 이벤트를 발생시키더라도 계속 유지됐으면 좋겠습니다.(루리웹과 같은 모습)

jquery,menu.js파일에서 $gnb.bind('click', ~ 또는 $gnb.on('click', ~ 과 같이 해보고 있는데 안되네요.. 도움의 손길 부탁드립니다..

#그누보드5

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

NiaoRenIT

2년 전

</p>

<pre boxid="code-TeKEQj" highlighted="true">
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>


</body>
</html></pre>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

NiaoRenIT

2년 전

</p>

<pre boxid="code-tyQsBp" highlighted="true">
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>풀다운 메뉴</h1>
<p>마우스를 버튼 위로 이동하세요.</p>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>
</body>
</html>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

1차메뉴 2차메뉴 채택완료

답변 2개

공유하기