메뉴 바 질문입니다... 정보
메뉴 바 질문입니다...관련링크
본문
전에 질문을 좀 잘못한거 같아 다시 질문좀 하겠습니다.
링크 건 메뉴 바를 사용하고 싶은데요..
2번째 링크는 올리신분이 테스트로 올려두신겁니다..
다름이 아니라 빼는건 빼서 쓰겠는데 잘 알지 못하는지라 제 입맛대로는 어렵네요...
우측 사이드는 다지웠구요.. 마우스 올렸을시 서브 메뉴?도 다지웠습니다.
그냥 큰메뉴만 사용하려고하는데요
너무 긴듯해서 제가 쓰는부분만 올립니다...
<?
$home_ex_main = "'99','제외그룹2'"; // 제외그룹 gr_id 'gr_01','gr_02','gr_03','gr_04' 식으로 추가하시면됩니다
$home_ex_board = "'제외게시판1','제외게시판2'"; // 제외게시판 bo_table
$day="1"; // 최신글 기준일수
$menu="mcGray"; // mcPurple, mcViolet, mcOrange, mcGreen, mcGray 메뉴색상
$t_width="100%"; // 메뉴가로사이즈
?>
<script type="text/javascript" src="<?=$g4[path]?>/topmenu/jquery-latest.js"></script>
<script type="text/javascript" src="<?=$g4[path]?>/topmenu/hrBar.js"></script>
<style type="text/css">
/* Menu Common */
.menu{ position:relative; width:<?=$t_width?>; overflow:visible; border:1px solid; font-size:12px; line-height:normal; *zoom:1; white-space:nowrap; font-family:Tahoma, Geneva, sans-serif;}
.menu:after{ content:""; display:block; clear:both;}
.menu .inset{ position:relative; overflow:visible; border:1px solid; z-index:2; *zoom:1; background-image:url(<?=$g4[path]?>/topmenu/bgBar.png); background-repeat:repeat-x; _background-image:none;}
.menu .inset:after{ content:""; display:block; clear:both;}
.menu ul{ float:left; list-style:none; margin:-1px 0; padding:0;}
.menu ul:after{ content:""; display:block; clear:both;}
.menu li{ position:relative; z-index:1; float:left;}
.menu a{ position:relative; float:left; padding:10px 0 11px 0; *padding:10px 0 10px 0; margin-bottom:-1px; text-decoration:none !important; cursor:pointer;}
.menu a span{ padding:0 20px; height:14px; color:#fff; font-weight:bold; vertical-align:top;}
.menu a span .i{ display:inline-block; width:8px; height:8px; padding:0; margin:3px 0 0 7px; border:0 !important; font-size:0; line-height:0; overflow:hidden; vertical-align:top; background:url(<?=$g4[path]?>/topmenu/iconSub.gif) no-repeat center top; opacity:.4; filter:alpha(opacity=40);}
.menu .gradient{ display:none; _display:block; position:absolute; z-index:1; top:0; left:0; width:<?=$t_width?>; height:35px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?=$g4[path]?>/topmenu/bgBar.png', sizingMethod='scale');}
.menu .shadow{ position:absolute; bottom:-3px; left:0; width:<?=$t_width?>; height:0; font-size:0; line-height:0; overflow:hidden; margin:1px -1px; z-index:1; border:1px solid #ccc; border-top:0;}
/* Menu Major */
.menu .major{ position:relative; z-index:2; float:left;}
.menu .major a{ overflow:hidden;}
.menu .major span{ border-left:1px solid; border-right:1px solid; _zoom:1;}
/* Menu Hover */
.menu .major li.active{ z-index:2; margin:0 -1px; border-left:1px solid; border-right:1px solid; _border:0; _margin:0;}
.menu .major li a:hover,
.menu .major li a:active,
.menu .major li a:focus{ padding-left:1px; padding-right:1px; background-image:url(<?=$g4[path]?>/topmenu/bgBarHover.png); _background-image:none; /*_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bgBarHover.png', sizingMethod='scale');*/}
.menu .major li.active a{ padding-left:1px; padding-right:1px; background-image:url(<?=$g4[path]?>/topmenu/bgBarActiveHover.png); _background-image:none; /*_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bgBarActiveHover.png', sizingMethod='scale');*/}
.menu .major li.active .i{ background-position:center -50px; opacity:1; filter:none;}
/* Menu Active */
.menu .major.m1 .m1,
.menu .major.m2 .m2,
.menu .major.m3 .m3,
.menu .major.m4 .m4,
.menu .major.m5 .m5,
.menu .major.m6 .m6,
.menu .major.m7 .m7,
.menu .major.m8 .m8,
.menu .major.m9 .m9,
.menu .major.m10 .m10,
.menu .major.m11 .m11,
.menu .major.m12 .m12{ z-index:3; margin:0 -1px; border-left:1px solid; border-right:1px solid;}
.menu .major.m1 .m1 a,
.menu .major.m2 .m2 a,
.menu .major.m3 .m3 a,
.menu .major.m4 .m4 a,
.menu .major.m5 .m5 a,
.menu .major.m6 .m6 a,
.menu .major.m7 .m7 a,
.menu .major.m8 .m8 a,
.menu .major.m9 .m9 a,
.menu .major.m10 .m10 a,
.menu .major.m11 .m11 a,
.menu .major.m12 .m12 a{ padding-left:1px; padding-right:1px; background:url(<?=$g4[path]?>/topmenu/bgBarActive.png) repeat-x; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?=$g4[path]?>/topmenu/bgBarActive.png', sizingMethod='scale');}
.menu .major.m1 .m1 span,
.menu .major.m2 .m2 span,
.menu .major.m3 .m3 span,
.menu .major.m4 .m4 span,
.menu .major.m5 .m5 span,
.menu .major.m6 .m6 span,
.menu .major.m7 .m7 span,
.menu .major.m8 .m8 span,
.menu .major.m9 .m9 span,
.menu .major.m10 .m10 span,
.menu .major.m11 .m11 span,
.menu .major.m12 .m12 span,
.menu .major li.active span{ border:0;}
/* Menu Gray */
.mcGray{ border-color:#707070; border-bottom-color:#474747;}
.mcGray .inset{ border-color:#797979; border-bottom-color:#4a4a4a; background-color:#3e3e3e;}
.mcGray .major span{ border-left-color:#545454; border-right-color:#3f3f3f;}
.mcGray .aside{ border-color:#383838;}
.mcGray .aside ul{ border-color:#646464;}
.mcGray .major.m1 .m1,
.mcGray .major.m2 .m2,
.mcGray .major.m3 .m3,
.mcGray .major.m4 .m4,
.mcGray .major.m5 .m5,
.mcGray .major.m6 .m6,
.mcGray .major.m7 .m7,
.mcGray .major.m8 .m8,
.mcGray .major.m9 .m9,
.mcGray .major.m10 .m10,
.mcGray .major.m11 .m11,
.mcGray .major.m12 .m12,
.mcGray .major li.active{ border-color:#555;}
.mcGray .major .sub a:hover,
.mcGray .major .sub a:active,
.mcGray .major .sub a:focus{ background-color:#f0f0f0;}
</style>
<div id="menu" class="menu <?=$menu?>">
<div class="inset">
<div class="major"><!-- class="major + (m1~m12)"-->
<ul>
<?
$sql = "select gr_id, gr_subject, gr_1 from $g4[group_table] where gr_id not in ($home_ex_main) order by gr_1";
$rst1 = sql_query($sql);
for ($i=0; $row=sql_fetch_array($rst1); $i++){
$sqlp2 = "select * from $g4[board_table] where gr_id = '$row[gr_id]' and bo_table not in ($home_ex_board) order by bo_order_search asc";
?>
<li class="m<?=$i+1?>"><a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$row[gr_id]?>"><span><?=$row[gr_subject]?></span></a>
<div class="sub"><ul>
</ul></div></li>
<?}?>
</ul></div>
<span class="gradient"></span></div><span class="shadow"></span></div>
질문 1
그룹이 5개면 지금 현재상태로 그룹을 생성시 글자수비례해서 칸이 결정되고
우측에 공백이 많이 생겨 버립니다
그룹 갯수 비례해서 칸을 평균으로 나눠 표시하고싶습니다..
그게 좀 어렵다면 5개라는 가정하에 맨우측>> 경계 | 이거라도 없애고싶습니다..
글자수맞춰서 만들면 되니까요..
질문 2
제가 만약 1번의 메뉴에 들어가있다면
마우스를 올려둔거처럼 여기에 들어와 있다라고 마우스 올려둔 표시가 계속 나거나
들어와있는 메뉴 색을 변경하고싶습니다.
질문 3
1번과 2번은 도저히 봐도 저 코드?가 저에겐 너무 어려워 손도 못대는데요..
그냥 1번 2번은 안되면 그냥 포기할까합니다...
질문 3번은 메뉴를 클릭시 그룹페이지가 표시되는데... 그게 이부분같은데요..
<li class="m<?=$i+1?>"><a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$row[gr_id]?>"><span><?=$row[gr_subject]?></span></a>
이걸 좀 변형해서 첫번째 그룹메뉴를 클릭시 어느페이지...
2번째 그룹메뉴 클릭시 어느페이지 이런씩으로 바꾸고싶습니다...
1,2번이야 어려워서 포기한다고하더라도 3번은 답변좀 부탁드리겠습니다..
빌더말고 그누보드 원본으로 구축했습니다(혹시나 도움될까해서..)
부탁드리겠습니다!
링크 건 메뉴 바를 사용하고 싶은데요..
2번째 링크는 올리신분이 테스트로 올려두신겁니다..
다름이 아니라 빼는건 빼서 쓰겠는데 잘 알지 못하는지라 제 입맛대로는 어렵네요...
우측 사이드는 다지웠구요.. 마우스 올렸을시 서브 메뉴?도 다지웠습니다.
그냥 큰메뉴만 사용하려고하는데요
너무 긴듯해서 제가 쓰는부분만 올립니다...
<?
$home_ex_main = "'99','제외그룹2'"; // 제외그룹 gr_id 'gr_01','gr_02','gr_03','gr_04' 식으로 추가하시면됩니다
$home_ex_board = "'제외게시판1','제외게시판2'"; // 제외게시판 bo_table
$day="1"; // 최신글 기준일수
$menu="mcGray"; // mcPurple, mcViolet, mcOrange, mcGreen, mcGray 메뉴색상
$t_width="100%"; // 메뉴가로사이즈
?>
<script type="text/javascript" src="<?=$g4[path]?>/topmenu/jquery-latest.js"></script>
<script type="text/javascript" src="<?=$g4[path]?>/topmenu/hrBar.js"></script>
<style type="text/css">
/* Menu Common */
.menu{ position:relative; width:<?=$t_width?>; overflow:visible; border:1px solid; font-size:12px; line-height:normal; *zoom:1; white-space:nowrap; font-family:Tahoma, Geneva, sans-serif;}
.menu:after{ content:""; display:block; clear:both;}
.menu .inset{ position:relative; overflow:visible; border:1px solid; z-index:2; *zoom:1; background-image:url(<?=$g4[path]?>/topmenu/bgBar.png); background-repeat:repeat-x; _background-image:none;}
.menu .inset:after{ content:""; display:block; clear:both;}
.menu ul{ float:left; list-style:none; margin:-1px 0; padding:0;}
.menu ul:after{ content:""; display:block; clear:both;}
.menu li{ position:relative; z-index:1; float:left;}
.menu a{ position:relative; float:left; padding:10px 0 11px 0; *padding:10px 0 10px 0; margin-bottom:-1px; text-decoration:none !important; cursor:pointer;}
.menu a span{ padding:0 20px; height:14px; color:#fff; font-weight:bold; vertical-align:top;}
.menu a span .i{ display:inline-block; width:8px; height:8px; padding:0; margin:3px 0 0 7px; border:0 !important; font-size:0; line-height:0; overflow:hidden; vertical-align:top; background:url(<?=$g4[path]?>/topmenu/iconSub.gif) no-repeat center top; opacity:.4; filter:alpha(opacity=40);}
.menu .gradient{ display:none; _display:block; position:absolute; z-index:1; top:0; left:0; width:<?=$t_width?>; height:35px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?=$g4[path]?>/topmenu/bgBar.png', sizingMethod='scale');}
.menu .shadow{ position:absolute; bottom:-3px; left:0; width:<?=$t_width?>; height:0; font-size:0; line-height:0; overflow:hidden; margin:1px -1px; z-index:1; border:1px solid #ccc; border-top:0;}
/* Menu Major */
.menu .major{ position:relative; z-index:2; float:left;}
.menu .major a{ overflow:hidden;}
.menu .major span{ border-left:1px solid; border-right:1px solid; _zoom:1;}
/* Menu Hover */
.menu .major li.active{ z-index:2; margin:0 -1px; border-left:1px solid; border-right:1px solid; _border:0; _margin:0;}
.menu .major li a:hover,
.menu .major li a:active,
.menu .major li a:focus{ padding-left:1px; padding-right:1px; background-image:url(<?=$g4[path]?>/topmenu/bgBarHover.png); _background-image:none; /*_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bgBarHover.png', sizingMethod='scale');*/}
.menu .major li.active a{ padding-left:1px; padding-right:1px; background-image:url(<?=$g4[path]?>/topmenu/bgBarActiveHover.png); _background-image:none; /*_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bgBarActiveHover.png', sizingMethod='scale');*/}
.menu .major li.active .i{ background-position:center -50px; opacity:1; filter:none;}
/* Menu Active */
.menu .major.m1 .m1,
.menu .major.m2 .m2,
.menu .major.m3 .m3,
.menu .major.m4 .m4,
.menu .major.m5 .m5,
.menu .major.m6 .m6,
.menu .major.m7 .m7,
.menu .major.m8 .m8,
.menu .major.m9 .m9,
.menu .major.m10 .m10,
.menu .major.m11 .m11,
.menu .major.m12 .m12{ z-index:3; margin:0 -1px; border-left:1px solid; border-right:1px solid;}
.menu .major.m1 .m1 a,
.menu .major.m2 .m2 a,
.menu .major.m3 .m3 a,
.menu .major.m4 .m4 a,
.menu .major.m5 .m5 a,
.menu .major.m6 .m6 a,
.menu .major.m7 .m7 a,
.menu .major.m8 .m8 a,
.menu .major.m9 .m9 a,
.menu .major.m10 .m10 a,
.menu .major.m11 .m11 a,
.menu .major.m12 .m12 a{ padding-left:1px; padding-right:1px; background:url(<?=$g4[path]?>/topmenu/bgBarActive.png) repeat-x; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?=$g4[path]?>/topmenu/bgBarActive.png', sizingMethod='scale');}
.menu .major.m1 .m1 span,
.menu .major.m2 .m2 span,
.menu .major.m3 .m3 span,
.menu .major.m4 .m4 span,
.menu .major.m5 .m5 span,
.menu .major.m6 .m6 span,
.menu .major.m7 .m7 span,
.menu .major.m8 .m8 span,
.menu .major.m9 .m9 span,
.menu .major.m10 .m10 span,
.menu .major.m11 .m11 span,
.menu .major.m12 .m12 span,
.menu .major li.active span{ border:0;}
/* Menu Gray */
.mcGray{ border-color:#707070; border-bottom-color:#474747;}
.mcGray .inset{ border-color:#797979; border-bottom-color:#4a4a4a; background-color:#3e3e3e;}
.mcGray .major span{ border-left-color:#545454; border-right-color:#3f3f3f;}
.mcGray .aside{ border-color:#383838;}
.mcGray .aside ul{ border-color:#646464;}
.mcGray .major.m1 .m1,
.mcGray .major.m2 .m2,
.mcGray .major.m3 .m3,
.mcGray .major.m4 .m4,
.mcGray .major.m5 .m5,
.mcGray .major.m6 .m6,
.mcGray .major.m7 .m7,
.mcGray .major.m8 .m8,
.mcGray .major.m9 .m9,
.mcGray .major.m10 .m10,
.mcGray .major.m11 .m11,
.mcGray .major.m12 .m12,
.mcGray .major li.active{ border-color:#555;}
.mcGray .major .sub a:hover,
.mcGray .major .sub a:active,
.mcGray .major .sub a:focus{ background-color:#f0f0f0;}
</style>
<div id="menu" class="menu <?=$menu?>">
<div class="inset">
<div class="major"><!-- class="major + (m1~m12)"-->
<ul>
<?
$sql = "select gr_id, gr_subject, gr_1 from $g4[group_table] where gr_id not in ($home_ex_main) order by gr_1";
$rst1 = sql_query($sql);
for ($i=0; $row=sql_fetch_array($rst1); $i++){
$sqlp2 = "select * from $g4[board_table] where gr_id = '$row[gr_id]' and bo_table not in ($home_ex_board) order by bo_order_search asc";
?>
<li class="m<?=$i+1?>"><a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$row[gr_id]?>"><span><?=$row[gr_subject]?></span></a>
<div class="sub"><ul>
</ul></div></li>
<?}?>
</ul></div>
<span class="gradient"></span></div><span class="shadow"></span></div>
질문 1
그룹이 5개면 지금 현재상태로 그룹을 생성시 글자수비례해서 칸이 결정되고
우측에 공백이 많이 생겨 버립니다
그룹 갯수 비례해서 칸을 평균으로 나눠 표시하고싶습니다..
그게 좀 어렵다면 5개라는 가정하에 맨우측>> 경계 | 이거라도 없애고싶습니다..
글자수맞춰서 만들면 되니까요..
질문 2
제가 만약 1번의 메뉴에 들어가있다면
마우스를 올려둔거처럼 여기에 들어와 있다라고 마우스 올려둔 표시가 계속 나거나
들어와있는 메뉴 색을 변경하고싶습니다.
질문 3
1번과 2번은 도저히 봐도 저 코드?가 저에겐 너무 어려워 손도 못대는데요..
그냥 1번 2번은 안되면 그냥 포기할까합니다...
질문 3번은 메뉴를 클릭시 그룹페이지가 표시되는데... 그게 이부분같은데요..
<li class="m<?=$i+1?>"><a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$row[gr_id]?>"><span><?=$row[gr_subject]?></span></a>
이걸 좀 변형해서 첫번째 그룹메뉴를 클릭시 어느페이지...
2번째 그룹메뉴 클릭시 어느페이지 이런씩으로 바꾸고싶습니다...
1,2번이야 어려워서 포기한다고하더라도 3번은 답변좀 부탁드리겠습니다..
빌더말고 그누보드 원본으로 구축했습니다(혹시나 도움될까해서..)
부탁드리겠습니다!
댓글 전체