수평 스크롤메뉴 > 기술자료

본문 바로가기
사이트 내 전체검색

기술자료

HTML 수평 스크롤메뉴

페이지 정보

댓글 0건 조회 612회 작성일 2019-04-16 11:40

본문

How To Create a Horizontal Scrollable Menu


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<?php include "../favicon.php"; ?>
<?php if ($mobile) { ?><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10, minimum-scale=0, user-scalable=yes"><?php } ?>
<style>
body { margin:0; border:0; text-align:center; }

.on  { font-size:15px; font-weight:bold;   color:#FF0; }
.off { font-size:12px; font-weight:normal; color:#fff; }

div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    text-align: center;
    padding: 0 5px;
    text-decoration: none;
}
</style>
<title>수평 스크롤 메뉴</title>
</head>

<body>
<?php  if ($_GET['url'] == "") { // 기본문서 ?>
<div style="background:url(main4_bg.png) no-repeat top center;"><img src="main4.png" style="width:<?php if ($mobile) { echo "100%; max-width:"; } ?>1260px;"></div>

<?php  } elseif ($_GET['url'] == "main1") { // 시안1 ?>
<div style="background:url(main1_bg.png) no-repeat top center;"><img src="main1.png" style="width:<?php if ($mobile) { echo "100%; max-width:"; } ?>1260px;"></div>

<?php } elseif ($_GET['url']=="main2") { // 시안2 ?>
<div style="background:url(main2_bg.png?20190413) no-repeat top center;"><img src="main2.png?20190413" style="width:<?php if ($mobile) { echo "100%; max-width:"; } ?>1260px;"></div>

<?php } elseif ($_GET['url']=="main3") { // 시안3 ?>
<div style="background:url(main3_bg.png?20190413_4) no-repeat top center;"><img src="main3.png?20190413_4" style="width:<?php if ($mobile) { echo "100%; max-width:"; } ?>1020px;"></div>

<?php } elseif ($_GET['url']=="main4") { // 시안4 ?>
<div style="background:url(main4_bg.png?20190413) no-repeat top center;"><img src="main4.png?20190413" style="width:<?php if ($mobile) { echo "100%; max-width:"; } ?>1260px;"></div>

<?php } elseif ($_GET['url']=="sub4") { // 서브4 ?>
<div style="background:url(sub4_bg.png) no-repeat top center;"><img src="sub4.png" style="width:<?php if ($mobile) { echo "100%; max-width:"; } ?>1260px;"></div>

<?php } elseif ($_GET['url']=="mobile2") { // 모바일2 ?>
<div style="background:url() repeat-x top;"><img src="mobile2.png" style="width:<?php if ($mobile) { echo "100%; max-width:"; } ?>600px;"></div>

<?php } elseif ($_GET['url']=="mobile4") { // 모바일4 ?>
<div style="background:url() repeat-x top;"><img src="mobile4.png" style="width:<?php if ($mobile) { echo "100%; max-width:"; } ?>700px;"></div>

<?php } ?>



<div style="height:36px;"><?php // 상단고정높이만큼 높이를 지정 ?></div>
<div style="width:100%; position:fixed; bottom:0px; left:0px; z-index:10000000;" class="scrollmenu">
    <div style="height:40px; line-height:40px; text-align:center; color:#ffffff;"><!--고정높이 지정-->

<a href="?url=mobile4"  class="<?php if ($_GET['url'] == "mobile4" ) { echo "on"; } else { echo "off"; } ?>">시안4_모바일</a>
&nbsp;|&nbsp; 
<a href="?url=sub4"  class="<?php if ($_GET['url'] == "sub4" ) { echo "on"; } else { echo "off"; } ?>">시안4_서브</a>
&nbsp;|&nbsp; 
<a href="?url=main4"  class="<?php if ($_GET['url'] == "" || $_GET['url'] == "main4" ) { echo "on"; } else { echo "off"; } ?>">시안4</a>
&nbsp;|&nbsp; 
<a href="?url=main3"  class="<?php if ($_GET['url'] == "main3" ) { echo "on"; } else { echo "off"; } ?>">시안3</a>
&nbsp;|&nbsp; 
<a href="?url=mobile2" class="<?php if ($_GET['url'] == "mobile2") { echo "on"; } else { echo "off"; } ?>">시안2_모바일</a>
&nbsp;|&nbsp; 
<a href="?url=main2"  class="<?php if ($_GET['url'] == "main2" ) { echo "on"; } else { echo "off"; } ?>">시안2</a>
&nbsp;|&nbsp; 
<a href="?url=main1"  class="<?php if ($_GET['url'] == "main1" ) { echo "on"; } else { echo "off"; } ?>">시안1</a>

    </div>
</div>
</body>
</html>


참고자료
https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp
 
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.


Total 2,337건 1 페이지

기술자료 목록
제목
공지 일반   17519  2001-08-31 11:52 ~ 2017-12-05 16:33  
2336 그누보드   69  2019-08-13 23:52 ~ 2019-08-14 00:02  
2335 HTML   66  2019-08-11 13:03  
2334 MySQL   159  2019-07-24 11:04  
2333 그누보드   171  2019-07-18 08:01 ~ 2019-07-18 08:44  
2332 HTML   168  2019-07-15 18:13 ~ 2019-07-15 22:48  
2331 PHP   412  2019-05-02 02:33 ~ 2019-05-02 02:38  
2330 JavaScript   380  2019-05-02 02:10  
2329 그누보드   594  2019-04-25 09:02 ~ 2019-04-25 09:19  
2328 그누보드   599  2019-04-22 23:56  
열람중 HTML   613  2019-04-16 11:40  
2326 영카트   610  2019-04-14 22:24  
2325 HTML   1045  2019-04-02 00:12 ~ 2019-04-02 01:17  
2324 그누보드   964  2019-03-22 14:25  
2323 전자결제   1601  2019-02-18 11:47  
2322 그누보드   1521  2019-02-16 01:51 ~ 2019-02-17 14:00  
2321 PHP   1535  2019-02-13 21:01  
2320 JavaScript   1459  2019-02-08 18:37 ~ 2019-02-08 19:32  
2319 그누보드   1522  2019-02-08 16:47 ~ 2019-02-08 16:54  
2318 그누보드   1561  2019-01-31 18:45 ~ 2019-01-31 18:52  

게시물 검색
계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
420
어제
1,239
최대
3,306
전체
5,003,724

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 032-679-3528   주소: 14526 경기도 부천시 옥산로168번길 34-1, 3층
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2019 해피정닷컴. All Rights Reserved.