Создаем анимированное меню с помощью CSS3

Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Я уже говорил, что меню отлично смотрится в структуре темного шаблона, в этом можете сами убедиться, просмотрев online-демонстрацию шаблона в работе.

LIVE DEMO

Чтобы создать подобное меню, нам необходимо создать достаточно простую разметку, которая будет использовать неупорядоченный список:

</pre>

<ul>

<li><a href="http://www.rudebox.org.ua/">Главная</a></li>

<li><a class="hsubs" href="#">Уроки..</a>

<li><a href="#">Уроки jQuery</a></li>

<li><a href="#">Уроки CSS</a></li>

<li><a href="#">Уроки Photoshop</a></li>

<li><a href="#">Уроки JavaScript</a></li>

</ul>

</li>

<li><a class="hsubs" href="#">Денвер</a></li>

<li><a href="#">Контакты</a></li>

<li><a href="#">Помощь сайту</a></li>

<li><a href="#">Карта сайта</a></li>

</ul>

</li>

<li><a href="#">Релизы</a></li>

<li><a href="#">Помощь</a></li>

</ul>

</div>

<pre>

Теперь рассмотрим стилизацию с помощью CSS3.

При задании стилей используются преимущества CSS3 для создания визуального эффекта перемещения маркера при наведении курсора мыши на пункт меню.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

#nav,#nav ul {

list-style: none outside none;

margin: 0;

padding: 0;

}

#nav {

background: url('menu_bg.png') no-repeat scroll 0 0 transparent;

clear: both;

font-size: 12px;

height: 58px;

padding: 0 0 0 9px;

position: relative;

width: 957px;

}

#nav ul {

background-color: #222;

border:1px solid #222;

border-radius: 0 5px 5px 5px;

border-width: 0 1px 1px;

box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);

left: -9999px;

overflow: hidden;

position: absolute;

top: -9999px;

z-index: 2;

-moz-transform: scaleY(0);

-ms-transform: scaleY(0);

-o-transform: scaleY(0);

-webkit-transform: scaleY(0);

transform: scaleY(0);

-moz-transform-origin: 0 0;

-ms-transform-origin: 0 0;

-o-transform-origin: 0 0;

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

-moz-transition: -moz-transform 0.1s linear;

-ms-transition: -ms-transform 0.1s linear;

-o-transition: -o-transform 0.1s linear;

-webkit-transition: -webkit-transform 0.1s linear;

transition: transform 0.1s linear;

}

#nav li {

background: url('menu_line.png') no-repeat scroll right 5px transparent;

float: left;

position: relative;

}

#nav li a {

color: #FFFFFF;

display: block;

float: left;

font-weight: normal;

height: 30px;

padding: 23px 20px 0;

position: relative;

text-decoration: none;

text-shadow: 1px 1px 1px #000000;

}

#nav li:hover > a {

color: #00B4FF;

}

#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {

background: none repeat scroll 0 0 #121212;

outline: 0 none;

}

#nav li:hover ul.subs {

left: 0;

top: 53px;

width: 180px;

-moz-transform: scaleY(1);

-ms-transform: scaleY(1);

-o-transform: scaleY(1);

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

#nav ul li {

background: none;

width: 100%;

}

#nav ul li a {

float: none;

}

#nav ul li:hover > a {

background-color: #121212;

color: #00B4FF;

}

#lavalamp {

background: url('lavalamp.png') no-repeat scroll 0 0 transparent;

height: 16px;

left: 19px;

position: absolute;

top: 0px;

width: 64px;

-moz-transition: all 300ms ease;

-ms-transition: all 300ms ease;

-o-transition: all 300ms ease;

-webkit-transition: all 300ms ease;

transition: all 300ms ease;

}

#lavalamp:hover {

-moz-transition-duration: 3000s;

-ms-transition-duration: 3000s;

-o-transition-duration: 3000s;

-webkit-transition-duration: 3000s;

transition-duration: 3000s;

}

#nav li:nth-child(1):hover ~ #lavalamp {

left: 19px;

}

#nav li:nth-child(2):hover ~ #lavalamp {

left: 103px;

}

#nav li:nth-child(3):hover ~ #lavalamp {

left: 185px;

}

#nav li:nth-child(4):hover ~ #lavalamp {

left: 267px;

}

#nav li:nth-child(5):hover ~ #lavalamp {

left: 348px;

}

#nav li:nth-child(6):hover ~ #lavalamp {

left: 429px;

}

#nav li:nth-child(7):hover ~ #lavalamp {

left: 510px;

}

#nav li:nth-child(8):hover ~ #lavalamp {

left: 616px;

}

Если Вам понравилась тема WordPress с онлайн просмотра, то можете ее скачать бесплатно:

СКАЧАТЬ ТЕМУ

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

CSS, Интересно, меню сайта, Разработка сайта, Шаблоны

Опубликовал Cooper 08.04.2012 в 18:23, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.