메뉴 보이기
Profile
이온디

2012.12.13

Script

세로 슬라이드 메뉴

조회 수 7559 추천 수 0
소스 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"/>
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<style text="text/css">
li a {display:inline-block;}
li a {display:block;}
body {
font-family: cursive;
font-size: 0.66em;
}
p {line-height: 1.5em;}
ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 14.4em;
}
ul#menu a {
display: block;
text-decoration: none;
}
ul#menu li {
margin-top: 1px;
}
ul#menu li a {
background: blue;
color: #fff;
padding: 0.5em;
}
ul#menu li a:hover {
background: green;
}
ul#menu li ul li a {
background: red;
color: #000;
padding-left: 20px;
}
ul#menu li ul li a:hover {
background: yellow;
border-left: 5px #ffffff solid;
padding-left: 15px;
}
</style>
<script>
$(document).ready(function(){
$('#menu ul').hide();
$('#menu li a').click(function(){
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp(300);
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {$('#menu ul:visible').slideUp(300);
checkElement.slideDown(300);
return false;
}
});
});
</script>
</head>
<body leftmargin="0" topmargin="0" bgcolor=#5E5E5E>
<div style="width:160px;" id="div1">
<tr>
<td height="800" valign="top">
<ul id="menu" width="160px">
<li>
<a href="#">Menu1</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
</ul>
</li>
<li>
<a href="#">Menu2</a>
<ul>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</div>
</body>
</html> 

클릭하면 메뉴가 보입니다.

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
119 [Script] 세로 슬라이드 메뉴, 마우스 오버 1 2012.12.13 5991
[Script] 세로 슬라이드 메뉴 2012.12.13 7559
117 [미분류] 특정도메인으로 접속시 원하는도메인으로 리다이렉트 시키기 2010.01.31 19739
116 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 동철) 2009.02.23 9872
115 Show-Hide Layers(2) (by 태그매니아) 2009.02.10 8744
114 [Script] 레이어컨트롤 마우스오버 드롭다운 메뉴 2 2009.02.10 12546
113 Show-Hide Layers 클릭한 걸 기억하는 (by 알릭) 1 1 2009.02.03 6867
112 [HTML5] <hr> 2009.02.02 8785
111 [UI] 글읽기 화면의 인터페이스 2009.02.01 7529
110 반응 좋은 메뉴 스크립트 2 2009.01.31 9152
109 [UI] 네이버 홈 개편 1 2009.01.31 7539
108 [Script] 마우스오버 드롭다운 메뉴 (알릭님 수정본) 2009.01.30 9610
107 [HTML5] dl, dt, dd 용례 2009.01.29 9762
106 [Script] XE Layout Menu Script 1 2009.01.25 5964
105 자바스크립트 TAB 메뉴 2009.01.20 10248
104 [Script] 부드럽게 슬라이딩 되면서 펼쳐지는 메뉴 (세로, 사이드메뉴) 10 2009.01.20 14196
103 [Script] 옆에서 펼쳐지는 레이어 2009.01.20 6155
102 팝업형식의 메뉴 네비게이션 2009.01.20 4649
101 Side 메뉴 2009.01.20 4287