HTML과 CSS로 심플한 메뉴를 추가했습니다

2017. 10. 16. 01:28 | 댓글 10

티스토리 스킨 중에서 기본 스킨 중 하나인 #1을 사용 중입니다. 레이아웃이 깔끔하여 마음에 드네요. 하지만 메뉴가 없습니다. "메뉴 관리"를 클릭하면 "지금 사용하시는 스킨은 메뉴를 지원하지 않습니다. 메뉴를 지원하는 스킨으로 변경후 사용하시기 바랍니다."라는 안내 문구가 뜨네요.

그래서 카테고리(분류) 드롭다운 메뉴를 없애고 대신 Home 메뉴와 몇 가지 카테고리 메뉴가 포함된 가로 메뉴(수평 메뉴)를 추가했습니다.

저는 Dynamicdrive라는 사이트에서 제공하는 HTML 코드와 CSS를 그대로 사용했습니다. Dynamicdrive 사이트로 이동한 다음 상단 메뉴에서 CSS CODES > Horizontal CSS Menus(가로 CSS 메뉴)를 클릭합니다.

Horizontal CSS Menus 메뉴를 클릭하면 다음과 같이 CSS 라이브러리 CSS 메뉴 리스트가 표시됩니다.

 

마음에 드는 메뉴를 선택하면 소스 코드를 확인할 수 있습니다. 그대로 복사하여 적용하면 됩니다. 저는 위의 그림에서 맨 아래에 있는 CSS Animated Underline Menu를 선택했습니다.

이제 Home 메뉴와 몇 가지 메뉴 항목이 상단에 표시됩니다. 다만 드롭다운은 안 됩니다. 살펴보면 드롭다운을 지원하는 메뉴도 있습니다. 아니면 구글을 검색해보면 다양한 소스를 찾을 수 있습니다.

참고할만한 문서:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    정보번식

    댓글타고와서 적용해봤는데 님처럼 Home 워드프레스 웹호스팅 일상 번역 IT 기타처럼 밑에 드롭다운도 안되고... 이상한데 적용되었어요 ㅜㅜ

  2. thumbnail
    정보번식

    정말 감사드립니다