Страница 1 из 11
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Горизонтальное меню адаптивное CSS для сайта (Темный дизайн)
Горизонтальное меню адаптивное CSS для сайта
Kosten
Дата: Вторник, 25.04.2017, 03:35 | Сообщение # 1
Администраторы
Сообщений:15298
Награды: 50


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

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



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



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



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

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



CSS:



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

Изначально он был переделан с этой панели навигаций, которая также адаптированная, но больше подойдет под один модуль, как блог или доска объявление, что пришлось изменить и весь функционал подогнать, чтоб визуально все корректно смотрелось.
Прикрепления: 6743355.png(34Kb) · 0542665.png(7Kb) · 4418826.png(2Kb)
Страна: (RU)
Сопрано
Дата: Вторник, 25.04.2017, 04:33 | Сообщение # 2
Пользователи
Сообщений:413
Награды: 2


Что то поиск тот же остался, что там изменено было, разве кнопка добавлена.
Страна: (RU)
Kosten
Дата: Вторник, 25.04.2017, 04:41 | Сообщение # 3
Администраторы
Сообщений:15298
Награды: 50


Он полностью был изменен, но стиль то старый остался и классы в коде старые установлены, но сделано так, чтоб кнопку можно было поставить, немного изменен, то на котором стоял не получилось корректно установить, что поменял и нормально, проверил все ищет по ключевому слову.
Страна: (RU)
Марковичь
Дата: Вторник, 25.04.2017, 06:29 | Сообщение # 4
Проверенные
Сообщений:65
Награды: 0


Но очень много, кто не перешел, если говорить о кино сайтах, там сразу по дизайн видно, что производилась верстка макета.
Страна: (RU)
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Горизонтальное меню адаптивное CSS для сайта (Темный дизайн)
Страница 1 из 11
Поиск: