На этом уроке мы научимся встраивать строку поиска в адаптивное меню навигации, используя при этом только HTML/CSS код.

band

новичок
Регистрация
30.09.2018
Сообщения
9
Симпатии
0
Баллы
1
#1
HTML разметка
Внутри меню навигации <nav> у нас будет три пункта меню в виде ссылок и встроен блок с классом search-box, внутри которого форма для поиска с полем поиска и кнопкой.

<nav>
<a class="active" href="#">Главная</a>
<a href="#">Услуги</a>
<a href="#">Контакты</a>
<div class="search-box">
<form action="#">
<input type="text" placeholder="Поиск.." name="search">
<button type="submit">Отправить</button>
</form>
</div>
</nav>
Вся эта конструкция до стилизации выглядит таким вот образом.


Зададим светло-зелёный цвет фона для панели навигации.
Код:
 nav {
  background-color: #dcedc8;
}
Поместим все ссылки в строку с помощью обтекания слева, представим ссылки, как изначально строчные элементы – блочными.
Код:
nav a {
  float: left;
  display: block;
}
Меняем цвет фона под ссылками при наведении.
Код:
nav a:hover {
  background-color: #8bc34a;
}
Стилизуем активный элемент для выделения пункта меню текущей страницы.
Код:
 nav input[type=text] {
  padding: 5px;
  margin-top: 7px;
  border: none;
}
Стилизуем кнопку Отправить внутри контейнера с поиском, располагая её правее по отношению к строке поиска (float:right).


Код:
nav .search-box button {
  float: right;
  padding: 5px;
  margin-top: 7px;
  margin-right: 15px;
  background: #8bc34a;
  border: none;
  cursor: pointer;
}
Меняем цвет кнопки при наведении.
Код:
nav .search-box button:hover {
 background: #bdbdbd;

}
До ширины экрана 625 пикселей панель навигации выглядит хорошо.


После 625 пикселей конструкция ломается, необходимо делать медиа-запрос для маленьких устройств.


Медиа-запросы
Первым делом отменим обтекание везде, где оно было (float:none), это позволит всем элементам занять вертикальное положение, на ширине экрана меньше, чем 625 пикселей.

Код:
  @media screen and (max-width: 625px) {
  nav .search-box {
    float: none;
}
  nav a, nav input[type=text], nav .search-box button {
    float: none;
    display: block;
    text-align: left; /* ссылки слева */
    width: 100%; /* на всю ширину экрана */
}
  nav input[type=text] {
    border: 1px solid #689f38;  /* рамка для строки поиска */
  }
}


Добавить иконку на кнопку Отправить
1) Добавить ссылку между тегами head:

Код:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2) Вставить иконку между тегами button:

Мы сделали лишь внешнюю сторону формы поиска по сайту, поиск пока не рабочий, то есть без программной части.

Посмотреть код целиком css


CSS:
 {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

nav {
  overflow: hidden;
  background-color: #dcedc8;
}

nav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

nav a:hover {
  background-color: #8bc34a;
}

nav a.active {
  background-color: #8bc34a;
  color: white;
}

nav .search-container {
  float: right;
}

nav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

nav .search-container button {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  background: #8bc34a;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

nav .search-container button:hover {
  background: #bdbdbd;
}

@media screen and (max-width: 600px) {
  nav .search-container {
    float: none;
  }
  nav a, nav input[type=text], nav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  nav input[type=text] {
    border: 1px solid #689f38; 
  }
}
Посмотреть код целиком html
HTML:
<nav>
  <a class="active" href="#">Главная</a>
  <a href="#">Услуги</a>
  <a href="#">Контакты</a>
  <div class="search-container">
  <form action="action.php">
      <input type="text" placeholder="Поиск.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
  </form>
  </div>
 
Вверх