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

예제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>

결과 보기