심플하고 깔끔한
가로 메뉴 만들기
CSS로 심플하고 깔끔한 가로 메뉴를 만들어 보도록 하겠습니다.
또한 hover 등을 이용하여 간단한 효과를 주도록 하겠습니다.
먼저 예제의 결과는 아래와 같습니다.
HTML 부분은 div 안에 ul 안에 li로 구성 됩니다.
<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 부분입니다.
#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);*/
부분의 주석(/* */)을 풀어 주면 됩니다.
바탕 색상이 마음에 들지는 않지만 간단하게 메뉴 만드는 방법에 대하여 소개 해 보았습니다.
메뉴 텍스트 앞에 자그마한 이미지를 추가하면 더 보기 좋을 듯 합니다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
자바스크립트 배열(array)이란 무엇인가? (0) | 2018.04.23 |
---|---|
Margin, Padding 태그를 통한 DIv 여백 설정 알아보기 (4) | 2018.04.14 |
[CSS] position:absolute 속성 예제 (0) | 2018.03.28 |
[CSS] position:relative 속성 예제 (6) | 2018.03.24 |
CSS Position 속성 이해하기 (1) | 2018.03.22 |