본문 바로가기

CSS MENU

깔끔한 css 메뉴 (가로사이즈) 메뉴 미리보기 깔끔한 세로형 CSS 메뉴입니다. CSS 스크립트 메뉴가 설치하기 힘든 분들은 , CSS 테이블 메뉴로 깔끔하게 메뉴를 꾸며도 될것같아요^^ 소스보기 ■ 사이에 들어갈 소스 ■ ~ 사이에 들어갈 소스 희야의웹하우스 포토샵강좌 블로그꾸미기 질문게시판 흔적남기기 위 소스를 보시고 정해진 위치에 제대로 넣어주시면 됩니다. line-height:30px; 은 메뉴바의 높이를 나타냅니다. -- 직접 바꿔서 보시면 바로 알겁니다 ^^; font-size:12px , color:#FFFFFF; 은 글자 사이즈, 그리고 글자 색을 나타납니다. menu36 a:hover 이부분이 마우스를 링크에 가따대었을때 하얀색으로 테두리가 생기지요 ? 그 효과를 설정하는 곳입니다. 본인의 사이트나 블로그에 맞게끔 수정.. 더보기
깔끔한 css 테이블 메뉴 - 4 깔끔한 CSS 메뉴 입니다. ■ 소스보기 다운받으시면 어느부분에 소스를 넣어야 할지 바로 아실 겁니다 ^^ 간단한 테이블 하나로도, 내 블로그의 분위기가 확 달라진답니다 ~ @_@ 더보기
깔끔한 CSS 메뉴 - 2 ■ 메뉴 미리보기 기본상태 메뉴 모습과 마우스오버시 메뉴 모습입니다. ■ 소스 사용법 = 전체적인 소스를 먼저 다운받으세요. = 위 css 와 js 소스 그리고 아래 4개의 이미지를 모두 다운받아야 합니다. 티스토리를 기준으로 설명하겠습니다. ( 그냥 웹계정에 올린다면, 모든 파일을 같은 폴더에 업로드하면 따로 주소를 적어줄 필요가 없습니다.) 드롭다운 메뉴를 사용해보면서 알게된건데......... css, js 소스를 먼저 업로드하고 이미지주소를 적으면 적용이 바로 안되더군요 -_-) 그래서 일단 이미지들 부터 티스토리에 먼저 업로드 해야합니다. 업로드 하는방법은 앞에 강좌에서 설명했습니다. 티스토리 파일업로드 방법과 주소알아내는 방법 = [■ 블로그꾸미기] - 사이드부분에 새로운 메뉴 추가하기 이곳을.. 더보기
깔끔한 언더라인 메뉴 ■ 메뉴 미리보기 지금 제 블로그에도 CSS 메뉴를 이용해서 만들었습니다. 복잡한 자바스크립트보단 소스도 더 간결하면서, 수정하기도 쉬어서 요즘 많이들 사용하고 있지요 ~ ■ 소스 살펴보기 먼저 소스를 다운받아주세요. 먼저 소스를 열어보시면 어디서 부터 어디까지가 head 와 body 에 들어갈 소스인지 알게됩니다. 위 소스에서 다른 부분은 그다지 수정하지 않아도 상관없고요, 자신의 홈피색에 맞게 하려면 빨간 네모난 부분만 수정하셔도 됩니다. color : 메뉴 색을 나타냅니다. border-bottom : 메뉴 아래 라인 부분 두께를 조절합니다. solid gray 메뉴 라인부분의 색을 나타냅니다. border-bottom-color : black 마우스를 가따대었을때 색을 말합니다. ■ 소스 적용하기.. 더보기