2013. 2. 12. 17:56ㆍKnowLedge/JAVASCRIPT
CSS
-----------------------------------------------------------------------------------------
#navi {
background-image:url("../img/menubg.png"); background-repeat:repeat-x;
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
list-style: none;
z-index:999999;
width:100%;
}
HTML
------------------------------------------------------------------------------------------
****이름의 값은 같아야 클릭 시 이동을 한다.
참고 : 귀찮아서 이미지맵으로 한거임.. 원래는 하나씩 설정해야되는데.. 잘 생각해보면 이미지맵으로 보여줘도
이해하기가 더 쉬울뜻하네요.
navi.php
<div id="navi" >
<div id="navi_in" ><img src='./img/menu.png' border="0" alt="네비게이션" usemap="#navi_map"></div>
<map name="navi_map">
<area shape="rect" coords="22,69,88,82" href="#menu01" alt="company" >
<area shape="rect" coords="121,69,177,82" href="#menu02" alt="website" >
<area shape="rect" coords="211,69,256,82" href="#menu03" alt="mobile" >
<area shape="rect" coords="294,69,389,82" href="#menu04" alt="management" >
<area shape="rect" coords="427,69,495,82" href="#menu05" alt="software" >
<area shape="rect" coords="530,69,620,82" href="#menu06" alt="presentation" >
<area shape="rect" coords="657,69,763,82" href="#menu07" alt="graphic design" >
</map>
</div>
index.php
<div>
<a name="menu01"/></a><img src='./img/01.png' border="0" alt="company">
<a name="menu02"/></a><img src='./img/02.png' border="0" alt="website">
<a name="menu03"/></a><img src='./img/03.png' border="0" alt="mobile">
<a name="menu04"/></a><img src='./img/04.png' border="0" alt="management">
<a name="menu05"/></a><img src='./img/05.png' border="0" alt="software">
<a name="menu06"/></a><img src='./img/06.png' border="0" alt="presentation">
<a name="menu07"/></a><img src='./img/07.png' border="0" alt="graphicdesign">
</div>
이러면 일딴 해당을 클릭시 그 페이지로 아래로 쑹쑹 내려간다... 하지만!!!
엄청 딱딱하게 내려갈꺼예요...
그래서 이때 자바스크립트를 삽입을 해줘야지요^^
자바스크립트는 <head></head> 부분에 넣어주셔야됩니당.
<head>
<script src="./include/jquery.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$('[href=#menu01]').click(function(){
$('html, body').animate({scrollTop:0}, 'middle');
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('[href=#menu02]').click(function(){
$('html, body').animate({scrollTop:120}, 'middle');
return false;
});
});
</script>
jquery.js이런식으로 스크립트를 꼭 넣어주셔야되고요^^
예제 사이트 : http://crazydesign.co.kr/test
'KnowLedge > JAVASCRIPT' 카테고리의 다른 글
| 메뉴 페이지 인식 두번째 방법. (0) | 2013.11.01 |
|---|---|
| tweenmax (0) | 2013.11.01 |
| 모달팝업. (0) | 2013.10.28 |
| 오전 오후 다른 백그라운드 쓰기~ (0) | 2013.02.12 |
| 플래시 삽입 JS (0) | 2013.02.12 |