» »

Адаптивная навигация (меню) для сайта

Адаптивная навигация (меню) для сайта

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

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

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

Но и чтоб понять по форме как визуально смотрится и как можно для кого то отредактировать, прилагается демонстрация на материал, где все 3 вида установлено.

Так по умолчанию визуально смотрится:

Меню горизонтальное на CSS для сайта

Здесь уже на узком экране:

Меню адаптивное на стилях в темном виде

Все коды и стили вы найдете в архиве, что нужно скачать. Чтоб изначально понятно было, то три кода идет вместе и стили идут вместе, вам остается только подобрать ту панель которая нужна

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

Источник: art-ucoz.ru
28.04.2017 Загрузок: 9 Просмотров: 695 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 4
Марковичь
Марковичь 28.04.2017 02:251
0
Но видно на DEMO, что отлично, что стали делать, и где можно посмотреть и на нем уже поработать, кто в курсе, по стилямю
FeStemBer
FeStemBer 28.04.2017 02:532
0
А как то можно выставить без пикселя на всю ширину.
Kolinkor
Kolinkor 28.04.2017 02:583
0
Здесь могу ошибаться, но есть класс, который автоматически по ширине идет, это width: auto, где px убрать и заменить и посмотреть, должно получиться.
Maryges
Maryges 28.04.2017 03:004
0
Больше всего, что старая меню, сейчас уже с кнопкой на открывание идет, а здесь автоматически открыта.
avatar