• 회원가입
  • 로그인
  • 구글아이디로 로그인

[JS-서기] JS 17강 - 허버메뉴만들기

721  


예제1 - JS 허버 

 

<style>

  #hz {

    margin:0;

    padding:0;

  }

  #hz li {

    float:left;

    list-style:none;

    width:25%;

    box-sizing:border-box;

  }

  #hz li a.on {

    background:red;

    color:white;

    border:1px solid red;

    padding:20px;

    display:block;

    text-align:center;

    text-decoration:none;

    margin:0 5px;

    cursor:pointer;

  }

  #hz li a.off {

    background:transparent;

    color:black;

    border:1px solid red;

    padding:20px;

    display:block;

    text-align:center;

    text-decoration:none;

    margin:0 5px;    

  }

</style>


<script>

function on(a) {

  a.setAttribute('class','on');

}

  

function off(a) {

  a.setAttribute('class','off');

}

  

function url(a) {

  if(a == 1) {

    location.href='https://homzzang.com';

  } else if (a == 2) {

    location.href='https://homzzang.com/b/html';

  } else if (a == 3) {

    location.href='https://homzzang.com/b/css';

  }  else if (a == 4) {

    location.href='https://homzzang.com/b/js';

  }

}

</script>


<ul id='hz'>

  <li><a class='off' onclick='url(1)' onmouseover='on(this)' onmouseleave='off(this)' >홈</a></li>

  <li><a class='off' onclick='url(2)' onmouseover='on(this)' onmouseleave='off(this)'>HTML</a></li>

  <li><a class='off' onclick='url(3)' onmouseover='on(this)' onmouseleave='off(this)'>CSS</a></li>

  <li><a class='off' onclick='url(4)' onmouseover='on(this)' onmouseleave='off(this)'>JS</a></li>

</ul>

 

결과 보기

  

 

예제2 - CSS 허버

 

<style>

#hz {

   margin:0;

   padding:0;

}

#hz li {

   float:left;

   list-style:none;

   width:25%;

   box-sizing:border-box;

}

#hz li a {

   border:1px solid red;

   padding:20px;

   display:block;

   text-align:center;

   text-decoration:none;

   margin:0 5px;

}

#hz li a:hover {

   background:red;

   color:white;

   cursor:pointer;

}

</style>


<ul id='hz'>

  <li><a href='https://homzzang.com'>홈</a></li>

  <li><a href='https://homzzang.com'>HTML</a></li>

  <li><a href='https://homzzang.com'>CSS</a></li>

  <li><a href='https://homzzang.com'>JS</a></li>

</ul>


결과 보기



분류 제목
JS-서기 JS 5강 - for반복문 흐름, 1~100 출력 및 합산 3
JS-서기 JQ 4강 - 허버메뉴
JS-서기 JQ 3강 - 이벤트, 이펙트 (=메서드)
JS-서기 JQ 2강 - JQUERY (제이쿼리) 다운로드, 외부링크, 기본구문
JS-서기 JQ 1강 - JQUERY (제이쿼리) 개념, CSS 선택자
JS-서기 JS 17강 - 허버메뉴만들기
JS-서기 JS 16강 - this객체, 조건분기, 속성설정
JS-서기 JS 15강 - CSS 선택자
JS-서기 JS 14강 - HTML CSS JS 혼용하기 (=getElementsBy 시리즈 = JS선택자) ★★★★★
JS-서기 JS 13강 - DOM (돔: Document Object Model 문서객체모델)
JS-서기 JS 12강 - 이벤트핸들러2 (event handler) - onload, onunload, / confi…
JS-서기 JS 11강 - 이벤트핸들러1 (event handler)
JS-서기 JS 10강 - 사용자정의함수 (조건, 경고창, 페이지이동) (function, if, alert, url,…
JS-서기 JS 9강 - 함수 제작 (= 사용자정의함수)
JS-서기 JS 8강 - for문 안쪽에 if문 사용 (= 행렬 표만들기 = 줄바꿈 = 줄바꾸기 = 줄변경 = 라인변…
JS-서기 JS 7강 - 모든 구구단 (= 중첩포문 = 이중포문 = 이단포문) (for double loop)
JS-서기 JS 6강 - 특정 구구단
JS-서기 JS 4강 - else if 조건문, && 기호 의미
JS-서기 JS 3강 - 변수선언, prompt() 입력함수, if조건문, 사이트 이동 ★
JS-서기 JS 2강 - 변수 선언 및 출력
1/2
목록
찾아주셔서 감사합니다. Since 2012