본문 바로가기

■ 블로그꾸미기/css menu

깔끔한 CSS 메뉴 - 2 ■ 메뉴 미리보기 기본상태 메뉴 모습과 마우스오버시 메뉴 모습입니다. ■ 소스 사용법 = 전체적인 소스를 먼저 다운받으세요. = 위 css 와 js 소스 그리고 아래 4개의 이미지를 모두 다운받아야 합니다. 티스토리를 기준으로 설명하겠습니다. ( 그냥 웹계정에 올린다면, 모든 파일을 같은 폴더에 업로드하면 따로 주소를 적어줄 필요가 없습니다.) 드롭다운 메뉴를 사용해보면서 알게된건데......... css, js 소스를 먼저 업로드하고 이미지주소를 적으면 적용이 바로 안되더군요 -_-) 그래서 일단 이미지들 부터 티스토리에 먼저 업로드 해야합니다. 업로드 하는방법은 앞에 강좌에서 설명했습니다. 티스토리 파일업로드 방법과 주소알아내는 방법 = [■ 블로그꾸미기] - 사이드부분에 새로운 메뉴 추가하기 이곳을.. 더보기
깔끔한 언더라인 메뉴 ■ 메뉴 미리보기 지금 제 블로그에도 CSS 메뉴를 이용해서 만들었습니다. 복잡한 자바스크립트보단 소스도 더 간결하면서, 수정하기도 쉬어서 요즘 많이들 사용하고 있지요 ~ ■ 소스 살펴보기 먼저 소스를 다운받아주세요. 먼저 소스를 열어보시면 어디서 부터 어디까지가 head 와 body 에 들어갈 소스인지 알게됩니다. 위 소스에서 다른 부분은 그다지 수정하지 않아도 상관없고요, 자신의 홈피색에 맞게 하려면 빨간 네모난 부분만 수정하셔도 됩니다. color : 메뉴 색을 나타냅니다. border-bottom : 메뉴 아래 라인 부분 두께를 조절합니다. solid gray 메뉴 라인부분의 색을 나타냅니다. border-bottom-color : black 마우스를 가따대었을때 색을 말합니다. ■ 소스 적용하기.. 더보기