css 정렬, 제이쿼리 질문 드립니다.

현재접속자 최신글 매뉴얼 FAQ
그누보드5
그누보드6
가이드
포럼
  • Q&A
  • 파이써니스타
  • 이슈
  • 버그신고
  • 사용후기
    • 자료실
  • 다운로드
  • 팁자료실
  • 스킨
  • 테마
  • 플러그인
    • Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    프로모션! 신용카드 결제수수료 2.9%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타
    css 정렬, 제이쿼리 질문 드립니다.

    QA

    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 위로 메뉴가 열립니다. 이걸 아래로 내리고 싶습니다. ㅠㅠ

    #css #jquery

    이 질문에 댓글 쓰기 :

    답변 3

    onlymilk47 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    125.♡.♡.119

    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);
})

    배르만 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    119.♡.♡.88
    
<!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>

    기다림00 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    118.♡.♡.105

    전체적으로 수정하셔야 할거 같네요. 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;}


    답변을 작성하시기 전에 로그인 해주세요.
    전체 77
    QA 내용 검색

    회원로그인

    인기태그
    #그누보드5(59510) #영카트5(16775) #php(14952) #그누보드4(10632) #게시판(3155) #javascript(2632) #그누보드(2343) #css(2042) #mysql(1506) #모바일(1271) #영카트(1270) #그누커머스(1178) #html(1098) #jquery(1012) #자바스크립트(935) #최신글(931) #DB(818) #로그인(791) #이미지(762) #여분필드(736)
    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT