Фиксированное меню для сайта с помощью CSS3

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

СКАЧАТЬ ИСХОДНИКИ

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

Шаг 1. HTML

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

<div id="menu_div">
 <div id="navigation">
 <div id="menu">
 <ul id="nav">
 <li><a href="#">Главная</a>
 <ul>
<li><a href="#">Новости</a></li>
<li><a href="#">Интересно</a>
 <ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">CSS3</a>
 <ul>
<li><a href="#">Инофрмация</a></li>
<li><a href="#">Инструкция</a></li>
<li><a href="#">Шпаргалки</a>
 <ul>
<li><a href="#">На русском языке</a></li>
<li><a href="#">На английском языке</a></li>
<li><a href="#">На украинском языке</a></li>
 </ul>
 </li>
</ul>
</li>
</ul>
</li>
</ul>
 </li>
 <li><a href="#">Денвер</a>
 <ul>
<li><a href="#">Информация</a></li>
<li><a href="#">Как установить сайта</a></li>
<li><a href="#">Хаки</a>>
 </li>
 </ul>
 </li>

 <li><a href="#">Информация</a>
 <ul>
<li><a href="#">Полезное</a></li>
<li><a href="#">Соглашение</a></li>
 </ul>
 </li>
 <li><a href="#">Сервисы</a></li>
 </ul>

<li><a href="#">Главная</a>

<ul>

<li><a href="#">Новости</a></li>

<li><a href="#">Интересно</a>

<ul>

<li><a href="#">JavaScript</a></li>

<li><a href="#">jQuery</a></li>

<ul>

<li><a href="#">Инофрмация</a></li>

<li><a href="#">Инструкция</a></li>

<li><a href="#">Шпаргалки</a>

<ul>

<li><a href="#">На русском языке</a></li>

<li><a href="#">На английском языке</a></li>

<li><a href="#">На украинском языке</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

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

<ul>

<li><a href="#">Информация</a></li>

<li><a href="#">Как установить сайта</a></li>

</li>

</ul>

</li>

<li><a href="#">Информация</a>

<ul>

<li><a href="#">Полезное</a></li>

<li><a href="#">Соглашение</a></li>

</ul>

</li>

<li><a href="#">Сервисы</a></li>

</ul>

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

<form class="searchform" action="#">
 <input class="searchfield" type="text" value="Поиск..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
 </form>

</form>

Также не забываем подключить стили к документу, для этого следует разместить следующие строчки между тегами <head> и </head>.

<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

1 2	<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

С разметкой закончили, теперь приступим к следующему шагу.

Шаг 2. CSS

Стили достаточно просты, основные элементы подписаны, по этому более детально останавливаться на них не вижу смысла.

/*====================

Цветовая схема меню
===============================*/
body {
 background: #000000 url(header.jpg) no-repeat center top;
 color: #666;
 font: 14px/18px 'Lato', Arial, sans-serif;
 text-align: justify;
}
/* Цвет строки меню */
#navigation,
#nav li ul li,
#nav li ul li a{
background: #000;
}

/* Цвет пункта меню */
#nav li a,
#nav li a:hover,
#nav li ul li,
#nav li ul li a,
#nav li ul li a:hover {
color: #fff;
}

/* Цвет при наведении*/
#nav li a:hover,
#nav li ul li a:hover {
background: #9ACD32;
}

/* Тени*/
#nav li a,
#nav li a:hover,
#nav li ul li a:hover {
text-shadow: 0 1px 1px #333;
}

/* Цвета формы поиска */
.searchform input, .searchform input:not(:focus){
color:#B1B1B1; /*Цвет текста по умолчанию*/
background: #fff; /*Цвет фона по умолчанию*/
}
.searchfield:focus{
color: #000; /* Цвет текста при нажатии */
}

/*=====================================================================
Пункты отвечающие за фиксацию меню
====================*/

#menu_div{
clear: both;
position: relative;
top: 0;
left: 0;
}

#navigation {
position: fixed;
}

