Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
*Наведите курсор мыши для приостановки прокрутки.
Подсветка текущего пункта навигационного меню
Размер: 47,2 Мб. Длительность: 14 мин. 16 сек. |
Вы наверняка встречались с тем, что текущий пункт навигационного меню, в котором Вы находитесь, каким-то образом выделен и отличается от остальных пунктов.
Это очень удобно, т.к. позволяет пользователю быстрее сориентироваться, где он находится.
В этом видеоуроке мы разберем, как можно реализовать такую возможность.
Основная идея при создании подобного "живого" меню заключается в следующем:
У нас есть несколько страниц (разделов и т.п.), находящихся в меню.
Как правило, сайт "собирается" из отдельных кусочков кода - эдаких "блоков", каждый из которых содержит какую-то логически завершенную часть сайта: хэдер, футер, боковую панель и т.п.
В нашем случае один из таких блоков - это блок с навигационным меню, который подключается к каждой из страниц сайта (т.к. навигация едина на весь сайт).
Именно это и позволяет нам поступить следующим образом:
При подключении блока с навигацией, на каждой отдельной странице мы задаем специальную переменную.
Данная переменная передается в навигационное меню и, в зависимости от того, какое значение было передано, выполняется выделение различных пунктов меню для разных страниц.
Само оформление, разумеется, задается в файле стилей.
Как все это работает в деталях Вы узнаете, просмотрев данное видео.
Для ознакомления с содержанием урока Вы можете просмотреть видео ниже. Скачать видеоурок в высоком качестве можно по ссылке выше.
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая программирование на PHP, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить этот мощный язык веб-разработки:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также: