회원 자료실

디엠샵의 디자인과 기능을 자유롭게 바꿔보세요.

TEXT

[스킨] 가로메뉴 - 서브2단 (대메뉴 이미지로 불러오기)

2013. 01. 15 21:28 5,046 0 11

참고로 이글에는 스킨은 첨부되어 있지 않습니다. 요 아래글의 첨부파일을 받으셔서 여기 설명을 참고하셔서 수정해서 쓰시라고 올린 글입니다.

 

이건...스킨이라기 보단 팁이라고 해야....지 싶은데요... 

아래글과 연결된 팁이니 이곳에 적겠습니다...

 

텍스트로 불려오는 대메뉴를 약간 꼼수를 써서 이미지로 불러오도록 하는겁니다... 

 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="20">
<td>
<div class="menu_container">
<ul>
<?
$html = "";

// 1차 분류
$result = sql_query(" select * from $shop[category_table] where category = '1' and view = '1' order by position asc, id asc ");
for ($i=0; $category1=sql_fetch_array($result); $i++) {

    $tmp_data = $category1;
   
 $hover = ""; if (shop_split("|", $tmp_data['log'], "1") == $ct_id) { $hover = "hover"; }
 $html .= "<li class='".$hover."'><a href='".$shop['path']."/list.php?ct_id=".$tmp_data['id']."'>".$tmp_data['subject']."</a><span class='partition'>|</span>"; // 1차 start   

    // 2차 분류
    $result2 = sql_query(" select * from $shop[category_table] where code = '".$category1['id']."' and view = '1' order by position asc, id asc ");
    for ($ii=0; $category2=sql_fetch_array($result2); $ii++) {

        $tmp_data = $category2;

        if ($ii == '0') { $html .= "\n<ul>\n"; } // 2차  
        $html .= "<li><a href='".$shop['path']."/list.php?ct_id=".$tmp_data['id']."'>".$tmp_data['subject']."</a>";       

        $html .= "</li>\n"; // 2차  

    }

    if ($ii) { $html .= "</ul>\n"; } // 2차

    $html .= "</li>\n"; // 1차

}

echo $html;
?>
</ul>
</div>
</td>
</tr>
</table>

 

 

위소스에서 빨간색부분의 1차카테고리명을 불러오는 부분인 ".$tmp_data['subject']." 를 아래처럼 카테고리ID 제목을 가진 이미지로 대체합니다.

 

<img src='".$dmshop_wmbar_path."/img/btn_".$tmp_data['id']."_off.png' border='0' class='png' name='".$tmp_data['id']."'>

 

이미지제작시에 파일명을 카테고리ID로 지어주셔야 합니다. 예를들어 첫번째 카테고리 아이디가 1이라면 이미지명은 btn_1_off.png 와 btn_1_on.png가 되겠죠...

 

그리고 롤오버효과를 위해 <td> 에 클래스를 주고 스크립트를 추가해주면 롤오버효과까지 끝입니다...

 

전체 소스를 보면....

 

 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="20">
<td class="top_menu_btn">
<div class="menu_container">
<ul>
<?
$html = "";

// 1차 분류
$result = sql_query(" select * from $shop[category_table] where category = '1' and view = '1' order by position asc, id asc ");
for ($i=0; $category1=sql_fetch_array($result); $i++) {

    $tmp_data = $category1;
   
 $hover = ""; if (shop_split("|", $tmp_data['log'], "1") == $ct_id) { $hover = "hover"; }
 $html .= "<li class='".$hover."'><a href='".$shop['path']."/list.php?ct_id=".$tmp_data['id']."'><img src='".$dmshop_wmbar_path."/img/btn_".$tmp_data['id']."_off.png' border='0' class='png' name='".$tmp_data['id']."'></a><span class='partition'>|</span>"; // 1차 start   

    // 2차 분류
    $result2 = sql_query(" select * from $shop[category_table] where code = '".$category1['id']."' and view = '1' order by position asc, id asc ");
    for ($ii=0; $category2=sql_fetch_array($result2); $ii++) {

        $tmp_data = $category2;

        if ($ii == '0') { $html .= "\n<ul>\n"; } // 2차  
        $html .= "<li><a href='".$shop['path']."/list.php?ct_id=".$tmp_data['id']."'>".$tmp_data['subject']."</a>";       

        $html .= "</li>\n"; // 2차  

    }

    if ($ii) { $html .= "</ul>\n"; } // 2차

    $html .= "</li>\n"; // 1차

}

echo $html;
?>
</ul>
</div>
</td>
</tr>
</table>

 

<script type="text/javascript">
$(function() {

    $(".top_menu_btn a img").mouseenter(function() {

        $(this).attr("src", "<?=$dmshop_wmbar_path?>/img/btn_"+$(this).attr("name")+"_on.png");

    }).mouseleave(function(){

        $(this).attr("src", "<?=$dmshop_wmbar_path?>/img/btn_"+$(this).attr("name")+"_off.png");

    });

});
</script>

 

이렇게 되겠죠....

 

샘플사이트

 

이상칠정회원

웹디일 하며, 이런저런일도 겸하고 있습니다. 전주쪽 회원님 계시면 친하게 지내요~~

관련 콘텐츠

  • 비회원
  • 작성자
  • 비밀번호
  • 취소

대댓글 작성

비밀번호를 입력하세요.

비밀번호
장상재 2013. 01. 22 (15:25)01.22 (15:25)
오~ 2단 가로 메뉴를 만들어 올려주시다니... 대단하십니다. 감사합니다~ ㅎ
오길환 2013. 02. 22 (19:45)02.22 (19:45)
감사합니다~ 잘되네요~ ^^
유종수 2013. 09. 23 (10:30)09.23 (10:30)
참고하였습니다.
국현민 2013. 10. 16 (17:55)10.16 (17:55)
잘 사용하겠습니다
송정우 2013. 11. 14 (13:31)11.14 (13:31)
감사합니다.
정부화 2014. 04. 15 (03:10)04.15 (03:10)
감사ㅏ합니다
박상민 2014. 08. 24 (21:14)08.24 (21:14)
감사합니다.
노지연 2015. 01. 17 (22:35)01.17 (22:35)
감사합니다~!!
황석훈 2015. 03. 31 (14:22)03.31 (14:22)
감사합니다.
김수옥 2015. 07. 17 (22:55)07.17 (22:55)
감사합니다~
윤지윤 2015. 12. 20 (22:00)12.20 (22:00)
감사합니다.
  • 전체 카테고리
  • 템플릿
  • 스킨
  • 게시판
  • 기타
    New 0 / All 41
    25개씩 보기
    • 25개씩 보기
    • 50개씩 보기
    • 100개씩 보기
      디엠샵 심플

      [템플릿]

      2,329192016. 04. 29
      구글 지도

      [스킨]

      2,574062012. 10. 08
      네이버 지도

      [스킨]

      3,588042012. 10. 06
      경매 게시판

      [스킨]

      5,1740202012. 10. 02
      Copyright © DMSHOP Corp. All Rights Reserved.