첨부파일을 열면 html코드와 제이쿼리 라이브러리, 아이콘이 있습니다. 두가지 메뉴가 있는데 하나는 클릭해야 슬라이드 되고 하나는 마우스 오버하면 슬라이드 됩니다.
<title>Accordion Menu Using jQuery</title>
<title>Accordion Menu Using jQuery</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//메뉴를 클릭하면 menu_body클래스 요소가 슬라이드 됩니다.
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
//메뉴에 마우스 오버시 menu_body클래스요소가 슬라이드 됩니다.
$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
});
</script>
<style type="text/css">//CSS부분
body {
margin: 10px auto;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {
width: 150px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#006699;
background-color:#EFEFEF;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #000000;
text-decoration:underline;
}
</style>
</head>
<body>
<div style="float:left" > <!--첫번째 메뉴입니다.-->
<p><strong> Works on clicking </strong></p>
<div id="firstpane" class="menu_list"> <!--메뉴의 시작-->
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
<p class="menu_head">Header-3</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
</div> <!--첫번째 메뉴 끝-->
</div>
<div style="float:left; margin-left:20px;"> <!--두번째 메뉴로 우측에 있는 것입니다.-->
<p><strong>Works with mouse over </strong></p>
<div class="menu_list" id="secondpane"> <!--메뉴의 시작-->
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
<p class="menu_head">Header-3</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
</div> <!--두번째 메뉴 끝-->
</div>
accordion-menu.zip
더보기
'부트스트랩.CSS.JS/JQuery' 카테고리 관련글
