묻고답하기
세로 메뉴 레이어 형식 문의 드립니다
2009.03.13 13:29
여기 저기서 필요한 내용들을 가져다가 넣어 봤는데, 잘 되지 않아서 문의 드립니다.
아래 내용과 같이 세로 메뉴를 오른쪽 레이어로 나오게 하려고 하는데 어디를 수정하면 될까요?
감사합니다
* 이런 형식으로 구현하고 싶습니다
http://www.washingtonmunhak.com/xe/layouts/ecMain/demo2.htm
* 문제가 있는 내용
http://www.washingtonmunhak.com/xe/?mid=test
<div id="ddsidemenubar" class="markermenu">
<ul><!--@foreach($main_menu->list as $key1 => $val1)--><!--@if($val1['text'])-->
<!--@if($val1['selected'])-->
{@ $menu_1st = $val1 }
<!--@end--><li <!--@if($val1['selected'])-->class="blackwhite"<!--@end-->><a href="{$val1['href']}" <!--@if($val1['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val1['text']}</a>
<!--@if($val1['list'])--><ul><!--@foreach($val1['list'] as $key2 => $val2)--><!--@if($val2['text'])--><li <!--@if($val2['selected'])-->class="blackwhite"<!--@end-->><a href="{$val2['href']}" <!--@if($val2['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val2['text']}</a>
<!--@if($val2['list'])--><ul><!--@foreach($val2['list'] as $key3 => $val3)--><!--@if($val3['text'])-->
<li <!--@if($val3['selected'])-->class="blackwhite"<!--@end-->><a href="{$val3['href']}" <!--@if($val3['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val3['text']}</a>
<!--@if($val3['list'])--><ul><!--@foreach($val3['list'] as $key4 => $val4)--><!--@if($val4['text'])-->
<li <!--@if($val4['selected'])-->class="blackwhite"<!--@end-->><a href="{$val4['href']}" <!--@if($val4['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val4['text']}</a>
</li><!--@end--><!--@end--></ul><!--@end-->
</li><!--@end--><!--@end-->
</ul><!--@end-->
</li><!--@end--><!--@end-->
</ul><!--@end-->
</li><!--@end--><!--@end-->
</ul><script type="text/javascript">
ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script></div>
CSS 내용들
/* ######### Marker List Vertical Menu ######### */
.markermenu{
width: 175px; /*width of side bar menu*/
height: 40px;
position: relative; /*Preserve this for "right" arrow images (added by script) to be positioned correctly*/
font: bold 16px "굴림", "돋움", Verdana, Helvetica, sans-serif;
padding: 3px 0;
text-decoration: none;
}
.markermenu ul{
list-style-type: none;
margin: 5px 0;
height: 40px;
padding: 0;
}
.markermenu ul li a{
background: #F2F2F2 3px center filter:alpha(opacity=50); /*light gray background*/
font: bold 13px "굴림","고딕" "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
height: 40px;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
}
* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}
.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}
.markermenu ul li a:hover, .markermenu ul li a.selected{
color: black;
background-color: #cacaca;
}
/* ######### Drop Down ULs CSS ######### */
.ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
font: normal 14px Verdana;
height:30px;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid #cacaca;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
height:30px;
color: black;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid #cacaca;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
/* ######### Neutral CSS ######### */
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
/* ######### Customized Drop Down ULs CSS (inherits from ddlevelsmenu-base.css) ######### */
.blackwhite li a:hover{
background: #3399cc ;
color: white;
}