본문 바로가기
웹개발/웹개발

apple 느낌의 css 메뉴바

by 에르소 2014. 6. 8.


본 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%;

}







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

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

댓글0