#navigation, #menu_div {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}

#menu_div, #navigation, #menu, #nav{
height: 45px; /* Высота меню */
}

#menu_div:hover,
#navigation:hover,
#nav li a:hover, #nav li ul a
{
opacity: 0.95;/* Прозрачность меню при наведении*/
}

#menu_div,
#navigation,
#nav li a,
#menu_div:not(:hover),
#navigation:not(:hover)
{
opacity: 0.8;/* Когда убираем курсор мыши */
}

#menu {
width: 960px;
margin:0 auto; /*Центр меню*/
padding:0;
position: relative;
}

#nav{
width: 960px;
margin:0;
padding:0;
position: relative;
font-family: 'Arial', Helvetica, sans-serif;
}

#nav li a,#nav li {
float:left;
}

#nav li {
list-style:none;
position:relative;
}

#nav li a {
line-height: 45px;
padding:0 15px;
text-decoration:none;
margin:0;
font-size:12px;
font-weight:700;
text-transform:uppercase;
}

/*====================
 Подменю
=====================*/
#nav li ul {
display:none;
position:absolute;
left:0;
top:100%;
padding:0;
margin:0;
} /* Спрятать меню*/

#nav li:hover > ul {
display:block;
} /* Показать подменю при наведении */

#nav li ul li,#nav li ul li a {
float:none;
height: 35px; /* Высота подменю*/
min-width: 150px; /* Минимальная ширина */
line-height: 35px;
border-right: 0;
text-shadow: none;
display:block;
font-size:13px;
font-weight:400;
text-transform:inherit;
}

#nav li ul li {
_display:inline; /* Для IE */
}

/* == 12. Под-под пункты == */
#nav li ul li ul {
display:none;
}

#nav li ul li:hover ul {
left:100%;
top:0;
}

/*====================
 Форма поиска
====================*/

.searchform {
position: absolute;
right: 15px;
top: 6px;
display: inline-block;
zoom: 1;
*display: inline;
border: 0;
padding: 0;
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
height: 27px;
line-height: 27px;
padding-left: 10px;
padding-right: 10px;
width: 150px;
border: 2px solid #333;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 1px 1px 2px #A1A1A1;
-webkit-box-shadow: inset 1px 1px 2px #A1A1A1;
box-shadow: inner 1px 1px 2px #A1A1A1;
}

.searchfield:focus{
font-weight: 700;
width: 220px;
}

.searchfield:not(:focus){
width: 150px;
}

/*========================
 Переходы
========================*/

#nav li a:hover,
#nav li ul li a:hover {
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-out;
}

.searchfield:focus,
.searchfield:not(:focus){
-webkit-transition-property:width;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-out;
}

#menu_div:hover,
#navigation:hover,
#nav li ul a,
#menu_div,
#navigation,
#nav li a,
#menu_div:not(:hover),
#navigation:not(:hover)
{
-webkit-transition-property:opacity;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-out;
}

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

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

/*====================

Цветовая схема меню

===============================*/

body {

background: #000000 url(header.jpg) no-repeat center top;

color: #666;

font: 14px/18px 'Lato', Arial, sans-serif;

text-align: justify;

}

/* Цвет строки меню */

#navigation,

#nav li ul li,

#nav li ul li a{

background: #000;

}

/* Цвет пункта меню */

#nav li a,

#nav li a:hover,

#nav li ul li,

#nav li ul li a,

#nav li ul li a:hover {

color: #fff;

}

/* Цвет при наведении*/

#nav li a:hover,

#nav li ul li a:hover {

background: #9ACD32;

}

/* Тени*/

#nav li a,

#nav li a:hover,

#nav li ul li a:hover {

text-shadow: 0 1px 1px #333;

}

/* Цвета формы поиска */

.searchform input, .searchform input:not(:focus){

color:#B1B1B1; /*Цвет текста по умолчанию*/

background: #fff; /*Цвет фона по умолчанию*/

}

