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

Меню

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

6

Горизонтальное выпадающее меню на CSS3

Jemand 38333 ,
CSS3

1. CSS


#menu, #menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}
#menu {
	width: 800px;
	margin: 0 auto;
	border: 1px solid #222;
	background-color: #111;
	background-image: -moz-linear-gradient(#444, #111);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
	background-image: -webkit-linear-gradient(#444, #111);
	background-image: -o-linear-gradient(#444, #111);
	background-image: -ms-linear-gradient(#444, #111);
	background-image: linear-gradient(#444, #111);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	}
	#menu:before,
	#menu:after {
	content: "";
	display: table;
	}
#menu:after {
	clear: both;
	}
#menu {
	zoom:1;
	}
	#menu li {
	float: left;
	border-right: 1px solid #222;
	-moz-box-shadow: 1px 0 0 #444;
	-webkit-box-shadow: 1px 0 0 #444;
	box-shadow: 1px 0 0 #444;
	position: relative;
	}
	#menu a {
	float: left;
	padding: 12px 30px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
	}
#menu li:hover > a {
	color: #fafafa;
	}
*html #menu li a:hover { /* Только для IE6 */
	color: #fafafa;
	}
#menu ul {
	margin: 20px 0 0 0;
	_margin: 0; /*Только для IE6*/
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 38px;
	left: 0;
	z-index: 9999;
	background: #444;
	background: -moz-linear-gradient(#444, #111);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
	background: -webkit-linear-gradient(#444, #111);
	background: -o-linear-gradient(#444, #111);
	background: -ms-linear-gradient(#444, #111);
	background: linear-gradient(#444, #111);
	-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
	-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
	box-shadow: 0 -1px 0 rgba(255,255,255,.3);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	}
#menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
	}
#menu ul ul {
	top: 0;
	left: 150px;
	margin: 0 0 0 20px;
	_margin: 0; /*Только для IE6*/
	-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
	-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
	box-shadow: -1px 0 0 rgba(255,255,255,.3);
	}
#menu ul li {
	float: none;
	display: block;
	border: 0;
	_line-height: 0; /*Только для IE6*/
	-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	}
#menu ul li:last-child {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	}
#menu ul a {
	padding: 10px;
	width: 130px;
	_height: 10px; /*Только для IE6*/
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
	}
#menu ul a:hover {
	background-color: #0186ba;
	background-image: -moz-linear-gradient(#04acec,  #0186ba);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background-image: -webkit-linear-gradient(#04acec, #0186ba);
	background-image: -o-linear-gradient(#04acec, #0186ba);
	background-image: -ms-linear-gradient(#04acec, #0186ba);
	background-image: linear-gradient(#04acec, #0186ba);
	}
#menu ul li:first-child > a {
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
	}
#menu ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: 40px;
	top: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #444;
	}
#menu ul ul li:first-child a:after {
	left: -6px;
	top: 50%;
	margin-top: -6px;
	border-left: 0;
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-right: 6px solid #3b3b3b;
	}
#menu ul li:first-child a:hover:after {
	border-bottom-color: #04acec;
	}
#menu ul ul li:first-child a:hover:after {
	border-right-color: #0299d3;
	border-bottom-color: transparent;
	}
#menu ul li:last-child > a {
	-moz-border-radius: 0 0 3px 3px;
	-webkit-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
	}

2. HTML

<ul id="menu">
	<li><a href="#">Пункт №1</a></li>
	<li>
		<a href="#">Пункт №2</a>
		<ul>
			<li>
				<a href="#">Пункт №2.1</a>
				<ul>
					<li><a href="#">Пункт №2.1.1</a></li>
					<li><a href="#">Пункт №2.1.2</a></li>
					<li><a href="#">Пункт №2.1.3</a></li>
					<li>
						<a href="#">Пункт №2.1.4</a>
						<ul>
							<li>
								<a href="#">Пункт №2.1.4.1</a>
								<ul>
									<li><a href="#">Пункт №2.1.4.1.1</a></li>
									<li><a href="#">Пункт №2.1.4.1.2</a></li>
									<li><a href="#">Пункт №2.1.4.1.3</a></li>
									<li><a href="#">Пункт №2.1.4.1.4</a></li>
									<li><a href="#">Пункт №2.1.4.1.5</a></li>
									<li><a href="#">Пункт №2.1.4.1.6</a></li>
									<li>
										<a href="#">Пункт №2.1.4.1.7</a>
										<ul>
											<li><a href="#">Пункт №2.1.4.1.7.1</a></li>
											<li><a href="#">Пункт №2.1.4.1.7.2</a></li>
											<li><a href="#">Пункт №2.1.4.1.7.3</a></li>
											<li>
												<a href="#">Пункт №2.1.4.1.7.4</a>
												<ul>
													<li><a href="#">Пункт №2.1.4.1.7.4.1</a></li>
													<li><a href="#">Пункт №2.1.4.1.7.4.2</a></li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li><a href="#">Пункт №2.1.4.2</a></li>
							<li><a href="#">Пункт №2.1.4.3</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Пункт №2.2</a>
				<ul>
					<li><a href="#">Пункт №2.2.1</a></li>
					<li><a href="#">Пункт №2.2.2</a></li>
					<li><a href="#">Пункт №2.2.3</a></li>
					<li><a href="#">Пункт №2.2.4</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Пункт №2.3</a>
				<ul>
					<li><a href="#">Пункт №2.3.1</a></li>
					<li><a href="#">Пункт №2.3.2</a></li>
					<li><a href="#">Пункт №2.3.3</a></li>
					<li><a href="#">Пункт №2.3.4</a></li>
				</ul>
			</li>
			<li>
				<a href="">Пункт №2.4</a>
				<ul>
					<li><a href="#">Пункт №2.4.1</a></li>
					<li><a href="#">Пункт №2.4.2</a></li>
					<li><a href="#">Пункт №2.4.3</a></li>
					<li><a href="#">Пункт №2.4.4</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="">Пункт №3</a></li>
	<li><a href="">Пункт №4</a></li>
	<li><a href="">Пункт №5</a></li>
</ul>

p.s. Найдите пункт Пункт №2.1.4.1.7.4.2 :)

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

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

  1. Для IE9 придётся всё же использовать
    filter: progid:DXImageTransform.Microsoft.gradient…

    Ещё никак не могу понять, почему этот чудила дальше пункта 2.1 открывать ничего не хочет, в то время как остальные браузеры отображают всё нормально.
    Сам ошибку найти не смог. В html придраться негде. Может проблема в css?

    p.s

    _www.webmasters.by/articles/html-coding/557-css3-animated-dropdown-menu.html
    Тут, кстати, очень похожий пример. Всё работает вроде..

  2. Данная таблица стилей не проходит валидацию.

  3. ребят а можете подсказать как добавлять подпункты в этой менюшке

    как должен выглядеть код

    <a href="#" rel="nofollow">Пункт №1</a>

    я в пункт 1 добавляю, но у меня искажение таблицы идет, или это в стилях нужночтото коректироввать


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