Меню на сайт с помощью Bootstrap
@honey_and_moneyДавайте сразу приступим к реализации, без лишних разговоров и траты времени.
Я подготовил такой html-код:
В <head> я подключил CSS-стили нашего фреймворка и собственный CSS-файл.
Далее в самой структуре страницы я задал резиновый контейнер "container-fluid" и в нем создал строку "row"
Внутри этой строки и будет располагаться наше будущее меню.
Создание меню я начал с добавления div-блока c классами navbar и navbar-default
Они означают вот что: первый класс говорит о том, что этот блок будет предназначаться именно для меню и не для чего больше. Второй класс задает тип данного меню. (Бывают и другие, но сейчас пока рассматриваем по умолчанию - navbar-default)
Можете сохранить ваш html-код и обновить страницу:
Видим, что в верхней части страницы появилась полоска, которая намекает на предстоящее появление чего-то грандиозного.
Теперь перейдем к добавлению в меню наших пунктов. На реальном сайте это будут ссылки для перехода к другим разделам.
(Обращаю внимание, что наш CSS-файл пустой, я в него ничего не добавлял)
Вот так я дополнил наш код:
Внутри нашего блока для меню (с классом "navbar navbar-default") я создал еще один контейнер, чтобы все будущие пункты меню воспринимались как единое целое и никуда не разъезжались при уменьшении размеров экрана.
Я использовал именно container, а не container-fluid, так как хочу чтобы пункты меню не прилипали к границам окна браузера (слева или справа)
Далее мы можем разделить наш контейнер на два блока (что я и сделал) с классами:
navbar-header - отвечает за заголовок перед самим меню
collapse navbar-collapse - содержит именно пункты меню
Не обязательно добавлять блок для названия компании, но блок для пунктов меню обязателен - ведь наша задача сделать именно меню.
Давайте заполним эти блоки содержимым:
Внутрь блока navbar-header я добавил блок с классом navbar-brand, который предназначен для красивого отображения заголовка (и только для этого)
Далее в блоке для пунктов меню я создал ненумерованный список с классом "nav navbar-nav" - указывает на то, что содержимое списка надо понимать именно как пункты меню.
Далее, внутрь этого блока можно добавлять сколько угодно пунктов списка, используя именно такую структуру: <li><a href="..."></a></li>
Тэги <li> показывают, что эти объекты являются очередными элементами списка.
Внутри <li> мы добавляем тэг для ссылки <a>, где атрибут href="..." указывает ссылку на соответствующий раздел сайта. (Пока на нашем сайте нет разделов, я использую ссылки-якоря - на них можно нажать, но они никуда не ведут)
Смотрим что получилось:
На пункты меню можно нажимать - если бы там не были ссылки-якоря, то выполнялся бы переход на соответствующие разделы.
Может показаться что это все - меню готово, можно сворачивать работы. Но попробуйте сейчас уменьшить окно браузера до небольших размеров - наше меню пропадает и остается только заголовок.
Это сделано специально - на небольших экранах обычно не используется меню во всю ширину экрана. Делают кнопку, при нажатии на которую появляется выпадающее меню.
Этим мы займемся в следующей статье, не хочу создавать огромную простыню текста - будем изучать все порционно
@honey_and_money - Не обращай внимания на неудачи - сосредоточься на результате и иди к нему!