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

워드프레스 정보를 제공하는 블로그 Avada 2017. 10. 16. 01:28 • 댓글:

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

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

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

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

 

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

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

참고할만한 문서: