나는 css와 jQuery 만 사용하여 드롭 다운으로 반응 형 메뉴를 구축 중입니다. flexbox를 처음 접했을 때 드롭 다운이 올바르게 정렬되지 않았습니다. 다음 코드는 position : relative와 같은 표준 요소로 시도한 정렬되지 않은 드롭 다운 항목을 제외하고 작동합니다.css flexbox와 jquery를 사용하지 않고 반응 형 드롭 다운 탐색
햄버거를 표시하거나 숨기려면 체크 박스 (.toggle
)를 사용하고 있습니다. 일부 포인터에 대한 기대. (또한 JSFiddle here)
nav {
margin:0 auto;
max-width:700px;
width:100%;
}
.menu {background:#28303a;padding:0;margin:0;max-width:700px;height:50px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style-type: none;
}
.menu li a {padding:10px;border-radius:5px;align-self:center;}
.menu li a:hover { background: #0093bb;}
#checkbox1,.toggle { display: none;}
/* handle smaller screens here */
@media screen and (max-width: 550px) {
.menu {
flex-direction: column;
height: 0px;
}
.menu li {
display: flex;
align-self: center;
width:100%;
/* hide until user clicks on hamburger */
opacity: 0;
visibility: hidden;
}
.menu li a {
width: 100%;
text-align: center;
align-self: center;
align-content: center;
}
.toggle {
color:#fff;
clear: both;
display: block;
text-align: center;
line-height: 40px;
cursor: pointer;
width: 100%;
height: 40px;
}
.toggle:hover {
background: #0093bb;
}
#checkbox1:checked + label .menu li {
/* show menu - user clicked on hamburger */
opacity: 1;
visibility: visible;
}
#checkbox1:checked + label .menu {
height: 200px;
}
}
/* standard */
body {font-family: 'Open Sans';font-size:15px}
a{text-decoration:none;color:#fff}
.container {background:#28303a;}
<div class="container">
<nav>
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub items 1</a>
<!-- sub items below/this won't work:
<ul class="menu">
<li><a href="#">Sub 1a</a></li>
<li><a href="#">Sub 1b</a></li>
</ul>
-->
<li><a href="#">Sub items 2</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span class="toggle">☰</span>
</label>
</nav>
</div>
UPDATE :
여기 내 코드입니다 이것은 내가 마지막으로 작업있어 코드입니다. Edge, Chrome (pc/모바일), Firefox, IE 10-11 (IE10 -> 행운을 빕니다 :)에서 테스트되었습니다. 업데이트 된 CSS 외에도 이전 코드가 W3C 규격이 아니기 때문에 전체 <ul class="menu">
개를 <label for...>
외부로 옮겼습니다.
/* standard */
body {font-family: 'Open Sans';font-size:15px}
a {text-decoration:none;color:#fff}
/* code for responsive css dropdown starts here: */
.container {
background: #28303a;
padding-bottom: 10px;
display: flex;
justify-content: center;
}
nav {
box-sizing: border-box;
background: #28303a;
margin: 0;
padding: 0;
}
nav label {
padding: 0;
margin: 0
}
nav ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
}
nav li {
list-style-type: none;
padding:0 10px;
margin:0;
font-size:16px;
line-height:16px;
}
nav a, #checkbox1, .toggle {
font-size: 16px;
color: #fff;
width: 100%;
display: block;
line-height: 16px;
}
/* hide sub menu initially */
nav > ul > li ul {
display: none;
}
/* show sub menu on parent hover */
nav > ul > li:hover ul {
display: block;
background: #28303a
}
/* position sub menu */
ul ul {
position: absolute;
}
ul ul > li {
padding: 5px 8px;
}
/* toggle button hidden initially */
#checkbox1, .toggle {
display:none;
}
@media screen and (max-width:768px) {
nav {
width: 100%
}
nav ul {
flex-direction: column;
}
nav > ul > li {
justify-content: center;
text-align: center;
align-items: center;
align-content: center;
width: 100%;
padding:0;
height:0; /* set height to 0 so the menu won't take up space, until toggle=open*/
opacity:0;
visibility: hidden;
}
/* position sub menu */
ul ul {
position: relative
}
/* remove padding from sub menu items */
ul ul > li {
padding:0;
}
/* set padding for all a elements */
nav a {
padding: 3px 0;
}
nav a:hover {
background: #0093bb;
}
.toggle {
color: #fff;
clear: both;
display: block;
text-align: center;
cursor: pointer;
width: 100%;
padding: 0;
margin: 0;
}
.toggle:hover {
background: #0093bb;
}
/* show menu - user clicked on hamburger */
#checkbox1:checked + label + ul.menu > li {
opacity: 1;
visibility: visible;
height: auto;
}
}
<div class="container">
<nav>
<input type="checkbox" id="checkbox1" />
<label for="checkbox1"><span class="toggle">≡</span></label>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub items 1</a>
<ul>
<li><a href="#">Sub 1a</a></li>
<li><a href="#">Sub 1b</a></li>
</ul>
<li><a href="#">Sub items 2</a>
<ul>
<li><a href="#">Sub 2a</a></li>
<li><a href="#">Sub 2b</a></li>
<li><a href="#">Sub 3c</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
게시 주셔서 감사합니다. 그러나, 당신이 쓴대로 그것은 (나는 필요한) 반응이 없습니다. 응답하지 않는 영지에 하위 메뉴 만들기 이미 생각했지만 어떤 경우에도 입력에 감사드립니다. :) – Sha