<style>
    body {backgound-color:#ccc;
        margin:20px auto;
        padding: 0;
        font-family:"맑은 고딕";
        font-size:0.9em;
}
    ul#navi {
        width: 200px;
        text-indent: 10px;
}
    ul#navi, ul#navi ul {
        margin:0;
        padding:0;
        list-style:none;
}
    li.group {
        margin-bottom: 3px;
}
    li.group div.title {
        height: 35px;
        line-height: 35px;
        background:#9ab92e;
        cursor:pointer;
}
    ul.sub li {
        margin-bottom: 2px;
        height:35px;
        line-height:35px;
        background:#f4f4f4;
        cursor:pointer;
}
    a {
        display: block;
        width: 100%;
        height:100%;
        text-decoration:none;
        color:#000;
}
    ul.sub li:hover {
        background:#cf0;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    $(document).ready(function(){
       
        //모든 서브 메뉴 감추기
        $(".sub").css({display:"none"});
        //$(".sub").hide(); //위코드와 동일

        $(".title").click(function(){
            //일단 서브메뉴 다 가립니다.
            //$(".sub").css({display:"none"});
           
            //열린 서브메뉴에 대해서만 가립니다.
            $(".sub").each(function(){
                console.log($(this).css("display"));
                if($(this).css("display")=="block") {
                    //$(".sub").css({display:"none"});
                    //$(this).hide();
                    $(this).slideUp("fast");
                }
            });

            //현재 요소의 다음 요소를 보이게 합니다.
            //$(this).next("ul").css({display:"block"});
            //$(this).next("ul").show();
            $(this).next("ul").slideDown("fast");

        })
    });

 

 

 

 

<ul id="navi">
        <li class="group">
            <div class="title">제목</div>
            <ul class="sub">
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub1</a></li>
            </ul>
        </li>
        <li class="group">
            <div class="title">title 2</div>
            <ul class="sub">
                <li><a href="#">sub2</a></li>               
            </ul>
        </li>
        <li class="group">
            <div class="title">title 3</div>
            <ul class="sub">
                <li><a href="#">sub3</a></li>               
                <li><a href="#">sub3</a></li>   
            </ul>
        </li>       
    </ul>

 

 

 

 

이거를 레이아웃에 적용하려면 어떻게해야할까요...

title을 클릭하면 서브메뉴가 나오면서 아래로 밀리는 형식인데

2차메뉴가 있는 메뉴는 메뉴자체링크를 없애고 2차메뉴를 나오게하고

없는메뉴는 그것만으로 링크를 넣고싶은데

이것저것 가져다 붙이고 해봐도 안되네요 ㅜㅜㅜㅜ

 

 

 

 

 

 <ul>
 <div id="navi">
  <li loop="$main_menu->list=>$key1,$val1">
  <!--if@(count($val['list'] >0)-->
   <div class="group">
    <div class="title">{$val1['link']}</div>
      <ul class="sub">
     <li loop="$val1['list']=>$key2,$val2">
     <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
     </li>
      </ul>
   </div>
  <!--@else-->
   <div class="group">
    <div class="title">
    <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
    </div>
   </div>
  <!--@endif-->
  </li>
 </div>
 </ul>
 

 

 

 

얕은 지식으로 여기저기 뒤져가며 복사해다 붙여봤는데 역시나 오류만뜨는데

뭘 어떻게해야 원하는데로 할수있을까요 ㅜㅜ

 

http://hinggo.dothome.co.kr/test.html

 

이런식으로 처음메뉴는 하위메뉴가있어서 누르면 링크없이 하위메뉴가 나오고

두번째메뉴는 하위메뉴 없이 해당링크로 가는 메뉴를 만들고싶어요 도와주세요 ㅜㅜ