CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 275   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

8

Вертикальный аккордеон на CSS3

Jemand 10388
CSS3

1. CSS

.vacc {
	margin: 0 auto;
	width: 206px;
	height: auto;
	background: rgba(0, 0, 0, 0.8);
	border: 3px solid #09F;
	}
.vacc>ul {
	margin: 3px;
	padding: 0;
	list-style: none;
	width: 200px;
	}
.vacc>ul>li {
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
	height: 40px;
	width: 200px;
	background-color: #f0f0f0;
	transition: height 0.5s ease-in-out;
	-moz-transition: height 0.5s ease-in-out;
	-webkit-transition: height 0.5s ease-in-out;
	-o-transition: height 0.5s ease-in-out;
	}
.vacc>ul>li>h3 {
	display: block;
	margin: 0;
	padding: 7px 10px 13px 10px;
	height: 19px;
	font-family: Georgia, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #666;
	font-weight: normal;
	}
.vacc>ul>li>div {
	margin: 0;
	overflow: auto;
	padding: 10px;
	height: 210px;
	}
.vacc>ul>li>div>a {
	display: block;
	text-decoration: none;
	text-align: center;
	margin: 1px;
	padding: 3px;
	color: #000;
	background: #c8c8c8;
	}
.vacc>ul>li>div>a:hover {
	color: #FFF;
	text-shadow: 0px -1px 0px #00518a;
	background: #007fda;
	}
.vacc>ul>li:hover {
	height: 200px;
	}
.vacc>ul>li>h3:hover {
	cursor: pointer;
	}

2. HTML

<div class="vacc">
	<ul>
		<li>
			<h3>» Категория №1</h3>
			<div>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
			</div>
		</li>
		<li>
			<h3>» Категория №2</h3>
			<div>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
			</div>
		</li>
		<li>
			<h3>» Категория №3</h3>
			<div>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
			</div>
		</li>
	</ul>
</div>

Демо

Рекламная пауза

» 8 комментариев

  1. Добрый день!

    Подскажите, как исправить css, чтобы ссылки первой категории по умолчанию при загрузке страницы были открыты!?

  2. Попробуйте присвоить ей специальный класс, стили которого соответствуют стилевому оформлению категории при :hover

  3. Даже не знал, что в CSS 3 есть такие эффекты. А в недобраузерах без анимации, но работает. Так что можно использовать!

  4. А можно ли сделать так чтобы при наведении курсора мыши на ссылку она автоматически раскрывалась а потом закрывалась после того как курсор убирается?

  5. День добрый!
    А как сделать по клику?


Оставить комментарий