메뉴 전체 펼짐으로 하고 싶은데 도와주세요~~
본문
안녕하세요. 오전에 메뉴에 대해 질문 올려서 해결이 안되어서요..^^
저희가 전혀 모르는 상태에서 업체 동해서 만들어서요..
질문도 올리면서 하나 하나씩 조금씩 배우고 고쳐보려구 합니다.
찾다 찾다 못찾아서 질문게시판 뒤지다가 업체에 통화해보니깐
메뉴 펼침 스크립트 파일이랑 메인 슬라이드에 대한 스크립트 파일을 알려주더라구요.
제 생각에는 메뉴 펼침 스크립트 파일에서 수정해주면 될꺼 같은대요..^^ 잘 모르겠네요..^^
그래서 이렇게 부탁드림니다..
http://aotearoa.co.kr/index.php 로 들어가면 아래의 이미지처럼 펼쳐지는대요.
밑에 버튼 누르면 슬라이드식으로 하단으로 부메뉴들이 내려오구요.
저걸 전체 다 펼쳐지게 하고 싶은데 아무리 살펴보아도 모르겠네요. ^^
그래서 이렇게 도움 부탁드림니다.. 감기 조심하시구요.. 좋은 하루 되시고 감기 조심하세요..^^
메뉴 펼침 스크립트 boxcategory.inc.php
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
//
// 2단계 분류 레이어 표시
//
$menu = ""; // 메뉴 레이어 임시저장 변수 (처음엔 아무값도 없어야 합니다.)
$sub_menu_left = 100; // 2단계 메뉴 왼쪽 좌표 (1단계 좌표에서 부터)
?>
<style>
.lnb_shop_con {float:left; width:180px; margin:0px;}
.lnb_shop_con a:link {color:#848484; font-family:"dotum"; line-height:130%; font-size:12px; text-decoration:none;}
.lnb_shop_con a:hover {font-weight:bold;}
.lnb_shop_con ul li:hover ol li {}
.lnb_shop_con ul li ol li {display:none;}
#all_spn_op {cursor:pointer; width:100%; display:none; text-align:center; background:#3881b1; color:#fff; margin-bottom:5px;}
#all_spn_cl {cursor:pointer; width:100%; display:none; text-align:center; background:#3881b1; color:#fff; margin-bottom:5px;}
</style>
<?
$cca_id = "";
$cca_id = $ca_id;
if(strlen($cca_id) == 0){
$cca_id = "10";
}
?>
<script>
$(document).ready(function(){
/**/
$(".lnb_shop_con > ul > li").click(function(){
$(this).find( "ol > li").slideToggle("fast");
});
$("#all_spn").click(function(){
$(".lnb_shop_con > ul > li").find( "ol > li").slideToggle("fast");
});
$("#all_spn_op").click(function(){
$(".lnb_shop_con > ul > li").find( "ol > li").slideDown("fast");
$(this).css("display","none");
$('#all_spn_cl').css("display","block");
});
$("#all_spn_cl").click(function(){
$(".lnb_shop_con > ul > li").find( "ol > li").slideUp("fast");
$(this).css("display","none");
$('#all_spn_op').css("display","block");
});
<?if(strlen($cca_id) > 0){?>
$('.lnb_shop_con > ul > li > a').attr ('data', function(i, value) {
href_str = value;
if(href_str.indexOf("<?=substr($cca_id,0,2)?>") >= 0 ){
$(this).parent().find( "ol > li").slideDown("fast");
}
});
<?}?>
});
</script>
<span id="all_spn_op">All Category OPEN</span>
<span id="all_spn_cl">All Category CLOSE</span>
<div class="lnb_shop_con">
<ul class="1dep">
<?
// 1단계 분류 판매가능한것만
$hsql = " select ca_id, ca_name from $g4[yc4_category_table]
where length(ca_id) = '2'
and ca_use = '1'
order by ca_order desc ";
$hresult = sql_query($hsql);
$hnum = @mysql_num_rows($hresult);
for ($i=0; $row=sql_fetch_array($hresult); $i++)
{
// 2단계 분류
$menubody = "";
$onmouseover = "";
$onmouseout = "";
$sql2 = " select ca_id, ca_name from $g4[yc4_category_table]
where LENGTH(ca_id) = '4'
and SUBSTRING(ca_id,1,2) = '$row[ca_id]'
and ca_use = '1'
order by ca_order desc, ca_id ";
$result2 = sql_query($sql2);
$hnum2 = @mysql_num_rows($result2);
for ($j=0; $row2=sql_fetch_array($result2); $j++)
{
$menubody .= "<li style='background:#f4f4f4;'> - <a href='$g4[shop_path]/list.php?ca_id=$row2[ca_id]' style='margin:0px; padding:0px;font-size:12px;'>$row2[ca_name]</a></li>";
// 맨밑줄은 출력하지 않음
if ($j < $hnum2){
// $menubody .= "<!-- <li>-----------------</li> -->"; /*2뎁스 텍스트 하단 한 줄*/
}
}
if ($menubody)
{
$onmouseover = " layer_view('lmenu{$i}', 'lmenu_layer{$i}', 'view', $sub_menu_left, -22); ";
$onmouseout = " layer_view('lmenu{$i}', 'lmenu_layer{$i}', 'hide'); ";
}
$category_link = "<a href='#null' data='{$row[ca_id]}' style=\"font:bold 13px 'malgun gothic'; line-height:25px; color:#fff; height:25px; display:inline-block; \">";
// $category_link = "<a href='#mull' data='{$row[ca_id]}' style=\"font:bold 13px 'malgun gothic'; color:#fff; height:20px; display:inline-block; \">";
if($row[ca_id] != "50"){ // end if ca_id - 50 브랜드몰 가리기 위한 소스
echo "<li id='lmenu{$i}' onmouseover=\"$onmouseover\" onmouseout=\"$onmouseout\" style=\"background:#648262; padding:0px; line-height:15px; \">";
echo " $category_link$row[ca_name]</a>\n";
if ($menubody)
{
//echo "<div id='lmenu_layer{$i}' style='width:180px; display:none; position:absolute; FILTER: alpha(opacity=95); z-index:999;'>";
// echo "<div id='lmenu_layer{$i}' style='width:130px; display:block; position:relatvie; z-index:999;'>";
echo "<ol style='width:100%; border:0px solid red; background:#fff;'>";
echo "$menubody";
echo "</ol>";
//echo "</div>";
}
echo "</li>";
} // end if ca_id - 50 브랜드몰 가리기 위한 소스
if ($i<$hnum) // if ($i<$hnum-1) 맨밑줄은 출력하지 않음
echo "<li style='width:90%; height:3px; font-size:1px; line-height:100%;'> </li>\n";
}
if ($i==0)
echo "<li>등록된 자료가 없습니다.</li>\n";
?>
</ul>
</div><!-- lnb_shop_con -->
<ul class="lnb_shop_con">
<li style="font:bold 13px 'malgun gothic'; line-height:25px; color:#fff; height:25px; margin-top:-3px;background:#648262; text-indent:4px; padding:0px; "><a href='<?=$g4[path]?>/bbs/board.php?bo_table=11' style='color:#fff; line-height:25px; display:inline-block;'>BRAND MALL</a><li>
</ul>
<?=$menu?>
<script language="JavaScript">
var save_layer = null;
function layer_view(link_id, menu_id, opt, x, y)
{
var link = document.getElementById(link_id);
var menu = document.getElementById(menu_id);
//for (i in link) { document.write(i + '<br/>'); } return;
if (save_layer != null)
save_layer.style.display = "none";
if (opt == 'hide')
{
//menu.style.display = 'none';
}
else
{
x = parseInt(x);
y = parseInt(y);
// menu.style.left = get_left_pos(link) + x+20 + 'px';
// menu.style.top = get_top_pos(link) + link.offsetHeight + y + 'px';
// menu.style.display = 'block';
}
save_layer = menu;
}
/*$(document).ready(function(){
$('.lnb_shop_con ul li').mouseover(function(){
$('.lnb_shop_con ul li ol li').css("display","block");
$('.lnb_shop_btn_open').css("display","none");
$('.lnb_shop_con ul li ol li').slideDown(200);
});
$('.lnb_shop_btn_close').click(function(){
$('.lnb_shop_btn_close').css("display","none");
$('.lnb_shop_btn_open').css("display","block");
$('.lnb_shop_con').slideUp(200);
});
});*/
</script>
메인 슬라이드에 스크립트 파일 latest.skin.php
<style>
/*
* generated by WOW Slider 4.2
* template Native
*/
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:810px;
margin:0px auto;
right:0px;
z-index:90;
border:none;
text-align:left; /* reset align=center */
}
* html #wowslider-container1{ width:994px }
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{
width:1%;
line-height:0; /*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#wowslider-container1 .ws_images{
position: relative;
left:0;
top:0;
width:100%;
height:370px;
overflow:hidden;
}
#wowslider-container1 .ws_images a{
width:100%;
display:block;
color:transparent;
}
#wowslider-container1 img{
max-width: none !important;
}
#wowslider-container1 .ws_images img{
width:100%;
border:none 0;
max-width: none;
padding:0;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container1 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
#wowslider-container1 .wsl{
display:none;
}
#wowslider-container1 sound,
#wowslider-container1 object{
position:absolute;
}
#wowslider-container1 .ws_bullets {
padding: 10px 0 0 0 ;
}
#wowslider-container1 .ws_bullets a {
width:15px;
height:15px;
background: url(<?=$latest_skin_path?>/img/bullet.png) left top;
float: left;
text-indent: -4000px;
position:relative;
margin-left:1px;
color:transparent;
}
#wowslider-container1 .ws_bullets a:hover{
background-position: 0 50%;
}
#wowslider-container1 .ws_bullets a.ws_selbull{
background-position: 0 100%;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
position:absolute;
display:none;
top:50%;
margin-top:-22px;
z-index:60;
height: 45px;
width: 45px;
background-image: url(./arrows.png);
}
#wowslider-container1 a.ws_next{
background-position: 100% 0;
right:11px;
}
#wowslider-container1 a.ws_prev {
left:11px;
background-position: 0 0;
}
* html #wowslider-container1 a.ws_next,* html #wowslider-container1 a.ws_prev{display:block}
#wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev {display:block}
/*playpause*/
#wowslider-container1 .ws_playpause {
display:none;
width: 45px;
height: 45px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -22px;
margin-top: -22px;
z-index: 59;
}
#wowslider-container1:hover .ws_playpause {
display:block;
}
#wowslider-container1 .ws_pause {
background-image: url(./pause.png);
}
#wowslider-container1 .ws_play {
background-image: url(./play.png);
}
#wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover {
background-position: 100% 100% !important;
}/* bottom center */
#wowslider-container1 .ws_bullets {
bottom: 10px;
left:45%;
}
#wowslider-container1 .ws_bullets div{
/*left:-50%;*/
}
#wowslider-container1 .ws-title{
position:absolute;
display:block;
bottom: 17px;
left: 0px;
margin: 9px;
padding:15px;
background:#FFFFFF;
color:#333333;
z-index: 50;
font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
#wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 12px;
}
#wowslider-container1 .ws_images ul{
animation: wsBasic 21.6s infinite;
-moz-animation: wsBasic 21.6s infinite;
-webkit-animation: wsBasic 21.6s infinite;
}
@keyframes wsBasic{0%{left:-0%} 5.09%{left:-0%} 8.33%{left:-100%} 13.43%{left:-100%} 16.67%{left:-200%} 21.76%{left:-200%} 25%{left:-300%} 30.09%{left:-300%} 33.33%{left:-400%} 38.43%{left:-400%} 41.67%{left:-500%} 46.76%{left:-500%} 50%{left:-600%} 55.09%{left:-600%} 58.33%{left:-700%} 63.43%{left:-700%} 66.67%{left:-800%} 71.76%{left:-800%} 75%{left:-900%} 80.09%{left:-900%} 83.33%{left:-1000%} 88.43%{left:-1000%} 91.67%{left:-1100%} 96.76%{left:-1100%} }
@-moz-keyframes wsBasic{0%{left:-0%} 5.09%{left:-0%} 8.33%{left:-100%} 13.43%{left:-100%} 16.67%{left:-200%} 21.76%{left:-200%} 25%{left:-300%} 30.09%{left:-300%} 33.33%{left:-400%} 38.43%{left:-400%} 41.67%{left:-500%} 46.76%{left:-500%} 50%{left:-600%} 55.09%{left:-600%} 58.33%{left:-700%} 63.43%{left:-700%} 66.67%{left:-800%} 71.76%{left:-800%} 75%{left:-900%} 80.09%{left:-900%} 83.33%{left:-1000%} 88.43%{left:-1000%} 91.67%{left:-1100%} 96.76%{left:-1100%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 5.09%{left:-0%} 8.33%{left:-100%} 13.43%{left:-100%} 16.67%{left:-200%} 21.76%{left:-200%} 25%{left:-300%} 30.09%{left:-300%} 33.33%{left:-400%} 38.43%{left:-400%} 41.67%{left:-500%} 46.76%{left:-500%} 50%{left:-600%} 55.09%{left:-600%} 58.33%{left:-700%} 63.43%{left:-700%} 66.67%{left:-800%} 71.76%{left:-800%} 75%{left:-900%} 80.09%{left:-900%} 83.33%{left:-1000%} 88.43%{left:-1000%} 91.67%{left:-1100%} 96.76%{left:-1100%} }
#wowslider-container1 .ws_shadow{
background-image: url(./bg.png);
background-repeat: no-repeat;
background-size:100%;
position:absolute;
z-index: -1;
left:-1.01%;
top:-2.17%;
width:102.01%;
height:106.28%;
}
* html #wowslider-container1 .ws_shadow{/*ie6*/
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine1/bg.png', sizingMethod='scale');
}
*+html #wowslider-container1 .ws_shadow{/*ie7*/
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine1/bg.png', sizingMethod='scale');
}
</style>
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<? for ($i=0; $i<count($list); $i++) { ?>
<li><?if(strlen($list[$i][wr_link1]) > 0){?><a href="<?=set_http($list[$i][wr_link1])?>"><?}?><img src="<?=$list[$i][file][0][path]?>/<?=$list[$i][file][0][file]?>" id="wows1_0"/><?if(strlen($list[$i][wr_link1]) > 0){?></a><?}?></li>
<? } ?>
</ul></div>
<div class="ws_bullets"><div>
<? for ($i=0; $i<count($list); $i++) { ?>
<a href="#" title="Beautiful-love-12374429-1920-1080"><?=($i+1)?></a>
<? } ?>
</div></div>
</div>
<script type="text/javascript" src="<?=$latest_skin_path?>/js/wowslider.js"></script>
<script type="text/javascript" src="<?=$latest_skin_path?>/js/script_main.js"></script>
<!-- End WOWSlider.com BODY section -->
답변 1
메인페이지만 적용하실건가요? 아니면 서브페이지에도 적용하실건가요?
메인페이지만 적용하실거면
코드들을 좀 추가해야 할 것 같구요..
서브페이지(사이트 전체 메인페이지 포함)에도 적용하실거면
boxcategory.inc.php 의 48~50라인을 제가 알려드린 답변대로 처리 하시면 될 것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.
