• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Горизонтальное меню адаптивное CSS для сайта (Темный дизайн)
Горизонтальное меню адаптивное CSS для сайта
Kosten
Вторник, 25 Апреля 2017 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Так как сейчас дизайн должен быть полностью адаптивным и корректно смотреться на мобильных аппаратах и на различных размерах монитора, то решил начать с горизонтального меню с функциями. Что в них включается, это сама навигация с под меню, что можно много информации хранить. Также поиск внутренний по сайту и простой мини профиль, где будет выводить логин зарегистрированного пользователя и при наведение появляться все функций для него.

Рассмотрим как по умолчанию будет визуально смотреться.



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



Но здесь просто, если установить на сайт и выйти с планшета, но увидите такую навигацию.



Приступаем к установке:

По возможности меняем весть вверх сайта:



CSS:



Этот материал был переделан, в нем изменилась ширина, которая стала больше, когда узкий экран он автоматически в ширине измениться. И заменен поиск, а точнее прописан класс в нем на изображение, так как так намного лучше смотрится.

Изначально он был переделан с этой панели навигаций, которая также адаптированная, но больше подойдет под один модуль, как блог или доска объявление, что пришлось изменить и весь функционал подогнать, чтоб визуально все корректно смотрелось.
Прикрепления: 6743355.png (34.3 Kb) · 0542665.png (6.7 Kb) · 4418826.png (2.3 Kb)
Страна: (RU)
Сопрано
Вторник, 25 Апреля 2017 | Сообщение 2
Оффлайн
Vip
Сообщений:462
Награды: 4
Что то поиск тот же остался, что там изменено было, разве кнопка добавлена.
Страна: (RU)
Kosten
Вторник, 25 Апреля 2017 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Он полностью был изменен, но стиль то старый остался и классы в коде старые установлены, но сделано так, чтоб кнопку можно было поставить, немного изменен, то на котором стоял не получилось корректно установить, что поменял и нормально, проверил все ищет по ключевому слову.
Страна: (RU)
Марковичь
Вторник, 25 Апреля 2017 | Сообщение 4
Оффлайн
Vip
Сообщений:65
Награды: 0
Но очень много, кто не перешел, если говорить о кино сайтах, там сразу по дизайн видно, что производилась верстка макета.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Горизонтальное меню адаптивное CSS для сайта (Темный дизайн)
  • Страница 1 из 1
  • 1
Поиск: