상단 메뉴 고정 및 클릭시 부드럽게 이동

2013. 2. 12. 17:56KnowLedge/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
상단 메뉴 고정 및 클릭시 부드럽게 이동  (0) 2013.02.12
플래시 삽입 JS  (0) 2013.02.12