관심있는 모든것들을 리뷰-

웹개발/HTML

apple 느낌의 css 메뉴바

에르소 2014. 6. 8. 03:47
반응형


본 html 은, html5 로 이루어져있습니다 :)


[목록태그에 관한 링크: http://dpfmth.tistory.com/122]


[HTML CODE] // ul 사용하지 않은 경우


<!DOCTYPE html>

<html>

<head>

<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />

<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />

<link rel='stylesheet' type='text/css' href='styles.css' />

</head>

<body>

<div id='cssmenu'>

  <ul>

   <li class='active'><a href='index.html'><span>Home</span></a></li>

   <li class='has-sub'><a href='#'><span>스토어</span></a></li>

   <li class='has-sub'><a href='#'><span>Mac</span></a></li>

   <li class='has-sub'><a href='#'><span>iPod</span></a></li>

   <li class='has-sub'><a href='#'><span>iPhone</span></a></li>

   <li class='has-sub'><a href='#'><span>iPad</span></a></li>

   <li class='has-sub'><a href='#'><span>iTunes</span></a></li>

   <li class='last'><a href='#'><span>고객지원</span></a></li>

</ul>

</div>

</body>

</html>


[HTML CODE] // ul 사용하는 경우


<!DOCTYPE html>

<html>

<head>

<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />

<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />

<link rel='stylesheet' type='text/css' href='styles.css' />

</head>

<body>

<div id='cssmenu'>

  <ul>

   <li class='active'><a href='index.html'><span>Home</span></a></li>

   <li class='has-sub'><a href='#'><span>스토어</span></a>

   <li class='has-sub'><a href='#'><span>Mac</span></a>

   <ul>

         <li><a href='#'><span>mac</span></a></li>

         <li><a href='#'><span>mac pro</span></a></li>

         <li class='last'><a href='#'><span>mac air</span></a></li>

      </ul>

   <li class='has-sub'><a href='#'><span>iPod</span></a></li>

   <ul>

         <li><a href='#'><span>iPodTouch</span></a></li>

         <li><a href='#'><span>iPodNano</span></a></li>

         <li><a href="#"><span>iPodClassic</span></a></li>

         <li class='last'><a href='#'><span>iPodShuffle</span></a></li>

      </ul>

   <li class='has-sub'><a href='#'><span>iPhone</span></a>

   <ul>

         <li><a href='#'><span>iPhone4</span></a></li>

         <li><a href='#'><span>iPhone4S</span></a></li>

         <li><a href="#"><span>iPhone5</span></a></li>

         <li class='last'><a href='#'><span>iPhone5S</span></a></li>

      </ul>

   <li class='has-sub'><a href='#'><span>iPad</span></a>

   <ul>

         <li><a href='#'><span>iPad1</span></a></li>

         <li><a href='#'><span>iPad2</span></a></li>

         <li><a href="#"><span>New iPad</span></a></li>

         <li><a href='#'><span>iPad 4</span></a></li>

         <li><a href='#'><span>iPad Mini</span></a></li>

         <li><a href="#"><span>iPad Mini Retina</span></a></li>

         <li class='last'><a href='#'><span>iPad Air</span></a></li>

      </ul>

   <li class='has-sub'><a href='#'><span>iTunes</span></a>

   <li class='last'><a href='#'><span>고객지원</span></a>

</ul>

</div>

</body>

</html>



 [css 코드]

#cssmenu ul {

  margin: 0;

  padding: 7px 6px 0;

  background: #7d7d7d repeat-x 0 -110px;

  line-height: 100%;

  border-radius: 1em;

  font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  width: auto;

}

#cssmenu li {

  margin: 0 5px;

  padding: 0 0 8px;

  float: left;

  position: relative;

  list-style: none;

}

#cssmenu a,

#cssmenu a:link {

  font-weight: bold;

  font-size: 13px;

  color: #e7e5e5;

  text-decoration: none;

  display: block;

  padding: 8px 20px;

  margin: 0;

  border-radius: 5px;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

}

#cssmenu a:hover {

  background: #000;

  color: #fff;

}

#cssmenu .active a,

#cssmenu li:hover > a {

  background: #979797 repeat-x 0 -40px;

  background: #666666 repeat-x 0 -40px;

  color: #444;

  border-top: solid 1px  #f8f8f8;

  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

  text-shadow: 0 1px 0 #ffffff;

}

#cssmenu ul ul li:hover a,

#cssmenu li:hover li a {

  background: none;

  border: none;

  color: #666;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

}

#cssmenu ul ul a:hover {

  background: #7d7d7d repeat-x 0 -100px !important;

  color: #fff !important;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

}

#cssmenu li:hover > ul {

  display: block;

}

#cssmenu ul ul {

  z-index: 1000;

  display: none;

  margin: 0;

  padding: 0;

  width: 185px;

  position: absolute;

  top: 40px;

  left: 0;

  background: #ffffff repeat-x 0 0;

  border: solid 1px #b4b4b4;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

}

#cssmenu ul ul li {

  float: none;

  margin: 0;

  padding: 3px;

}

#cssmenu ul ul a,

#cssmenu ul ul a:link {

  font-weight: normal;

  font-size: 12px;

}

#cssmenu ul:after {

  content: '.';

  display: block;

  clear: both;

  visibility: hidden;

  line-height: 0;

  height: 0;

}

* html #cssmenu ul {

  height: 1%;

}






반응형
저작자표시 비영리 변경금지

'웹개발 > HTML' 카테고리의 다른 글

이클립스 브라우저 설정<Kepler> // (Luna 버전 추가)  (0) 2014.06.13
AQUA 타입의 버튼 제작하기  (0) 2014.06.12
HTML 5장 (테이블 태그)  (0) 2014.06.04
HTML 4장 (목록태그)  (0) 2014.06.04
HTML 3장 (글자태그)  (0) 2014.06.04

'웹개발/HTML'의 다른글

  • 현재글apple 느낌의 css 메뉴바

관련글

댓글

티스토리툴바