css navigation bar 네비게이션 메뉴 바 만들기

 

어느 사이트나 네비게이션 메뉴는 필수적으로 사용됩니다. 큰 카테고리의 링크역활을 하기 때문입니다. 이 큰 카테고리 네비게이션은 PC버전이나 모바일 버전에 따라 틀리게 제작하기도 합니다. 간단한 css와 html 태그만으로 내가 생각한 멋진 디자인을 만들 수 있습니다. 물론 티스토리 블로그 메뉴도 마찬가지로 직접 수정이 가능합니다.

딱 정해진것은 아니지만 보통 네비게이션 태그는 ul, li로 구성합니다.

html

<ul class="navi">

 <li><a href="#">menu1</a></li>

 <li><a href="#">menu2</a></li>

 <li><a href="#">menu3</a></li>

 <li><a href="#">menu4</a></li>

</ul>

2017.07.30 - [웹(IT) 정보/css] - CSS3 Button-스타일로 버튼만들기

CSS3 Button-스타일로 버튼만들기

아무css도 적용하지 않은 ul li 입니다.

• menu1
• menu2
• menu3
• menu4

 

css를 적용해 각 마진과 list-style을 빼보겠습니다.

.ul {list-style-type:none; margin:0; padding:0;}

• menu1
• menu2
• menu3
• menu4

 

기본적인 형태가 되었습니다. 이제 디자인을 입혀보겠습니다.

• menu1
• menu2
• menu3
• menu4

 

ul li a {display: block; color: #000; padding: 8px 16px; text-decoration: none; }

ul li a:hover {background:#ccc; color:#fff;}

마우스 오버시에 백그라운드컬러가 활성화되는것을 볼 수있습니다.

모바일에선 상하메뉴를 사용하지만 pc버전에서는 float을 이용해 한줄로 만드는것이 좋습니다. 물론 snb처럼 서브메뉴는 목록형식으로 메뉴를 구분하는게 맞습니다.

 

• menu1
• menu2
• menu3
• menu4

 

ul li {width:100px; float:left; background:#f9f9f9}

 

같은 메뉴이지만 float:left와 width값만으로 위와같은 정렬이 가능합니다.

class와 자바스크립트를 추가하여 .active {background} 를 이용하여 현재페이지 구분도 가능 합니다.

float:right 를 이용하여 menu4번만 html에 추가해주면 menu4만 오른쪽으로 이동됩니다. 미디어쿼리를 이용하여 pc버전 모바일버전등을 나누어서 css코딩해주면 끝.

position:fixed를 이용하여 마우스 스크롤시 top으로 메뉴고정하는 방법이 요즘 많이 사용되고 있어서 이부분을 많이 이용하시면 좋을것 같습니다.

2017.08.02 - [웹(IT) 정보/html] - html/css 목록태그 ol,ul,dl 이것만 알아도 홈페이지 만든다!

html/css 목록태그 ol,ul,dl 이것만 알아도 홈페이지 만든다!