묻고답하기
안녕하세요 2차메뉴 가로로 만드는 법..
2014.04.09 13:04
안녕하세요. 현재 가로메뉴를 만드는 법에 대해 궁금해서요.. 여기서 검색해도 가로메뉴에 대한 것을 정확하게 못찾는 것인지..
뭔가 풀어나갈 방법이라도 있다면 알려주세요 ㅜ.ㅜ
gnb 쪽은 이렇게 .. 이게 맞는지 모르겠네요 ㅠㅠ
---html ----
<div id="gnb_menu">
<ul class="gnb_ul">
<li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul class="sub" cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
css는 이런 형식인데 .. 어떻게 고쳐야하는지 전혀 모르겠어요 ㅜ
--- css---
.header .menu #gnb_menu { width:1300px height:76px; float:left; margin:0 auto; }
.header .menu #gnb_menu ul { list-style:none; padding:0; margin:0; }
.header .menu #gnb_menu .gnb_ul>li { position:relative; float:left; white-space:nowrap; }
.header .menu #gnb_menu .gnb_ul>li>a { font-size:15px; font-weight:bold; color:#393939; display:block; height: 45px; line-height: 45px; padding:0px; }
.header .menu #gnb_menu .sub { display:none; position:absolute; top:45px; min-width:84px; background:url('./../img/blackglass.png'); padding:10px; z-index:10; }
.header .menu #gnb_menu .sub>li { height:20px; line-height:20px; padding-left: 15px; }
.header .menu #gnb_menu .sub>li>a { color:#fff; }
- [2021/01/23] 묻고답하기 2차메뉴의 내용이 위젯넣는 메인좌측에 왜 나오는지요.
- [2010/12/02] 묻고답하기 2차 메뉴 출력 방법을 알려주세요
- [2010/08/22] 묻고답하기 baedalnet 레이아웃과 롤오버 메뉴 *1
- [2009/03/21] 묻고답하기 메뉴출력기 ver 0.1위젯 질문입니다.
- [2008/05/03] 웹마스터 팁 메인메뉴에서 2차메뉴가 1차메뉴를 따라다니는 롤오버 메뉴로 만들기 *13
댓글 4
-
닉이
2014.04.09 13:08
-
임실치즈
2014.04.10 14:48
댓글이 수정이 안되어서 2차메뉴가
메뉴A
-메뉴1 메뉴2 메뉴3
이런식으로 가로로 정렬만되면 될꺼 같은데 ㅜ 이부분이 어렵네요 ..
대분류 위에 마우스를 올리게되면 2차메뉴가 가로로나오면서 드랍되 어있으면 좋겠어요 ㅜㅜ
그리고 1차메뉴를 눌렀을떄는 2차메뉴 가로형식으로 되어있는게 나와 있었으면 좋겠구요.
-
임실치즈
2014.04.10 14:49
이부분에 수정해야하는 쪽은 어디일까요 ?ㅜ ㅜ 너무너무 어렵네요 .. 공부할 수 있는 곳이라도 아니면 힌트라도 ..부탁드려요 ㅠㅠ 제발 .
-
닉이
2014.04.10 15:59
.header .menu #gnb_menu .sub>li { float:left; height:20px; line-height:20px; padding-left: 15px; }
float:left; 를 추가하면 2차메뉴가 가로로 정렬이 될꺼예요. 그외 넓이나 간격, 모양등 세세한부분은 따로 수정하셔야될듯.
정확히 어떻게 바꾸고싶으신거죠? 그림이라도 있으면 이해가 좀 빠를꺼 같습니다.