심플하고 깔끔한

가로 메뉴 만들기

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);*/

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

 

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

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

 

Posted by JOY [바가지]

댓글을 달아 주세요

  1. 노루막이 2018.04.07 10:43 신고  댓글주소  수정/삭제  댓글쓰기

    잘봤습니다

    추천♥남기고 갑니다 ㅎ

  2. Deborah 2018.04.07 18:20 신고  댓글주소  수정/삭제  댓글쓰기

    자주 활용을 해야 되는데 저도 학교다닐때 배우고 지금은 전혀 하지 않으니 다 잊게 되네요. 행복한저녁시간 되세요.

  3. *저녁노을* 2018.04.07 18:48 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다.

    즐거운 주말 되세요^^

  4. 베짱이 2018.04.07 20:36 신고  댓글주소  수정/삭제  댓글쓰기

    css 공부하시는 분들에게 도움되는 글이네요

  5. 2018.04.07 23:55  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  6. @산들바람 2018.04.08 22:26 신고  댓글주소  수정/삭제  댓글쓰기

    잘보고 갑니다.