수다닷컴

!DOCTYPE HTML
html
head
meta charset=utf-8
title아코디언/title
style tyle=text/css
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, font, img, ins, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
form, label,
table, caption, tbody, tfoot, thead, tr, th, td, br {margin: 0; padding: 0; border:0; list-style:none; text-decoration:none; }
body {font-family:tahoma, 돋움, sans-serif; font-size:12px; color:#555; }
#accordimenu { width:250px; }
#accordimenu li h2 { background-color:#4f5356; border-bottom:1px solid #f2f2f2; }
#accordimenu li h2:last-child { border:none; }
#accordimenu li h2 a { display:block; color:#fff; font-size:12px; line-height:32px; padding:4px 10px; }
#accordimenu li h2 a:hover { font-size:13px; }
#accordimenu li ul { height:0; overflow:hidden;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
#accordimenu li ul li { background-color:#f2f2f2; border-bottom:1px solid #ccc; width:100%; }
#accordimenu li ul li:last-child { border:none; }
#accordimenu li ul li a { display:block; color:#666; font-size:11px; line-height:24px; padding-left:10px; }
#accordimenu li ul#open01:target
{height:100px;}
#accordimenu li ul#open02:target
{height:50px;}
#accordimenu li ul#open03:target
{height:75px;}
#accordimenu li ul#open04:target
{height:25px;}
#accordimenu li ul#open05:target
{height:100px;}
/style
/head
body
div
ul id=accordimenu
lih2a href=#open01MENU_01/a/h2
ul id=open01
lia href=#submenu_01/a
lia href=#submenu_02/a
lia href=#submenu_03/a
lia href=#submenu_04/a
/ul
/li
lih2a href=#open02MENU_02/a/h2
ul id=open02
lia href=#submenu_01/a
lia href=#submenu_02/a
/ul
/li
lih2a href=#open03MENU_03/a/h2
ul id=open03
lia href=#submenu_01/a
lia href=#submenu_02/a
lia href=#submenu_03/a
/ul
/li
lih2a href=#open04MENU_04/a/h2
ul id=open04
lia href=#submenu_01/a
/ul
/li
lih2a href=#open05MENU_05/a/h2
ul id=open05
lia href=#submenu_01/a
lia href=#submenu_02/a
lia href=#submenu_03/a
lia href=#submenu_04/a
/ul
/li
/ul
/div
/body
/html
이번에 css3 새로나온속성들 공부하다가 :target라는걸 알게되어서 해본건데요.
위 처럼 a href에 아이디 값으로타겟을 써서 하단에 선언한 아이디에 target에서 선언한 css가 먹히는데요.
이게 화면 중간에 위치할경우 앵커태그 링크 먹는것처럼 화면이 이동합니다.
jquery없이 css3로 이런것도 할수있구나!! 하고 만들었더니 ㅡㅡ; 화면이 이동이되어서 사용할수가 없네요.

혹시 앵커위치(앵커아닌데 ㅠㅠ)로 이동하는걸 막는방법 또는 :taget를 이용해 다르게 만드는법 아시는분 계시면 좀 알려주세요~~

신청하기