Как настроить поиск по сайту


Как сделать поиск по сайту на HTML

Вы здесь: Главная - CSS - CSS3 - Как сделать поиск по сайту на HTML

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

Демонстрация примера.

HTML разметка

Внутри меню навигации <nav> у нас будет три пункта меню в виде ссылок и встроен блок с классом search-box, внутри которого форма для поиска с полем поиска и кнопкой.

<nav>
  <a href="#">Главная</a>
  <a href="#">Услуги</a>
  <a href="#">Контакты</a>
  <div>
  <form action="#">
    <input type="text" placeholder="Поиск.." name="search">
    <button type="submit">Отправить</button>
  </form>
  </div>
</nav>

Вся эта конструкция до стилизации выглядит таким вот образом.

CSS код

Зададим светло-зелёный цвет фона для панели навигации.

nav {
  background-color: #dcedc8;
}

Поместим все ссылки в строку с помощью обтекания слева, представим ссылки, как изначально строчные элементы – блочными.

nav a {
  float: left;
  display: block;
}

Меняем цвет фона под ссылками при наведении.

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

Стилизуем активный элемент для выделения пункта меню текущей страницы.

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

Располагаем контейнер для поиска на правой части панели навигации.

nav .search-box {
  float: right;
}

Стилизуем поле для поиска внутри панели навигации.

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:

<button type="submit"><i></i></button>

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

Посмотреть код целиком можно на Codepen

See the Pen Search Bar with Submit icon by porsake (@porsake) on CodePen.

  • Создано 31.10.2018 10:20:35
  • Михаил Русаков
Предыдущая статья Следующая статья

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

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

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

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

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

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

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

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

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

Как настроить сайты - Южный технический отдел

  • Home
  • American Eagle
  • Aspen
  • Часто задаваемые вопросы
  • Google Apps
    • Календарь
      • Руководства
        • Как добавить календарь
        • Как создать новый календарь
        • Как создать событие
    • Документы
      • Учебники
        • Как создать элемент в Документах
        • Как поделиться документом
        • Как загрузить файл в Документы
        • Как использовать Google Forms
    • Gmail
          47 Учебники
        • Как добавить контакты
        • Как настроить фильтр спама
        • Как прикрепить файл к электронному письму
        • Как отправить электронное письмо ученику
        • Как отправить электронное письмо учителю
.

Как настроить результаты поиска?

Привет,

Итак, я хотел бы иметь поиск, который представит конкретные данные. У меня 2 сценария.

1. Например, представьте, что на моем сайте 2 страницы. Когда пользователь находится на 1-й странице, Search должен будет искать только сообщения, которые находятся в категории X. Когда пользователь находится на 2-й странице, Search будет искать только сообщения, которые находятся в категории Y.

2. Допустим, я создал 2 настраиваемых типа сообщений с помощью Toolset: один тип - «Компании», а другой - «Отделы».Когда пользователь находится на веб-сайте компании, он будет искать отделы, которые присутствуют именно в его компании. Например, будет много отделов (финансы, маркетинг, человеческие ресурсы, ИТ), но если в его компании есть только финансы и маркетинг, в поиске будут отображаться только финансы и маркетинг.

Я много читал о настройке файлов темы напрямую через дочерние темы (index.php, search.php, searchform.php и т. Д.), Но вся информация, которую я нашел, действительно сбивает с толку, и я не могу понять, с чего начать и что ровно делать .

Знаете ли вы, возможно ли реализовать вышеупомянутые сценарии?

П.С. * если это важно * Я размещаю свой веб-сайт на AWS (WordPress сертифицирован Bitnami), и я получаю доступ ко всем файлам WordPress и тем через SFTP FileZilla.

.

python - сайт администратора Django настраивает запрос search_fields

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

  1. Авторизоваться зарегистрироваться
  2. текущее сообщество

    • Переполнение стека Помогите болтать
.Настройка

Android SearchView - qaru.

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий