HTML 수평 스크롤메뉴
페이지 정보
본문
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>
|
<a href="?url=sub4" class="<?php if ($_GET['url'] == "sub4" ) { echo "on"; } else { echo "off"; } ?>">시안4_서브</a>
|
<a href="?url=main4" class="<?php if ($_GET['url'] == "" || $_GET['url'] == "main4" ) { echo "on"; } else { echo "off"; } ?>">시안4</a>
|
<a href="?url=main3" class="<?php if ($_GET['url'] == "main3" ) { echo "on"; } else { echo "off"; } ?>">시안3</a>
|
<a href="?url=mobile2" class="<?php if ($_GET['url'] == "mobile2") { echo "on"; } else { echo "off"; } ?>">시안2_모바일</a>
|
<a href="?url=main2" class="<?php if ($_GET['url'] == "main2" ) { echo "on"; } else { echo "off"; } ?>">시안2</a>
|
<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
<!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>
|
<a href="?url=sub4" class="<?php if ($_GET['url'] == "sub4" ) { echo "on"; } else { echo "off"; } ?>">시안4_서브</a>
|
<a href="?url=main4" class="<?php if ($_GET['url'] == "" || $_GET['url'] == "main4" ) { echo "on"; } else { echo "off"; } ?>">시안4</a>
|
<a href="?url=main3" class="<?php if ($_GET['url'] == "main3" ) { echo "on"; } else { echo "off"; } ?>">시안3</a>
|
<a href="?url=mobile2" class="<?php if ($_GET['url'] == "mobile2") { echo "on"; } else { echo "off"; } ?>">시안2_모바일</a>
|
<a href="?url=main2" class="<?php if ($_GET['url'] == "main2" ) { echo "on"; } else { echo "off"; } ?>">시안2</a>
|
<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
댓글목록
등록된 댓글이 없습니다.