자동메뉴 현재페이지 표시
본문
첨부 이미지와 같이 서브페이지로 갔을 경우 현 위치 페이지 메뉴가 구분되게 하고 싶습니다.
$g4_group_select = "gr_id, gr_subject, gr_admin, gr_use_access, gr_1, gr_10";
$home_ex_main = "'pn21' , 'admin' , 'html'"; //'group1','group2' 와 같이 제외 할 그룹 아이디 입력
$excgr = "(".$home_ex_main.")";
$g4_group_sql = " select $g4_group_select from $g4[group_table] where gr_id not in " . $excgr . " order by gr_1 asc";
$g4_group_result = mysql_query($g4_group_sql);
$g4_group[$i] = $g4_group_row;
for ($i=0; $i<count($g4_group); $i++){
$g_menu[$i] = $g4_group[$i][gr_subject];
$g_link[$i] = $g4_group[$i][gr_10];
$g_menu_s[$i] = $g4_group[$i][gr_subject];
$g_menu_h[$i] = "$g4[path]/index.php?gr_id={$g4_group[$i][gr_id]}";
$group_id[$i] = $g4_group[$i][gr_id];
$gr_bo_c[$i] = 0;
}
<div id='cssmenu'>
<ul>
<? for($i=0; $i<$gmc; $i++){ ?>
<li class='has-sub'><a href="<?=$g_link[$i]?>"><span class='cssmenu_root'><?=$g_menu[$i]?></span></a>
<ul>
<? for($k=0; $k<$gr_bo_c[$i]; $k++){ ?>
<li><a href="<?=$s_href[$i][$k]?>"><span class='cssmenu_sub'><?=$s_menu[$i][$k]?></span></a></li>
<? } ?>
</ul>
</li>
<? } ?>
</ul>
</div>
</div>
답변 4
border-top: 0 none;
border-left: 1px solid #3891c1;
background: #0a84c3 url(images/grad_dark2.png) repeat-x left bottom;
text-align: center;
}
border-top: 0 none;
border-left: 1px solid #3891c1;
background: #0a84c3 url(images/grad_dark2.png) repeat-x left bottom;
text-align: center;
}
<div id='cssmenu'>
<ul>
<? for($i=0; $i<$gmc; $i++){
<li class='has-sub<?=$onmenu?>'><a href="<?=$g_link[$i]?>"><span class='cssmenu_root'><?=$g_menu[$i]?></span></a>
<ul>
<? for($k=0; $k<$gr_bo_c[$i]; $k++){ ?>
<li><a href="<?=$s_href[$i][$k]?>"><span class='cssmenu_sub'><?=$s_menu[$i][$k]?></span></a></li>
<? } ?>
</ul>
</li>
<? } ?>
</ul>
</div>
</div>
올려주신 소스를 토대로 좀 더 연구해 보겠습니다.
정말~ 감사드립니다.^^
소스는 간단합니다........
if($g_menu[$i] == $g_menu[$i]) { //현재 페이지가 같은그룹의 제목인가 맞다면 1을 아니라면 없음
$onmenu = "1";
}else{
$onmenu = "";
}
위에서 1이나 없음시 li를 만드는 박스의 스타일에 has-sub1 이되거나 종전대로 has-sub가 되는거에요.
<li class='has-sub<?=$onmenu?>'>
css 에서 추가로 만든 has-sub1 에대한 스타일은 따로 만든거구요. 백그라운드컬러를 바꾸거나
color:red; 를 추가해서 글자색도 변경하시면 됩니다.
#cssmenu .has-sub1 ul li {
border-top: 0 none;
border-left: 1px solid #3891c1;
background: #0a84c3 url(images/grad_dark2.png) repeat-x left bottom;
text-align: center;
}
중요한건 현재의 그룹제목인데
$g_menu[$i] 이게 맞나 모르겟네요......
아니면 $g4_group_result[gr_subject] 이걸로 바꿔보세요.
css는 아래와 같습니다.^^ 감사합니다.
#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a { margin: 0; padding: 0; position: relative; z-index:9999;}
#cssmenu:after,#cssmenu ul:after {content: ''; display: block; clear: both;}
#cssmenu a { color:#fff; display: inline-block; min-width: 35px; text-align: center; text-decoration: none; text-shadow: 0 0px 0 #333;}
#cssmenu ul { list-style: none;}
#cssmenu > ul > li { float: left; width:157px; border-right: 0px solid #3891c1;border-left: 1px solid #3891c1;} /*주메뉴 가로 조정 width */
#cssmenu > ul > li.mallMenuView a {font-size:14px; width: 149px; color:#B5E3FF;background: #024770 url(images/grad_dark.png) repeat-x bottom;} /*사이트맵 가로 조정 width */
#cssmenu > ul > li.active a {background: #024770 url(images/grad_dark.png) repeat-x left top;}
#cssmenu > ul > li.active a:hover {}
#cssmenu > ul > li a {
color:#b5e3ff;
/* background: #0a84c3 url(images/grad_dark.png) repeat-x left top; */
background: #0d78bc repeat-x left top;
border-bottom: 1px solid #3891c1;
border-top: 1px solid #3891c1;
border-right: 1px solid #3891c1;
line-height: 38px;
width:157px; /*서브메뉴 가로 조정 width */
padding: 0px 0px 0px 0px;
}
#cssmenu > ul > li a:hover {
color:#fff;
background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
color: #fff;
}
#cssmenu > ul > li:first-child a {}
#cssmenu > ul > li:last-child a {}
#cssmenu .has-sub:hover ul {display: block;}
#cssmenu .has-sub ul {
display: none;
position: absolute;
top: 40px;
left: -1px;
min-width: 100%;
text-align: center;
/* IE7 */
*width: 100%;
}
#cssmenu .has-sub ul li {text-align: center;}
#cssmenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #3891c1;
background: #0a84c3 url(images/grad_dark2.png) repeat-x left top;
display: block;
line-height: 120%;
padding: 7px 0px 7px 0px;
text-align: center;
}
#cssmenu .has-sub ul li a:hover {
border-top: 0 none;
border-left: 1px solid #3891c1;
background: #0a84c3 url(images/grad_dark2.png) repeat-x left bottom;
text-align: center;
}
.cssmenu_root {font-size:16px;font-family: 'Nanum Gothic', 굴림, sans-serif;font-weight:bold;letter-spacing:-1px;}
.cssmenu_root_on {font-size:18px;font-family: 'Nanum Gothic', 굴림, sans-serif;font-weight:bold;color:#fff;letter-spacing:-1px;}
.cssmenu_sub {font-size: 12px;font-family:굴림;letter-spacing:-1px;}
<div id='cssmenu'>
<ul>
<? for($i=0; $i<$gmc; $i++){
<li class='has-sub<?=$onmenu?>'><a href="<?=$g_link[$i]?>"><span class='cssmenu_root'><?=$g_menu[$i]?></span></a>
<ul>
<? for($k=0; $k<$gr_bo_c[$i]; $k++){ ?>
<li><a href="<?=$s_href[$i][$k]?>"><span class='cssmenu_sub'><?=$s_menu[$i][$k]?></span></a></li>
<? } ?>
</ul>
</li>
<? } ?>
</ul>
</div>
</div>
많은 도움이 되었습니다. 감사합니다.
