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

Меню

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

11

Красивое вертикальное CSS3 меню

Jemand 23902
CSS3

1. CSS

* {
	margin:0;
	padding:0;
	}
#navigationMenu li {
	list-style:none;
	height:39px;
	padding:2px;
	width:40px;
	}
#navigationMenu span {
	width: 0;
	left: 38px;
	padding: 0;
	position: absolute;
	overflow: hidden;
	font-family: 'Myriad Pro',Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.6px;
	white-space: nowrap;
	line-height: 39px;
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	transition: 0.25s;
	}
#navigationMenu a {
	background: url('navigation.jpg') no-repeat;
	height: 39px;
	width: 38px;
	display: block;
	position: relative;
	text-decoration: none;
	}
#navigationMenu a:hover span {
	width :auto;
	padding: 0 20px;
	overflow: visible;.
	text-decoration: none;
	}
#navigationMenu a:hover {
	text-decoration: none;
	-moz-box-shadow: 0 0 5px #9ddff5;
	-webkit-box-shadow: 0 0 5px #9ddff5;
	box-shadow: 0 0 5px #9ddff5;
	}

/* Зелёная кнопка */

#navigationMenu .home {
	background-position: 0 0;
	}
#navigationMenu .home:hover {
	background-position: 0 -39px;
	}
#navigationMenu .home span {
	background-color: #7da315;
	color: #3d4f0c;
	text-shadow: 1px 1px 0 #99bf31;
	}

/* Голубая кнопка */

#navigationMenu .about {
	background-position: -38px 0;
	}
#navigationMenu .about:hover {
	background-position: -38px -39px;
	}
#navigationMenu .about span {
	background-color: #1e8bb4;
	color: #223a44;
	text-shadow: 1px 1px 0 #44a8d0;
	}

/* Оранжевая кнопка */

#navigationMenu .services {
	background-position: -76px 0;
	}
#navigationMenu .services:hover {
	background-position: -76px -39px;
	}
#navigationMenu .services span {
	background-color: #c86c1f;
	color: #5a3517;
	text-shadow: 1px 1px 0 #d28344;
	}

/* Желтая кнопка */

#navigationMenu .portfolio {
	background-position: -114px 0;
	}
#navigationMenu .portfolio:hover {
	background-position: -114px -39px;
	}
#navigationMenu .portfolio span {
	background-color: #d0a525;
	color: #604e18;
	text-shadow: 1px 1px 0 #d8b54b;
	}

/* Пурпурная кнопка */

#navigationMenu .contact {
	background-position: -152px 0;
	}
#navigationMenu .contact:hover {
	background-position: -152px -39px;
	}
#navigationMenu .contact span {
	background-color: #af1e83;
	color: #460f35;
	text-shadow: 1px 1px 0 #d244a6;
	}

2 HTML

<ul id="navigationMenu">
	<li>
		<a class="home" href="#">
			<span>Главная</span>
		</a>
	</li>
	<li>
		<a class="about" href="#">
			<span>О Нас</span>
		</a>
	</li>
	<li>
		<a class="services" href="#">
			<span>Сервисы</span>
		</a>
	</li>
	<li>
		<a class="portfolio" href="#">
			<span>Портфолио</span>
		</a>
	</li>
	<li>
		<a class="contact" href="#">
			<span>Контакты</span>
		</a>
	</li>
</ul>

3. Изображение
Красивое вертикальное меню

Демо

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

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

  1. Туториалзайн :D

  2. Класс!

  3. В IE6 панельки не выдвигаются, а просто появляются.

  4. внес хтмл код перед почему то блок меню и контента опустился вниз,как раз на длину этого меню,и самого меню не видно но при наведении выскакивает…как исправить?

  5. Jemand, меню супер! Правда. Только на WordPress графического оформления нету. Ссылки работают, надписи – О нас Главная тоже отображается как текст. Но то как у вас показано, не отображается.

  6. Все заработало. Ошибся в файле.. Круто!! Спасибо большое!

  7. Класс менюшка мне очень нравится большое спасибо, тока совесть мучает стока с Вашего сайта взял надо хоть ссылку кук то сделать тока ума не приложу как это сделать красиво и не навязчиво


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