» »

Адаптивное многоуровневое меню на CSS

Адаптивное многоуровневое меню на CSS

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

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

Возможно у кого то возникнет вопрос, для чего его ставить?

Но это вам решать, быть ему на интернет ресурсе или нет, просто если возьмем и поставим стандартный шаблон он конструктора и там сразу заменим вверх, то вы уже увидите какое изменение будет. Так вы можете собрать свой неповторимый и уникальный сайт.

Имеет ли смысл ставить сюда мини профиль?

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

Будет стандартный шаблон адаптивный с этой панелью?

Да полностью будет адаптивен и корректно отображаться на всех размерах монитора и экрана, если говорить о мобильных аппаратах.

Что даст изменение на портале?

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

Это изображение под разными функциями и размерами.

Делал для главного как афишу, но нашел другой, не пропадать, будет здесь.

Горизонтальное меню для сайта

Когда поставите, то так визуально будет все выглядеть.

Адаптивная навигация на сайт

Это вы если зайдете на сайт с мобильного устройства.

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

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

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

Код
<header>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">  
<div class="container">  
<div class="tp-over">  
<div class="tp-1"><a class="h-logo" href="/">ZORNET.RU</a></div>  
<div class="tp-2">  
<nav class="h-menu">  
<div id="uNMenuDiv1" class="uMenuV"><ul class="uMenuRoot">  
<li><a class=" uMenuItemA" href="/"><span><i class="fa fa-bell-o" aria-hidden="true"></i> Главная</span></a></li>  
<li><a href="zornet.ru/load/81"><span><i class="fa fa-diamond" aria-hidden="true"></i> Скрипты</span></a></li>  
<li><a href="zornet.ru/load/142"><span><i class="fa fa-thumbs-up" aria-hidden="true"></i> Шаблоны</span></a></li>  
<li><a href="zornet.ru/index/0-3"><span><i class="fa fa-wifi" aria-hidden="true"></i> Обратная связь</span></a></li>  
<li class="uWithSubmenu"><a href="http://#"><span><i class="fa fa-tags" aria-hidden="true"></i> Еще категорий</span></a><ul>  
<li><a href="/"><span><i class="fa fa-hand-o-right" aria-hidden="true"></i> Категория новость</span></a></li>  
<li><a href="/"><span><i class="fa fa-hand-o-right" aria-hidden="true"></i> Категория файлы</span></a></li>  
<li><a href="/"><span><i class="fa fa-hand-o-right" aria-hidden="true"></i> Категория блог</span></a></li>  
<li><a href="/"><span><i class="fa fa-hand-o-right" aria-hidden="true"></i> Гостевая книга</span></a></li>  
<li><a href="/"><span><i class="fa fa-hand-o-right" aria-hidden="true"></i> О компаний</span></a></li></ul></li></ul></div>  
</nav>  
<div class="h-menu-button" onclick="$('.h-menu').slideToggle()"><div><span class="hm1"></span><span class="hm2"></span><span class="hm3"></span></div></div>  
</div>  
<div class="headpoisk">  
<div class="searchForm">  
<form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/">  
<input type="submit" style="cursor:pointer" class="searchSbmFl23" name="sfSbm" value="">  
<input type="text" size="20" maxlength="40" name="q" class="queryField2" value="Поиск по сайту..." onfocus="if(this.value == 'Поиск по сайту...'){this.value = ''}" onblur="if(this.value == ''){this.value = 'Поиск по сайту...'}">  
</form>  
</div>  
</div>  
</header>

Стили идут в текстовом документе, нажимаем скачать и они появятся, что копируем и ставим в CSS и все сохранить не забыть.
13.04.2017 Загрузок: 19 Просмотров: 1246 Комментарий: (24)

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

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

Комментарий: 24
Kolinkor
Kolinkor 13.04.2017 22:431
0
Шрифты всегда украшают любой элемент дизайн, здесь главное вовремя сказать стоп, то можно все под них подогнать, здесь явно есть отличие, хотя все можно было на форуме в теме написать или в комментариях.
Scheme
Scheme 13.04.2017 22:482
0
В чем проблема была, что иконка лупа не выводилась.
Dagada
Dagada 13.04.2017 22:493
0
считаю шрифты ....какой элемент украшают эти шрифты .......... В топку их давно
Kolinkor
Kolinkor 13.04.2017 22:514
0
А это кому как, вот мне они нравятся и стоят на сайте и пока не разу не тормозили, кто то не хочет ставить, наверно для того и сделали 2 темы.
Dagada
Dagada 13.04.2017 22:555
+2
по мне png
tsakonter
tsakonter 13.04.2017 23:027
0
Сейчас PMG формат устарел. но можно найти его, на вид материале, но больше шрифтовые иконки ставят, но они просто подходят хорошо, но и думаю иногда будут глюк давать.
Марковичь
Марковичь 13.04.2017 23:049
+2
Dagada, согласен, когда еще на своих ссылках стоят.
Maryges
Maryges 13.04.2017 23:2013
0
Что png стали менее весить шрифтовых иконок, просто один раз красивые нашел и поставил и любовался, но как то зашел, а там битые ссылки, радикал хостинг, где то годами картинка хранится, где то неделя и все.
Kosten
Kosten 13.04.2017 23:2615
0
Не знаю какая сейчас политика у хостин радикал, но раньше была, если ссылка не активна и не кто на ее не выходит, но она автоматически убраться. Не помню, но на одном сайте про ключи к антивирусу, то там годами стояла. Хотя пользуюсь prnt.sc, там идет хорошее приложение и скрины отличные по качеству получаются.
Start
Start 14.04.2017 00:0920
0
Акк создаешь на радикале и всё, хранение норм...
Kosten
Kosten 14.04.2017 00:1821
0
Не думаю, что там вечно будет храниться, вечного не чего нет, но с аккаунтом возможно дольше.
Kosten
Kosten 13.04.2017 22:556
0
Да, по сути не какой проблемы не было, стиль переименовал, думал где то трение. Все также осталось, потом просто увидел в коде не стыковку, так как вывел кнопку, она оказалась с правой стороны. Что взял этот кусок кода и поднял выше, что теперь с левой стороны и посмотрел вообще поиски и коды на них, там также сделано.
Dagada
Dagada 13.04.2017 23:048
0
Школота............если я встречу это (не мое меню) .Чебурек "ВАМ" 11a
ucozmental
ucozmental 13.04.2017 23:1011
0
Здесь законов нет, а кто еще с учебниками ходит, тем все равно, все как термиты копируют, после них только пыль.
ucozmental
ucozmental 13.04.2017 23:0910
0
Почему написано фиксированное меню на скрине а название другое?
Kosten
Kosten 13.04.2017 23:1212
0
Хочу сразу извиниться, просто на заборе тоже всякое написано, но не соответствует этому. Но если оно реально фиксированное еще, что здесь такого, все правильно, но не должно же что на скрине написано и в самом материале.
1 2 »
avatar