.searchfield:focus{

color: #000; /* Цвет текста при нажатии */

}

/*=====================================================================

Пункты отвечающие за фиксацию меню

====================*/

#menu_div{

clear: both;

position: relative;

top: 0;

left: 0;

}

#navigation {

position: fixed;

}

#navigation, #menu_div {

width: 100%;

margin: 0 !important;

padding: 0 !important;

}

#menu_div, #navigation, #menu, #nav{

height: 45px; /* Высота меню */

}

#menu_div:hover,

#navigation:hover,

#nav li a:hover, #nav li ul a

{

opacity: 0.95;/* Прозрачность меню при наведении*/

}

#menu_div,

#navigation,

#nav li a,

#menu_div:not(:hover),

#navigation:not(:hover)

{

opacity: 0.8;/* Когда убираем курсор мыши */

}

#menu {

width: 960px;

margin:0 auto; /*Центр меню*/

padding:0;

position: relative;

}

#nav{

width: 960px;

margin:0;

padding:0;

position: relative;

font-family: 'Arial', Helvetica, sans-serif;

}

#nav li a,#nav li {

float:left;

}

#nav li {

list-style:none;

position:relative;

}

#nav li a {

line-height: 45px;

padding:0 15px;

text-decoration:none;

margin:0;

font-size:12px;

font-weight:700;

text-transform:uppercase;

}

/*====================

Подменю

=====================*/

#nav li ul {

display:none;

position:absolute;

left:0;

top:100%;

padding:0;

margin:0;

} /* Спрятать меню*/

#nav li:hover > ul {

display:block;

} /* Показать подменю при наведении */

#nav li ul li,#nav li ul li a {

float:none;

height: 35px; /* Высота подменю*/

min-width: 150px; /* Минимальная ширина */

line-height: 35px;

border-right: 0;

text-shadow: none;

display:block;

font-size:13px;

font-weight:400;

text-transform:inherit;

}

#nav li ul li {

_display:inline; /* Для IE */

}

/* == 12. Под-под пункты == */

#nav li ul li ul {

display:none;

}

#nav li ul li:hover ul {

left:100%;

top:0;

}

/*====================

Форма поиска

====================*/

.searchform {

position: absolute;

right: 15px;

top: 6px;

display: inline-block;

zoom: 1;

*display: inline;

border: 0;

padding: 0;

}

.searchform input {

font: normal 12px/100% Arial, Helvetica, sans-serif;

}

.searchform .searchfield {

height: 27px;

line-height: 27px;

padding-left: 10px;

padding-right: 10px;

width: 150px;

border: 2px solid #333;

outline: none;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-moz-box-shadow: inset 1px 1px 2px #A1A1A1;

-webkit-box-shadow: inset 1px 1px 2px #A1A1A1;

box-shadow: inner 1px 1px 2px #A1A1A1;

}

.searchfield:focus{

font-weight: 700;

width: 220px;

}

.searchfield:not(:focus){

width: 150px;

}

/*========================

Переходы

========================*/

#nav li a:hover,

#nav li ul li a:hover {

-webkit-transition-property:color, background;

-webkit-transition-duration: 0.5s, 0.5s;

-webkit-transition-timing-function: linear, ease-out;

}

.searchfield:focus,

.searchfield:not(:focus){

-webkit-transition-property:width;

-webkit-transition-duration: 0.5s, 0.5s;

-webkit-transition-timing-function: linear, ease-out;

}

#menu_div:hover,

#navigation:hover,

#nav li ul a,

#menu_div,

#navigation,

#nav li a,

#menu_div:not(:hover),

#navigation:not(:hover)

{

-webkit-transition-property:opacity;

-webkit-transition-duration: 0.5s, 0.5s;

-webkit-transition-timing-function: linear, ease-out;

}

Фиксированное меню для сайта с помощью CSS

Шаг 1. HTML

Шаг 2. CSS

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Фиксированное меню для сайта с помощью CSS

Шаг 1. HTML

Шаг 2. CSS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи