» »

Светлое адаптивное меню с подчеркиванием

Светлое адаптивное меню с подчеркиванием

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

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

Это основной каркас, который встраиваем где вам нужно.

Код
<ul class="menu-main">
  <li><a href="" class="current">ZORNET.RU</a></li>
  <li><a href="">Здесь запрос-2</a></li>
  <li><a href="">Четвертый запрос ZORNET.RU-3</a></li>
  <li><a href="">Еще одна колонка ZORNET.RU-4</a></li>
</ul>

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

Так идет по умолчанию:



Это уже видим на мобильном экране:



PS - если под стили у вас не хватает место, то в этой статье вы ознакомитесь, так можно сохранить место и выставить файлом, все очень просто делается.
11.06.2017 Загрузок: 3 Просмотров: 541 Комментарий: (3)

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

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

Комментарий: 3
Scheme
Scheme 11.06.2017 04:321
0
Так простое меню смотрится, проверил на jsfiddle и в правду эффект там необычный, хотя встречал такой, он обычно создавался с какой то стороны.
Kosten
Kosten 11.06.2017 04:412
0
От туда скрин снимал и основном если что то на коде и стили, всегда там проверяю или на тестовом сайте.
ucozmental
ucozmental 11.06.2017 04:503
0
Не чего не обычного и цвет подобран не очень популярный, что нужно в стилях его изменить, очень редкий оттенок на дизайн сайта.
avatar