Фиксированное меню при прокрутке страницы
 | |
| Здесь создаем фиксированное меню на сайте или еще называют плавающее. При установке оно останется на своем месте при прокрутке. Многие замечали на современных интернет ресурсах такую фиксацию, где вы опускаете блоки или проматываете, то верхнее навигация остается на своем положение, что можно оперативно перейти на другую категорию не поднимая, чтоб появилось. Здесь будет простой код и с него поймете как все происходит. Возможность его подкрепить и уже далее сам веб мастер может прописать больше стилей и украсить или добавить элементов эффекта. Давайте рассмотрим как все можно реализовать. Все будет выставляться с обычного CSS, возьмем за основу рабочий. Код <div class="menuskived defaultskived"><ul> <li><a href="http://zornet.ru/news/">ZORNET.RU</a></li> <li><a href="http://zornet.ru/load/81">Скрипты</a></li> <li><a href="http://zornet.ru/load/142">Шаблоны</a></li> <li><a href="http://zornet.ru/load/145">Дизайн для сайта</a></li> </ul> </div> Вся суть его закрепление зависит от этого. Код .menuskived {position:fixed;top:0px;left:0px; width:100%;padding:5px 0;} Настройка: position:fixed; - отвечает за функциональность прокручивание сверху. top:0px; - Задаем или указываем, где запросы будет по умолчанию самого вверх. left:0px; - Выполняем сдвиг по левую сторону. Полный CSS: Код .menuskived {position:fixed;top:0px;left:0px;width:100%;padding:7px 0;text-transform: uppercase;text-align: left;line-height: 61px;background: #3c6d9e;} .menuskived ul {padding:0; margin:0;} .menuskived li{display: inline;} .menuskived li a {padding: 5px 20px; color: #f1f1f1;text-decoration: none;} Визуально смотрется:  Вот уже полноценная функция, которая закреплена, что можно подключить шрифтовые иконки или вставить мини профиль, здесь проработок много. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |