묻고답하기
드롭다운 메뉴는 어떻게 꾸미나요?
2013.04.01 08:39
URL : http://93th.woobi.co.kr
여기 계시는 많은 분들의 도움을 받아 드디어 메뉴 클릭 시 서브 메뉴가 나타나게까지는
했습니다. (맨 왼쪽 메뉴 클릭시 드롭 다운 메뉴 나타남)
그런데, 이 드롭다운 메뉴를 꾸며야 하는데, CSS 에서 어느 부분을 손 봐줘야 할지 모르겠습니다.
<div class="mainNav">
<ul class="nav">
<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 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>
<ul class="nav">
<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 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>
.header .mainNav { position:absolute; bottom:0px; margin:0 auto; width:968px; height:32px; background:url(../img/bg_subheader.gif) repeat-x; }
.header .mainNav .nav { overflow:hidden; margin:0; padding:0; border:1px #fff dotted; }
.header .mainNav .nav li { display:block; float:left; margin:0 0; }
.header .mainNav .nav li a { text-decoration:none; font:10px }
.header .mainNav .nav { overflow:hidden; margin:0; padding:0; border:1px #fff dotted; }
.header .mainNav .nav li { display:block; float:left; margin:0 0; }
.header .mainNav .nav li a { text-decoration:none; font:10px }
메인 메뉴 관련 html 과 css 인데요. 사이트에서 보시면 아시겠지만, 드롭 다운 메뉴가 현재
아무 것도 안 꾸며져 있는 상태입니다... 드롭다운 메뉴를 좌측으로, 세로로 정렬하고 싶은데...
어떻게 해야 하나요?... css 에서 아무리 꾸며도 먹혀 들어가는 게 아무 것도 없네요...
xe_official 레이아웃에 사용된 코드들을 보았는데도 도저히 감이 안오네요...
예를 들어 2 더하기 2는 무었이냐 라고 묻는 질문이 있다면 4 입니다....라고 답변이 가능하지만
이러한 질문은 과정을 설명을 해야 하는 질문이라 그대로 복사해서 붙여넣고 사용할 수 있는 그러한 답변이 어렵습니다.
메뉴를 구성하는 데에는 html, css 만으로도 구성을 할 수 있고, javascript 를 추가하면 더 효과적이고
요즘은 jquery 같은 것으로 많이들 사용하지만 그와 비슷한 여러가지 라이브러리를 사용하기 때문에
스스로 장점과 특징을 파악해서 만들어야 합니다.
차 값이 얼마입니까? 라고 묻는다면 그 차 값을 말해줄 수 있지만
차가 어떻게 움직이나요? 라고 누가 묻는다면 어떻게 설명을 해야할까요?
질문자의 정보습득 수준에 따라 다르겠지만 한마디로 설명하기 힘들죠.....
지금 질문이 그러한 질문과 유사한 질문으로 보여집니다.
즉,
기존의 코드를 보고 스스로 공부를 해서 습득을 해야 한다는 뜻이죠......
구글에서 검색하면 공부할 수 있는 자료들이 넘쳐납니다.....
단지 짧은 시간에 공부하지 않고 원하는 답변을 얻을려고 한다면
제작의뢰 형식이 딱 맞는 것이겠죠......물론 비용이 든다는 단점이 있지만.......
http://www.xpressengine.com/qna/19919369
이것은 html과 css 만으로 작성된 메뉴입니다.
css를 잘 보시고 어떻게 작동되는지 기본적인 공부를 하는데 도움이 될 겁니다.......
나중에 더 효과를 넣어서 만들고 싶다면 자바스크립트나 jquery 혹은 부트스트랩같은 것으로 공부를 해서 적용하면 됩니다......
도움이 되셨길......