css 정렬, 제이쿼리 질문 드립니다. 채택완료
</p><p>
</p><p><div class="menu-group"></p><p> <h4>메뉴1번</h4></p><p> <ul></p><p> <li>메뉴1-1</li></p><p> <li>메뉴1-2</li></p><p> <li>메뉴1-3</li></p><p> </ul></p><p></div></p><p>
</p><p><div class="menu-group"></p><p> <h4>메뉴2번</h4></p><p> <ul></p><p> <li>메뉴2-1</li></p><p> <li>메뉴2-2</li></p><p> <li>메뉴2-3</li></p><p> </ul></p><p></div></p><p>
</p><p><div class="menu-group"></p><p> <h4>메뉴3번</h4></p><p> <ul></p><p> <li>메뉴3-1</li></p><p> <li>메뉴3-2</li></p><p> <li>메뉴3-3</li></p><p> </ul></p><p></div></p><p>
</p><p><div class="menu-group"></p><p> <h4>메뉴4번</h4></p><p> <ul></p><p> <li>메뉴4-1</li></p><p> <li>메뉴4-2</li></p><p> <li>메뉴4-3</li></p><p> </ul></p><p></div></p><p>
</p><p><ul class="main-menu"></p><p> <li><a href="#" class="menu">메뉴1번</a></li></p><p> <li><a href="#" class="menu">메뉴2번</a></li></p><p><span style="white-space:pre"> </span><li><a href="#" class="menu">메뉴3번</a></li></p><p><span style="white-space:pre"> </span><li><a href="#" class="menu">메뉴4번</a></li></p><p><span style="white-space:pre"> </span></ul></p><p>
</p><p>
</p><p><style type="text/css"></p><p>
</p><p>.menu-group {display:none;}</p><p>.menu-group h4{font-size:14px; font-weight:bold;margin-bottom:10px; border-bottom:1px dashed #ddd}</p><p>.menu-group {margin:10px; padding:20px; border:1px solid #ddd}</p><p>.main-menu{ font-size:18px; font-weight:bold;margin:0 auto;}</p><p>.main-menu li{border:1px solid #ddd; padding:10px;text-align:center;margin:2px;}</p><p></style></p><p>
</p><p><script type="text/javascript"></p><p>
</p><p>function showMenu(){</p><p> </p><p> var idx = $('.menu').index(this);</p><p> </p><p> $('.menu-group').each(function(i, ele){</p><p> if(idx==i) return;</p><p> $('.menu-group').eq(i).hide();</p><p> });</p><p> </p><p> $('.menu-group').eq(idx).toggle();</p><p>}</p><p>
</p><p>
</p><p>$(function(){</p><p> $('.menu').click(showMenu);</p><p>})</p><p>
</p><p></script></p><p>
</p><p>
현재 코드 입니다.
결과물은
1
2
3
4
이렇게 가로로 100%로 잡혀 있습니다.
근데 이걸
1 2
3 4
이런식으로 변경하고 싶구요..
클릭 했을경우 메뉴가 열리는데
1 2 3 4 위로 메뉴가 열립니다. 이걸 아래로 내리고 싶습니다. ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
onlymilk47
8년 전
css 와 위치 수정했습니다.
</p><p>
</p><p><div class="menu_con"></p><p><span style="white-space:pre"> </span><!-- 메뉴부분 --></p><p><span style="white-space:pre"> </span><ul class="main-menu"></p><p><span style="white-space:pre"> </span><li><a href="#" class="menu">메뉴1번</a></li></p><p><span style="white-space:pre"> </span><li><a href="#" class="menu">메뉴2번</a></li></p><p><span style="white-space:pre"> </span><li><a href="#" class="menu">메뉴3번</a></li></p><p><span style="white-space:pre"> </span><li><a href="#" class="menu">메뉴4번</a></li></p><p><span style="white-space:pre"> </span></ul></p><p>
</p><p><span style="white-space:pre"> </span><!-- 메뉴그룹부분 --></p><p><span style="white-space:pre"> </span><div class="menu-group"></p><p><span style="white-space:pre"> </span><h4>메뉴1번</h4></p><p><span style="white-space:pre"> </span><ul></p><p><span style="white-space:pre"> </span><li>메뉴1-1</li></p><p><span style="white-space:pre"> </span><li>메뉴1-2</li></p><p><span style="white-space:pre"> </span><li>메뉴1-3</li></p><p><span style="white-space:pre"> </span></ul></p><p><span style="white-space:pre"> </span></div></p><p>
</p><p><span style="white-space:pre"> </span><div class="menu-group"></p><p><span style="white-space:pre"> </span><h4>메뉴2번</h4></p><p><span style="white-space:pre"> </span><ul></p><p><span style="white-space:pre"> </span><li>메뉴2-1</li></p><p><span style="white-space:pre"> </span><li>메뉴2-2</li></p><p><span style="white-space:pre"> </span><li>메뉴2-3</li></p><p><span style="white-space:pre"> </span></ul></p><p><span style="white-space:pre"> </span></div></p><p>
</p><p><span style="white-space:pre"> </span><div class="menu-group"></p><p><span style="white-space:pre"> </span><h4>메뉴3번</h4></p><p><span style="white-space:pre"> </span><ul></p><p><span style="white-space:pre"> </span><li>메뉴3-1</li></p><p><span style="white-space:pre"> </span><li>메뉴3-2</li></p><p><span style="white-space:pre"> </span><li>메뉴3-3</li></p><p><span style="white-space:pre"> </span></ul></p><p><span style="white-space:pre"> </span></div></p><p>
</p><p><span style="white-space:pre"> </span><div class="menu-group"></p><p><span style="white-space:pre"> </span><h4>메뉴4번</h4></p><p><span style="white-space:pre"> </span><ul></p><p><span style="white-space:pre"> </span><li>메뉴4-1</li></p><p><span style="white-space:pre"> </span><li>메뉴4-2</li></p><p><span style="white-space:pre"> </span><li>메뉴4-3</li></p><p><span style="white-space:pre"> </span></ul></p><p><span style="white-space:pre"> </span></div></p><p></div></p><p>
</p><p><style type="text/css"></p><p>.menu_con{position:relative;width:100%;margin:0px;padding:0px;}</p><p>
</p><p>.menu-group {display:none;}</p><p>.menu-group h4{font-size:14px; font-weight:bold;margin-bottom:10px; border-bottom:1px dashed #ddd}</p><p>.menu-group {margin:10px; padding:20px; border:1px solid #ddd}</p><p>
</p><p>.main-menu:after {content:""; display:block; clear:both;}</p><p>.main-menu{ position:relative;width:100%; font-size:18px; font-weight:bold;margin:0;padding:0px;}</p><p>.main-menu li{list-style-type:none;float:left;width:50%;padding:0px;margin:0px;text-align:center;}</p><p>.main-menu li a{display:block;padding:10px;margin:10px;border:1px solid #ddd;}</p><p></style></p><p>
</p><p><script type="text/javascript"></p><p>
</p><p>function showMenu(){</p><p> </p><p> var idx = $('.menu').index(this);</p><p> </p><p> $('.menu-group').each(function(i, ele){</p><p> if(idx==i) return;</p><p> $('.menu-group').eq(i).hide();</p><p> });</p><p> </p><p> $('.menu-group').eq(idx).toggle();</p><p>}</p><p>
</p><p>
</p><p>$(function(){</p><p> $('.menu').click(showMenu);</p><p>})</p><p>
</p><p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
기다림00
8년 전
전체적으로 수정하셔야 할거 같네요. html도 아래처럼 작성하시고
css를 대략 아래처럼 작성하시면 됩니다.
#gnb {display:inline-block; width:100%;}
#gnb > li {float:left; position:relative; width:20%;}
#gnb > li > ul {position:absolute; top:30px; left:0;}
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
8년 전
</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p> <meta charset="UTF-8" /></p><p> <title>title</title></p><p> <style type="text/css"></p><p> .menu-group {display:none;}</p><p> .menu-group h4{font-size:14px; font-weight:bold;margin-bottom:10px; border-bottom:1px dashed #ddd}</p><p> .menu-group {margin:10px; padding:20px; border:1px solid #ddd}</p><p> .main-menu{ font-size:18px; font-weight:bold;margin:0 auto;}</p><p> .main-menu li{border:1px solid #ddd; padding:10px;text-align:center;margin:2px;}</p><p>
</p><p> /* ------------- add ------------- */</p><p> .main-menu li { float: left; }</p><p> .main-menu li:nth-child(odd) { clear: left; }</p><p> .main-menu:after { content: ""; display: block; clear: left; }</p><p> /* ------------- add ------------- */</p><p> </style></p><p> </p><p> <script type="text/javascript" src="<a href="<a href="http://code.jquery.com/jquery.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery.min.js</a>"><a href="http://code.jquery.com/jquery.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery.min.js</a></a>"></script></p><p> <script type="text/javascript"></p><p> function showMenu(){</p><p> var idx = $('.menu').index(this);</p><p> $('.menu-group').each(function(i, ele){</p><p> if(idx==i) return;</p><p> $('.menu-group').eq(i).hide();</p><p> });</p><p> $('.menu-group').eq(idx).toggle();</p><p> }</p><p> $(function(){</p><p> $('.menu').click(showMenu);</p><p> })</p><p> </script></p><p></head></p><p><body></p><p>
</p><p> <ul class="main-menu"></p><p> <li><a href="#" class="menu">메뉴1번</a></li></p><p> <li><a href="#" class="menu">메뉴2번</a></li></p><p> <li><a href="#" class="menu">메뉴3번</a></li></p><p> <li><a href="#" class="menu">메뉴4번</a></li></p><p> </ul></p><p>
</p><p> <div class="menu-group"></p><p> <h4>메뉴1번</h4></p><p> <ul></p><p> <li>메뉴1-1</li></p><p> <li>메뉴1-2</li></p><p> <li>메뉴1-3</li></p><p> </ul></p><p> </div></p><p>
</p><p> <div class="menu-group"></p><p> <h4>메뉴2번</h4></p><p> <ul></p><p> <li>메뉴2-1</li></p><p> <li>메뉴2-2</li></p><p> <li>메뉴2-3</li></p><p> </ul></p><p> </div></p><p>
</p><p> <div class="menu-group"></p><p> <h4>메뉴3번</h4></p><p> <ul></p><p> <li>메뉴3-1</li></p><p> <li>메뉴3-2</li></p><p> <li>메뉴3-3</li></p><p> </ul></p><p> </div></p><p>
</p><p> <div class="menu-group"></p><p> <h4>메뉴4번</h4></p><p> <ul></p><p> <li>메뉴4-1</li></p><p> <li>메뉴4-2</li></p><p> <li>메뉴4-3</li></p><p> </ul></p><p> </div></p><p>
</p><p></body></p><p></html></p><p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
채택
채택
답변대기
답변대기
채택
답변대기
채택
채택
답변대기
채택
답변대기
채택
채택
채택
답변대기
답변대기
채택
채택
채택