Scroll Menu in jQuery / 제이쿼리로 스크롤 메뉴 만들기 

	

<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>scroll_menu</title>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
   $(function(){
    var menu=$("#top_menu > ul > li");
    var contents=$('#contents > div');  
    //메뉴 클릭시 해당 컨테이너로 이동
    menu.click(function(event){
     event.preventDefault();
     var i=$(this).index();
     var tt=contents.eq(i).offset().top;
     $("html, body").stop().animate({scrollTop:tt});
    });
    //스크롤시 해당메뉴가 선택됨
    $(window).scroll(function(){
     var sct=$(window).scrollTop();
     console.log(sct);
     contents.each(function(){
      var i=$(this).index();
      if($(this).offset().top<=sct){
       menu.removeClass("on");
       menu.eq(i).addClass("on");
      }
     });
    });  
   })
  </script>
  <style>
   * { margin:0; padding:0; }
   a {color:inherit; text-decoration:none;}
   body { background: #545454;}
   .wrap { width:950px; margin:0 auto; padding-bottom:400px; }
   #top_menu { position: fixed; width:950px; height:114px; margin:0 auto; text-align:center; top:0px; background: #545454;}
   #top_menu ul {float:right; margin-right:33px;}
   #top_menu ul li { padding:59px 0px 0px 63px; float:left; list-style: none; color: #CCCCCC;}
   #top_menu ul li a { color:#fff;}
   #top_menu ul li.on a { color:#000; font-weight:bold;}
   #logo {float:left; width:125px; padding-top:25px; color:#FFFFFF; font-size:48px; font-weight:bold;}    
   #contents div {padding-top:114px; text-align:center; line-height:600px; font-size:68px; color:#fff; font-weight:bold;}
   #paper { width:100%; height:600px;background:#00BAFF;}
   #works {width:100%; height:600px; background:pink;}
   #email {width:100%; height:600px; background:#FFE200;}
  </style>
 </head>
 <body>
  <div class="wrap">
   <div id="top_menu">     
    <div id="logo">
     <a href="#home">paper</a>
    </div>
    <ul>
     <li class="on"><a href="#works">paper</a></li>
     <li><a href="#company">works</a></li>
     <li><a href="#email">email</a></li>
    </ul>     
   </div>
   <div id="contents">
    <div id="paper">paper</div>
    <div id="works">works</div>
    <div id="email">email</div>
   </div>
  </div>
 </body>
</html>

댓글

댓글 쓰기

이 블로그의 인기 게시물

Lottery in javascript / 자바스크립트로 경품추첨기 만들기

<style> body{font-size:9pt;} #panel{border:1px #000000 solid; line-height:400px; font-size:100px; width:400px; height:400px; text-align:center; vertical-align:middle;} </style> <script> var panel; var nTimerID; var labTotal; var nTotalMember; window.onload=function(){ this.init();// 요소 초기화 실행. this.initEventListener();// 이벤트 초기화 실행. } function init(){// 요소 초기화. this.panel = document.getElementById("panel");// 숫자가 출력될 #panel을 찾아 전역변수에 담아둡니다. this.nTimerID = 0;// 참여인원 정보가 입력된 패널을 찾아 전역변수에 담아둡니다. this.labTotal = document.getElementById("lab_total"); this.nTotalMember = 0; } function initEventListener(){// 이벤트 초기화. var btnStart = document.getElementById("btn_start"); btnStart.addEventListener("click", function(){ startTimer(); },false); var btnStop = document.getElementById("btn_stop"); btnStop.addEventListener("click...
자세한 내용 보기

Accordion Menu in jQuery / 제이쿼리로 아코디언 메뉴 만들기

<div class="menu">menu01</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <div class="menu">menu02</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <style> .accordion {display:none;} .menu.on {color:red;} </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ /*메뉴 아코디언*/   $('.accordion').hide();   $('.menu').click(function(){ $(this).toggleClass('on')         $(this).next().slideToggle();   }); }); </script>
자세한 내용 보기

Quick Menu(flying menu) in jQuery / 제이쿼리로 퀵메뉴 바 만들기

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>scroll_menu</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .wrap {width:1000px; height:3000px; background-color:#cdcdcd; margin:0 auto;} #q_menu {width:80px; height:300px; border: 1px solid #000; position: absolute; margin-left: 1000px; margin-top: 150px;} #textDiv {position: absolute;} </style> <script type="text/javascript"> $(document).ready( function(){ $('#q_menu').animate({'top':$(document).scrollTop()+20+'px'},500);//처음시작하는위치 $(window).scroll(function(){ $('#q_menu').stop(); $('#q_menu...
자세한 내용 보기