AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Меню-аккордеон на чистом CSS3 без javascript

Раздел 1

Это текст раздела 1

Это текст раздела 1

Это текст раздела 1

Это текст раздела 1

Это текст раздела 1

Это текст раздела 1

Раздел 2

Это текст раздела 2

Это текст раздела 2

Это текст раздела 2

Это текст раздела 2

Раздел 3

Это текст раздела 3

Это текст раздела 3

Это текст раздела 3

Это текст раздела 3

Это текст раздела 3

Это текст раздела 3

Это текст раздела 3

Раздел 4

Это текст раздела 4

Это текст раздела 4

Это текст раздела 4

Это текст раздела 4

Это текст раздела 4

Это текст раздела 4

Раздел 5

Это текст раздела 5

Это текст раздела 5

Это текст раздела 5

Это текст раздела 5

Это текст раздела 5

Исходный код этого примера:

<!-- поддержка html5 в старом IE -->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css"><!--
section
{
	display: block;
}
.accordion{
	background-color: #E8EDE3;
	border: 2px solid #539127;
	width: 600px;
	padding: 10px;
	margin: 0 auto;
}
.accordion section{
	border: 1px solid #539127;
	margin: 5px;
	background-color: #fff;
}
.accordion h1, .accordion p{
	margin: 0;
}
.accordion p{
	padding: 5px;
}
.accordion h1 a{
	display: block;
	position: relative;
	font: 14px;
	padding: 8px;
	color: #333;
	text-decoration: none;
}
.accordion h1 a:hover {
	background: #EEEEFF;
}
.accordion h1 + div {
	height: 0;
	overflow: hidden;
	-moz-transition: height 0.3s ease-in-out;
	-webkit-transition: height 0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out;
	transition: height 0.3s ease-in-out;
}
.accordion :target h1 a:after {
    content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -3px;
	border-top: 5px solid #333;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}
.accordion :target h1 + div {
	height: 200px;
}
-->
</style>

<h1>Меню-аккордеон на чистом CSS3 без javascript</h1>

<div class="main">
		<div class="accordion">
			<section id="one">
				<h1><a href="#one">Раздел 1</a></h1>
				<div>
					<p>Это текст раздела 1</p>
					<p>Это текст раздела 1</p>
					<p>Это текст раздела 1</p>
					<p>Это текст раздела 1</p>
					<p>Это текст раздела 1</p>
					<p>Это текст раздела 1</p>
				</div>
			</section>


			<section id="two">
				<h1><a href="#two">Раздел 2</a></h1>
				<div>
					<p>Это текст раздела 2</p>
					<p>Это текст раздела 2</p>
					<p>Это текст раздела 2</p>
					<p>Это текст раздела 2</p>
				</div>
			</section>

			<section id="three">
				<h1><a href="#three">Раздел 3</a></h1>
				<div>
					<p>Это текст раздела 3</p>
					<p>Это текст раздела 3</p>
					<p>Это текст раздела 3</p>
					<p>Это текст раздела 3</p>
					<p>Это текст раздела 3</p>
					<p>Это текст раздела 3</p>
					<p>Это текст раздела 3</p>
				</div>
			</section>

			<section id="four">
				<h1><a href="#four">Раздел 4</a></h1>
				<div>
					<p>Это текст раздела 4</p>
					<p>Это текст раздела 4</p>
					<p>Это текст раздела 4</p>
					<p>Это текст раздела 4</p>
					<p>Это текст раздела 4</p>
					<p>Это текст раздела 4</p>
				</div>
			</section>

			<section id="five">
				<h1><a href="#five">Раздел 5</a></h1>
				<div>
					<p>Это текст раздела 5</p>
					<p>Это текст раздела 5</p>
					<p>Это текст раздела 5</p>
					<p>Это текст раздела 5</p>
					<p>Это текст раздела 5</p>
				</div>
			</section>
		</div>
</div>


автор идеи http://www.red-team-design.com/css3-accordion

Посмотрите другой вариант меню аккордион.


.

© Copyright 2008-2016 by KDG