Все для веб-дизайнера
Фиксированное меню для сайта с помощью CSS
Красивая навигация на сайте это всегда плюс его владельцу, ведь взор посетителя притягивается к необходимой информации, тем самым пользователь получает ту информацию, которая по умолчанию скрыта. Зачастую меню остаются вверху сайта, пользователю приходиться возвращаться вверх, чтобы выбрать необходимый пункт, это не весьма удобно, и требует множество лишний движений по сайту. Но что если сделать навигацию постоянно прилипшей к шапке сайта, которая следует за прокруткой и всегда на веду.
В исходниках имеется различные варианты цветовой гаммы меню, что сокращает редактирования кода к минимуму, ведь вы можете просто выбрать необходимый оттенок для своего сайта.
Шаг 1. HTML
Для начала мы рассмотрим простую разметку и иерархию построения меню, ведь мы будем использовать выскальзывающие подпункты и еще некоторые интересные приемы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<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> |
Мы рассмотрели построение иерархии меню, теперь прикрутим к меню поиск, поиск будет не обычный, а анимированный, который реагирует при активации поля.
|
1 2 3 |
<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> |
Также не забываем подключить стили к документу, для этого следует разместить следующие строчки между тегами <head> и </head>.
|
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
Стили достаточно просты, основные элементы подписаны, по этому более детально останавливаться на них не вижу смысла.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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; } |
Вот и все. Готово!
| Опубликовал Cooper 14.10.2012 в 21:16, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
