:

:




?


- 9$.
!!!
- 8 !!!

 

jQuery

: 19.01.2014
: 
: bulatlab.ru

 , !

 

, , , javascript- – jQuery. , , jQuery, – slideDown slideUp, ( – ).

 

html-, , . , – jQuery, . – . , h3 – . , , , active. .

 

<!DOCTYPE html>
<html>
<head>
<title>   jQuery  CSS3</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="jquery-1.js"></script>
	<script>
			$(document).ready(function(){
				$("#accordion h3").click(function(){
					$("#accordion ul ul").slideUp('fast');
					if(!$(this).next().is(":visible")){
						$(this).next().slideDown('fast');
					}
				})
			})
	</script>
</head>
<body>
	<section class="main">
		<div id="accordion">
			<ul>
				<li>
					<h3> 1</h3>
					<ul>
						<li><a href="#"> 1.1</a></li>
						<li><a href="#"> 1.2</a></li>
						<li><a href="#"> 1.3</a></li>
						<li><a href="#"> 1.4</a></li>
					</ul>
				</li>
				<!--       -->
				<li class="active">
					<h3> 2</h3>
					<ul>
						<li><a href="#"> 2.1</a></li>
						<li><a href="#"> 2.2</a></li>
						<li><a href="#"> 2.3</a></li>
						<li><a href="#"> 2.4</a></li>
						<li><a href="#"> 2.5</a></li>
					</ul>
				</li>
				<li>
					<h3> 3</h3>
					<ul>
						<li><a href="#"> 3.1</a></li>
						<li><a href="#"> 3.2</a></li>
						<li><a href="#"> 3.3</a></li>
						<li><a href="#"> 3.4</a></li>
						<li><a href="#"> 3.5</a></li>
						<li><a href="#"> 3.6</a></li>
						<li><a href="#"> 3.7</a></li>
						<li><a href="#"> 3.8</a></li>
					</ul>
				</li>
				<li>
					<h3> 4</h3>
					<ul>
						<li><a href="#"> 4.1</a></li>
						<li><a href="#"> 4.2</a></li>
						<li><a href="#"> 4.3</a></li>
						<li><a href="#"> 4.4</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</section>
</body>
</html>

 

, :

 

* {margin: 0; padding: 0;}
body {font-family: Nunito, arial, verdana;}
#accordion > ul >li >ul {	height:250px;}		
#accordion li {	list-style-type: none;}
#accordion ul ul {display: none;}
#accordion li.active ul {display: block;}

#accordion {
	background: #fff;
	width: 250px;
	margin: 100px auto 0 auto;
	border: 1px solid #ccc;
}

#accordion h3 {
	color: #567;
	font-size: 12px;
	line-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
}

#accordion h3:hover {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}

#accordion ul ul li a {
	color:#555;
	text-decoration: none;
	font-size: 11px;
	line-height: 27px;
	display: block;
	padding: 0 25px;
	transition: all 0.15s;
}

#accordion ul ul li a:hover {
	color:#55d;	
	background: #f6f6f6;
}

 

-.

 

  

 

 

, ! , JavaScript.

 

!

 

 
: 453
: 0
: (0)