글
css_vmenu.zip 필자가 IAC Korea 웹사이트에 사용한 CSS Vertical Menu. 특별한 Generator의 도움 없이 CSS의 ID만으로 Selected 효과(클릭한 메뉴가 하이라이트)가 가능한 간단하면서도 검색엔진 친화적 메뉴다. css_vmenu.zip 파일을 다운로드 받으면 다음과 같은 소스가 포함되어 있다. 참 고로 클릭한 메뉴가 다음 페이지에서 Selected On으로 표시하고 싶다면 HTML 문서에서 body 태그에 cars-black이라는 이름의 ID를 부여 해 놓은 후, CSS 파일에서는 아래와 같이 cars-black이라는 ID에 대해 Selected 되었을 경우에 해당 LI 태그의 배경색이 바뀌게끔 정의한다. view plaincopy to clipboardprint? body#cars-black a#black, { background-color: #1c1c1c; } body#cars-black a#black, { background-color: #1c1c1c; } XHML & CSS Code XHTML Code
view plaincopy to clipboardprint? <body id="cars-black"> <ul id="vmenu"> <li class="top"><a href="#">Cars Category</a></li> <li><a href="#" id="black-plus">Black Plus+ Membership</a></li> <li><a href="#" id="black">Black membership</a></li> <ul> <li><a href="#">Group A</a></li> <li><a href="#">Group B</a></li> <li><a href="#">Group C</a></li> </ul> <li><a href="#" id="corporate">Corporate Membership</a></li> <li><a href="#" id="platinum">Platinum Membership</a></li> <li class="bottom"><a href="javascript:history.back();">Back to previous</a></li> </ul> </body> <body id="cars-black"> <ul id="vmenu"> <li class="top"><a href="#">Cars Category</a></li> <li><a href="#" id="black-plus">Black Plus+ Membership</a></li> <li><a href="#" id="black">Black membership</a></li> <ul> <li><a href="#">Group A</a></li> <li><a href="#">Group B</a></li> <li><a href="#">Group C</a></li> </ul> <li><a href="#" id="corporate">Corporate Membership</a></li> <li><a href="#" id="platinum">Platinum Membership</a></li> <li class="bottom"><a href="javascript:history.back();">Back to previous</a></li> </ul> </body>
CSS Code
view plaincopy to clipboardprint? <!-- body {background-color:#000000} body#cars-black a#black, { background-color: #1c1c1c; } #vmenu { font: 11px"Lucida Grande", Geneva, Arial, Verdana, sans-serifsans-serif; list-style-type: none; width: 291px; margin: 25px0px20px0px; padding: 0px; background-color: #2a2a2a; } #vmenu li a { color: #949494; height: 22px; border:1pxsolid#000000; border-bottom: none; padding: 10px0px0px15px; display:block; text-decoration:none} #vmenu li a:hover { color: #ffffff; text-decoration: none; background-color: #1c1c1c; } #vmenu li.top a { background: #2a2a2aurl(btop.gif) no-repeattop; font-weight: bold; display:block; } #vmenu li.bottom a{ color: #666666; background: #2a2a2aurl(bbottom.gif) no-repeatbottom; display:block; } #vmenu ul {margin: 0px; padding: 0px; list-style-type: none; border: 1pxsolid#000000; border-bottom: none; background-image: url(/images/sample/vmenu_bg.gif); } #vmenu ul li a { height: 15px; color: #949494; padding: 5px0px5px15px; border: none; background-color: #333333; background-image: none; text-decoration:none} #vmenu ul li a:hover { color: #ffffff; text-decoration: underline; background-color: #333333; background-image: none; } --> </style> <!-- body {background-color:#000000} body#cars-black a#black, { background-color: #1c1c1c; } #vmenu { font: 11px "Lucida Grande", Geneva, Arial, Verdana, sans-serif; list-style-type: none; width: 291px; margin: 25px 0px 20px 0px; padding: 0px; background-color: #2a2a2a; } #vmenu li a { color: #949494; height: 22px; border:1px solid #000000; border-bottom: none; padding: 10px 0px 0px 15px; display:block; text-decoration:none} #vmenu li a:hover { color: #ffffff; text-decoration: none; background-color: #1c1c1c; } #vmenu li.top a { background: #2a2a2a url(btop.gif) no-repeat top; font-weight: bold; display:block; } #vmenu li.bottom a{ color: #666666; background: #2a2a2a url(bbottom.gif) no-repeat bottom; display:block; } #vmenu ul {margin: 0px; padding: 0px; list-style-type: none; border: 1px solid #000000; border-bottom: none; background-image: url(/images/sample/vmenu_bg.gif); } #vmenu ul li a { height: 15px; color: #949494; padding: 5px 0px 5px 15px; border: none; background-color: #333333; background-image: none; text-decoration:none} #vmenu ul li a:hover { color: #ffffff; text-decoration: underline; background-color: #333333; background-image: none; } --> </style> written by..http://www.webtrendawards.com/838
view plaincopy to clipboardprint? <body id="cars-black"> <ul id="vmenu"> <li class="top"><a href="#">Cars Category</a></li> <li><a href="#" id="black-plus">Black Plus+ Membership</a></li> <li><a href="#" id="black">Black membership</a></li> <ul> <li><a href="#">Group A</a></li> <li><a href="#">Group B</a></li> <li><a href="#">Group C</a></li> </ul> <li><a href="#" id="corporate">Corporate Membership</a></li> <li><a href="#" id="platinum">Platinum Membership</a></li> <li class="bottom"><a href="javascript:history.back();">Back to previous</a></li> </ul> </body> <body id="cars-black"> <ul id="vmenu"> <li class="top"><a href="#">Cars Category</a></li> <li><a href="#" id="black-plus">Black Plus+ Membership</a></li> <li><a href="#" id="black">Black membership</a></li> <ul> <li><a href="#">Group A</a></li> <li><a href="#">Group B</a></li> <li><a href="#">Group C</a></li> </ul> <li><a href="#" id="corporate">Corporate Membership</a></li> <li><a href="#" id="platinum">Platinum Membership</a></li> <li class="bottom"><a href="javascript:history.back();">Back to previous</a></li> </ul> </body>
CSS Code
view plaincopy to clipboardprint? <!-- body {background-color:#000000} body#cars-black a#black, { background-color: #1c1c1c; } #vmenu { font: 11px"Lucida Grande", Geneva, Arial, Verdana, sans-serifsans-serif; list-style-type: none; width: 291px; margin: 25px0px20px0px; padding: 0px; background-color: #2a2a2a; } #vmenu li a { color: #949494; height: 22px; border:1pxsolid#000000; border-bottom: none; padding: 10px0px0px15px; display:block; text-decoration:none} #vmenu li a:hover { color: #ffffff; text-decoration: none; background-color: #1c1c1c; } #vmenu li.top a { background: #2a2a2aurl(btop.gif) no-repeattop; font-weight: bold; display:block; } #vmenu li.bottom a{ color: #666666; background: #2a2a2aurl(bbottom.gif) no-repeatbottom; display:block; } #vmenu ul {margin: 0px; padding: 0px; list-style-type: none; border: 1pxsolid#000000; border-bottom: none; background-image: url(/images/sample/vmenu_bg.gif); } #vmenu ul li a { height: 15px; color: #949494; padding: 5px0px5px15px; border: none; background-color: #333333; background-image: none; text-decoration:none} #vmenu ul li a:hover { color: #ffffff; text-decoration: underline; background-color: #333333; background-image: none; } --> </style> <!-- body {background-color:#000000} body#cars-black a#black, { background-color: #1c1c1c; } #vmenu { font: 11px "Lucida Grande", Geneva, Arial, Verdana, sans-serif; list-style-type: none; width: 291px; margin: 25px 0px 20px 0px; padding: 0px; background-color: #2a2a2a; } #vmenu li a { color: #949494; height: 22px; border:1px solid #000000; border-bottom: none; padding: 10px 0px 0px 15px; display:block; text-decoration:none} #vmenu li a:hover { color: #ffffff; text-decoration: none; background-color: #1c1c1c; } #vmenu li.top a { background: #2a2a2a url(btop.gif) no-repeat top; font-weight: bold; display:block; } #vmenu li.bottom a{ color: #666666; background: #2a2a2a url(bbottom.gif) no-repeat bottom; display:block; } #vmenu ul {margin: 0px; padding: 0px; list-style-type: none; border: 1px solid #000000; border-bottom: none; background-image: url(/images/sample/vmenu_bg.gif); } #vmenu ul li a { height: 15px; color: #949494; padding: 5px 0px 5px 15px; border: none; background-color: #333333; background-image: none; text-decoration:none} #vmenu ul li a:hover { color: #ffffff; text-decoration: underline; background-color: #333333; background-image: none; } --> </style> written by..http://www.webtrendawards.com/838
'웹스터디 > xhtmlcss' 카테고리의 다른 글
| 체크박스와 라디오버튼을 이미지로 사용하자 (0) | 2008.10.17 |
|---|---|
| Customized input elements (0) | 2008.10.17 |
| Shoutbox (0) | 2008.10.17 |
| XHTML/CSS를 이용한 이미지 데코레이션 (0) | 2008.10.17 |
| 심플한 블록 메뉴 Clean CSS Block Navigation (0) | 2008.10.17 |
| XHTML및 HTML 4.01부터 사용 불가능한 태그들 정리 (0) | 2008.07.29 |
| IE 6, 7 버전별로 CSS 다르게 적용시키기 (1) | 2008.07.29 |
| IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for IE6. (0) | 2008.07.29 |
| CSS 를 이용하여 ‘따라다니는 배너’ 만들기 (0) | 2008.07.29 |
| 시각장애인용 웹브라우저에서 글자를 판독할 때 사용되는 목소리 정하기 (0) | 2008.07.12 |
RECENT COMMENT