자바스크립트로 하면 여러줄을 적어줘야 하는데 jQuery 로 하면 심플해진다.
// Assumes element with id='button'
var button = document.getElementById('button');
button.onclick = function() {
var mydiv = document.getElementById('tabName');
if (mydiv.style.display === 'block' || mydiv.style.display === '') {
mydiv.style.display = 'none';
}
else {
mydiv.style.display = 'block';
}
};
$("#button").click(function() {
// assumes element with id='button'
$("#tabName").toggle();
});
메뉴만들기
열심히 이 자료 저자료 테스트해보면서 이해하고 내것으로 만들어가고 있는 중이다.
아래 코드를 연습한 소스코드 파일 첨부한다.
이미지 파일은 http://blog.naver.com/hyoyeol/70177051041 블로그에 올려진 파일 이미지 파일을 활용했다.
하지만 코드 내용은 완전 다르다.
topmenu-01.zip=== index.php ===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>메뉴만들기</title>
<link rel="stylesheet" href="css/bootstyle.css" />
<link rel="stylesheet" href="css/topmenu.css" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.min.js" ></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
var currentName = null;
$(document).ready(function(){
tabSetting(); // 탭 초기화 및 설정
});
function tabSetting() {
$('.tabPage').hide();
$('.topmenu a').on('click', function() {
var tabName = $(this).attr('href');
if(currentName != tabName){
$('.tabPage').hide();
currentName = tabName;
}
$(tabName).toggle();
});
}
</script>
</head>
<body>
<header>
<nav class="navbar navbar-fixed-top navbar-full navbar-light">
<div class="topmenu">
<a href="#home">Home</a>
<a href="#tab01">News</a>
<a href="#tab02">Contact</a>
<a href="#tab03">About</a>
<a href="#tab04">Support</a>
<a href="#tab05">Blog</a>
<a href="#tools">Tools</a>
<a href="#base">Base</a>
<a href="#custom">Custom</a>
<a href="#more">More</a>
<a href="#logo">Logo</a>
<a href="#friends">Friends</a>
<a href="#partners">Partners</a>
<a href="#people">People</a>
<a href="#work">Work</a>
</div>
</nav>
</header>
<main class="container-fluid">
<div id="contents">
<div id="tab01" class="tabPage">
<img src="./images/img_01.jpg">
</div>
<div id="tab02" class="tabPage">
<img src="./images/img_02.jpg">
</div>
<div id="tab03" class="tabPage">
<img src="./images/img_03.jpg">
</div>
<div id="tab04" class="tabPage">
<img src="./images/img_04.jpg">
</div>
<div id="tab05" class="tabPage">
<img src="./images/img_05.jpg">
</div>
</div>
</main>
</body>
</html>
/// nav 설명
<nav class="navbar navbar-fixed-top navbar-full navbar-light">
.navbar-fixed-top : 상단에 고정
.navbar-fixed-bottom : 하단에 고정
/// 설명 : 화면 부드럽게 나오고 사라지게 하기
$(tabName).toggle(); 는 화면이 부드럽게 나오고 부드럽게 사라지지 않는다.
화면을 부드럽게 나오고 부드럽게 사라지게 하고 싶으면
$(element).is(":visible"); // 화면이 보이는 상태인지 체크
를 사용해서 코드를 변경해주면 된다.
if($(tabName).is(":visible")){
$(tabName).slideUp();
}else{
$(tabName).slideDown();
}
=== topmenu.css ===
charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body, div, ul, li, table, tr, td, th{margin:0px; padding:0px;}
ul, li{list-style:none;}
body {
font-family: NanumGothic, '나눔고딕', NanumGothicWeb, "Malgun Gothic",Gulim,sans-serif;
background: #ddd;
font-size:10px;
}
div.topmenu {
border: 1px solid #ccc;
background-color: #f1f1f1;
margin:auto;
overflow: auto;
white-space: nowrap;
}
div.topmenu a {
display: inline-block; /* 자동으로 줄바꿈되지 않고 크기를 지정할 수 있음 */
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
transition: 0.1s;
}
div.topmenu a:hover {
background-color: #ddd;
color:#0000ff;
cursor:pointer;
font-weight:bold;
}
/*컨텐츠*/
#contents{
width:900px;
margin:auto;
}
#contents div{
margin:0 0px;
}
/* 화면 해상도에 따른 글자 크기 변경 */
@media only screen and (max-width: 768px) {
div.topmenu a {
padding: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
div.topmenu a {
padding: 13px;
}
}
@media only screen and (min-width: 1025px) {
body { background-color: blue; }
h1 { color: white; }
}
'Web 프로그램 > 메뉴 만들기' 카테고리의 다른 글
| [bootstrap] navbar-fixed-top 설정때문에 (0) | 2017.02.07 |
|---|---|
| [bootstrap] TopMenu, 로그인, 로그아웃 처리 (0) | 2017.02.01 |
| [jQuery] easyUI treeview 만들기 (MySQL to JSON tree using PHP) (0) | 2016.12.24 |
| [jQuery] easyUI treeview 만들기 (MySQL to JSON using PHP) (0) | 2016.12.23 |
| [jQuery] jsTree Treeview 만들기(MySQL to JSON tree using PHP) (0) | 2016.12.21 |
Link2Me