본문 바로가기
프로그래밍/HTML, CSS, JavaScript

CSS hover 효과를 이용한 심플 가로 메뉴 만들기

by [바가지] 2018. 4. 6.

심플하고 깔끔한

가로 메뉴 만들기

hover 이용한 메뉴 만들기

 

CSS로 심플하고 깔끔한 가로 메뉴를 만들어 보도록 하겠습니다.

또한 hover 등을 이용하여 간단한 효과를 주도록 하겠습니다.

먼저 예제의 결과는 아래와 같습니다.

 




HTML 부분은 div 안에 ul 안에 li로 구성 됩니다. 

<div id="navi">
      <ul>
        <li><a href="">이런아이티</a></li>
        <li><a href="">이런육아</a></li>
        <li><a href="">이런여행</a></li>
        <li><a href="">이런맛집</a></li>
        <li><a href="">이런책</a></li>
        <li><a href="">이런말말말</a></li>
     </ul>
</div>

 

다음은 CSS인 style 부분입니다.

<style>

 #navi ul {
   position:absolute;
   background-color:#FAECC5;
   margin:0px;
   padding:0px;
   border-radius:10px;
 }

 #navi ul > li {
   float:left;
   list-style:none;
   padding:10px;
   margin:0px;
   border-radius:3px;
 }
 #navi ul > li:hover {
   background-color:#FFBB00;
   transition: background-color 1.2s ease;
   -webkit-transition: background-color 1.2s ease;
   -moz-transition: background-color 1.2s ease;
   /*-ms-transform:rotate(10deg);*/ /*IE9*/
   /*-webkit-transform:rotate(10deg);*/ /*크롬, 사파리, 오페라*/
   /*transform:rotate(10deg);*/
 }
 
 a {
   text-decoration : none;
   display:block;
   color:#111;
   z-index:99;
   font-size:14px;
   font-family:sans-serif, 굴림, 돋움;
 }
</style>

 

메뉴의 모습은 아래와 같습니다.

메뉴

그리고 마우스를 올리면 다음과 같이 해당 메뉴의 바탕색이 천천히 변경 됩니다.

마우스오버 된 메뉴

 

조금 임팩트를 주길 원한다면

/*-ms-transform:rotate(10deg);*/    /*-webkit-transform:rotate(10deg);*/   /*transform:rotate(10deg);*/

부분의 주석(/* */)을 풀어 주면 됩니다.

 

바탕 색상이 마음에 들지는 않지만 간단하게 메뉴 만드는 방법에 대하여 소개 해 보았습니다.

메뉴 텍스트 앞에 자그마한 이미지를 추가하면 더 보기 좋을 듯 합니다.

 

반응형

댓글12