7장보면서 생각나서~ 2

3 views

Skip to first unread message

베시시

unread,

Aug 8, 2011, 5:14:48 AM8/8/11

to IBKSYSTEM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS Vertical Navigation Bar</title>

<style type="text/css">
/* UI Object */
.menu_v{position:relative;width:200px;font-size:12px;font-
family:Tahoma, Geneva, sans-serif;line-height:normal}
.menu_v ul{margin:0;padding:0;list-style:none}
.menu_v li{position:relative;margin:0 0 -1px 0;vertical-
align:top;*zoom:1}
.menu_v li a{display:block;position:relative;padding:8px
10px;color:#666;font-weight:bold;text-
decoration:none;background:#fafafa;border:1px solid #eee;*zoom:1}
.menu_v li a .i{position:absolute;top:50%;left:100%;width:8px;height:
8px;margin:-4px 0 0 -16px;color:#ccc;background:url(img/ico_sub.gif)
no-repeat left top}
.menu_v li ul{padding:5px 0;background:#fff}
.menu_v li li{margin:0}
.menu_v li li a{padding:5px 10px;border:0;background:#fff;font-
weight:normal}
.menu_v li li a span{color:#666}
.menu_v li.active{z-index:2;border:1px solid #ccc}
.menu_v li li.active{border:0}
.menu_v li.active a{border:0;color:#000}
.menu_v li.active .i{background-position:0 -44px}
.menu_v li.active li a{border:0}
.menu_v li.active ul{display:block;border-top:1px solid #eee}
.menu_v li.active li.active a span{font-
weight:bold;color:#13b200;letter-spacing:-1px}
/* //UI Object */
</style>
</head>
<body>
<div id="code_origin" class="code_tmpl">

<div id="menu_v" class="menu_v">
<ul>
<li><a href="#"><span>AAAAA</span></a>
<ul>
<li class="active"><a href="#"><span>aaaaa</span></a></li>
<li><a href="#"><span>bbbbb</span></a></li>
</ul>
</li>
<li><a href="#"><span>BBBBB</span></a>
<ul>
<li><a href="#"><span>ccccc</span></a></li>
<li><a href="#"><span>ddddd</span></a></li>
</ul>
</li>
<li><a href="#"><span>CCCCC</span></a></li>
<li><a href="#"><span>DDDDD</span></a>
<ul>
<li><a href="#"><span>eeeee</span></a></li>
<li><a href="#"><span>fffff</span></a></li>
<li><a href="#"><span>ggggg</span></a></li>
</ul>
</li>
</ul>
</div>

</div>

<div id="code_origin2">

<script type="text/javascript" src="C:\Documents and Settings\MyHome
\My Documents\nuf_100913\jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($){

// Side Menu
var menu_v = $('div.menu_v');
var sItem = menu_v.find('>ul>li');
var ssItem = menu_v.find('>ul>li>ul>li');
var lastEvent = null;

sItem.find('>ul').css('display','none');

menu_v.find('>ul>li>ul>li[class=active]').parents('li').attr('class','active');

menu_v.find('>ul>li[class=active]').find('>ul').css('display','block');

function menu_vToggle(event){
var t = $(this);

if (this == lastEvent) return false;
lastEvent = this;
setTimeout(function(){ lastEvent=null }, 200);

if (t.next('ul').is(':hidden')) {
sItem.find('>ul').slideUp(100);
t.next('ul').slideDown(100);
} else if(!t.next('ul').length) {
sItem.find('>ul').slideUp(100);
} else {
t.next('ul').slideUp(100);
}

if (t.parent('li').hasClass('active')){
t.parent('li').removeClass('active');
} else {
sItem.removeClass('active');
t.parent('li').addClass('active');
}
}
sItem.find('>a').click(menu_vToggle).focus(menu_vToggle);

function subMenuActive(){
ssItem.removeClass('active');
$(this).parent(ssItem).addClass('active');
};
ssItem.find('>a').click(subMenuActive).focus(subMenuActive);

//icon
menu_v.find('>ul>li>ul').prev('a').append('<span class="i"></span>');
});
</script>
</div>
</body>
</html>

파일 다운받고 ..
그중에 7장이랑 유사한거 찾아 봣다 ㅎㅎ
http://code.jquery.com/jquery-latest.js
다운받아서 적당한 경로에 넣고.. ㄱㄱ
slideUp 시간조절을 잘하면~ 컴터짐

Reply all

Reply to author

Forward

0 new messages