<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

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

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

CSS фреймворк Materialize (Navbar)

CSS фреймворк Materialize (Navbar)

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

Во вкладке «Components» открываете раздел «Navbar». Там вы видите визуализацию логотипа, навигационных ссылок, иконок, кнопок с прилагающимся фрагментом HTML кода. Ваша задача собрать нужные фрагменты кода в одно целое. Вам не нужно наизусть помнить все названия классов, просто смотрите примеры в документации и прописываете только нужные вам.

В итоге я хочу получить вот такую панель навигации.

CSS фреймворк Materialize (Navbar).

Выравнивание ссылок меню по правому краю

Контейнер nav-wrapper состоит из двух основных частей панели навигации: ссылки на логотип и навигационных ссылок. Задаете тегу ul класс right, если вас устраивает положение логотипа слева, а ссылок справа. Вместо Logo вставляете тег img с графическим изображением логотипа. Добавьте класс active в тег li, чтобы обозначить текущую страницу.

   <nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo"><img src="logo.png" alt=""</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li class="active"><a href="#">About</a></li>
      <li><a href="#">Badges</a></li>
      <li><a href="#">Buttons</a></li>
      <li><a href="#">Navbar</a></li>
    </ul>
  </div>
</nav>

Фиксированная панель навигации

Закрепите панель навигации, чтобы при скролле вниз, она всегда была наверху. Для этого оберните всю навигацию внешним блоком с классом navbar-fixed.

<div class="navbar-fixed">
    <nav>...</nav>
</div>

Форма поиска

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

<li>
  <form>
    <div class="input-field">
    <input id="search" type="search" required>
    <label class="label-icon" for="search"><i class="material-icons">search</i></label>
    <i class="material-icons">close</i>
    </div>
  </form>
</li>

Добавление иконки гамбургер

При уменьшении размеров экрана (на планшетах и смартфонах), вместо горизонтальных ссылок меню, на панели появляется иконка гамбургер. Внутри nav надо добавить строку под логотипом.

<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>

Добавление вертикального меню

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

<ul class="sidenav" id="mobile-demo">
  <li><a href="#">About</a></li>
  <li><a href="#">Badges</a></li>
  <li><a href="#">Buttons</a></li>
  <li><a href="#">Navbar</a></li>
</ul>

Инициализация

Сделаем кнопку гамбургер функциональной, чтобы при клике по ней разворачивалось вертикальное меню. Для этого вставим JQuery код в отдельный JavaScript файл или между тегами script в HTML файл.

$(document).ready(function(){
  $('.sidenav').sidenav();
});

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.