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