» »

Вертикальное меню Asrtynur для сайта uCoz


Вертикальное меню Asrtynur для сайта uCoz

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

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

Тогда будет нормально, оно у кого как станет, но в стилях находим -35 что можно выравнивать, это так на всякий случай, вот сделал и как получилось.
Здесь нужно к навигаций подсоединить стили от официального сайта fontawesome.ru так чтоб он выводил те знаки, которые вам нужны, и в низу вы уведите стиль его, что обязательно нужно прописать, а то кнопки будут пустые. Также они пригодятся в построение самого ресурса. Просто нужно подключить шрифт Теперь между head и /head если кнопки решите сменить, так как тема у всех разная, а кнопок очень много и под все разделы подойдут.

 



Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Сам каркас:

Код
<nav class="web_menu">  
<ul>  
  <li><a href="/"><i class="fa fa-folder web_id1"></i><span class="web_title">Добавить материал на сайт</span><span class="web_desc">Добавить скрипт/шаблон на сайт</span></a></li>  
<li><a href="/"><i class="fa fa-bullhorn web_id5"></i><span class="web_title">Помощь по uCoz</span><span class="web_desc">Задать вопрос по сайту uCoz</span></a></li>  
<li><a href="/"><i class="fa fa-cogs web_id9"></i><span class="web_title">Заказать адаптацию</span><span class="web_desc">Заказать адаптацию с DLE для uCoz</span></a></li>  
<li><a href="/"><i class="fa fa-cog web_id10"></i><span class="web_title">Заказать рип шаблона </span><span class="web_desc">Стол заказов рип шаблонов</span></a></li>  
<li><a href="/"><i class="fa fa-users web_id4"></i><span class="web_title">Группы на сайте</span><span class="web_desc">Группы и их значения на сайте</span></a></li>  
<li><a href="/"><i class="fa fa-refresh web_id8"></i><span class="web_title">Прогон по Twitteru</span><span class="web_desc">Прогоняем ссылки по Twitteru (обмен)</span></a></li>  
<li><a href="/"><i class="fa fa-folder-open web_id2"></i><span class="web_title">Полезное ПО для Вашего сайта</span><span class="web_desc">Бесплатное программное обеспечение</span></a></li>  
<li><a href="/"><i class="fa fa-download web_id11"></i><span class="web_title">Браузер Uran</span><span class="web_desc">Скачать Uran от uCoz - браузер без рекламы</span></a></li>  
  <li><a href="/"><i class="fa fa-download web_id12"></i><span class="web_title">Adobe Photoshop CS3</span><span class="web_desc">Скачать Photoshop CS3 бесплатно</span></a></li>  
</ul>  
</nav>


Вот этот стиль CSS и будет выводить правильность и корректность установки..

Код
.web_menu li{ padding-bottom: 10px;margin-left: -35px;}  
.web_menu li:hover{padding-bottom: 10px; border-radius: 6px;}  
.web_menu a{border:0px;}  
.web_menu *{transition:all linear .1s;-moz-transition:all linear .1s;-webkit-transition:all linear .1s;-o-transition:all linear .1s;}  
.web_menu a{text-decoration:none}  
.web_menu a:hover i{font-size:21px}  
.web_menu .web_title{font-size:13px;font-weight:bold}  
.web_desc{display:block;font-size:11px;color: #848484;}  
.web_menu i{margin-top:1px;display:inline-block;float:left;color:#FFF;width:32px;text-align:center;line-height:32px;height:32px;margin-right:10px;border-radius:3px;}  
.web_id1{background:#48adf3}  
.web_id2{background:#df473d}  
.web_id3{background:#ef7e3b}  
.web_id4{background:#3d5a9b}  
.web_id5{background:#82d043}  
.web_id6{background:#35c2ba}  
.web_id7{background:#207716}  
.web_id8{background:#33BFCC}  
.web_id9{background:#5176AD}  
.web_id10{background:#BE37C8}  
.web_id11{background:#455E6B}  
.web_id12{background:#969413}


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

Код
<i class="fa fa-folder web_id1"></i>


Так вы можете преобразить свой портал в плане его стиля.
16.04.2016 Просмотров: 648 Комментарий: (16)

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

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

Комментарий: 16
vitsavu
vitsavu 16.04.2016 11:101
-1
По источнику переделай !
СПАМ
tsakonter
tsakonter 16.04.2016 15:382
0
Но вы интересные, вам самим не надоела свой сайт пиарить, забыли написать в материале, нет в комментарий затолкну.
FeStemBer
FeStemBer 16.04.2016 16:486
0
Мне показалось, или это точно ваш источник, вот мне кажется, еще вашего сайта не было, а вертикальное меню было. Какое вы имеете право ставить свой источник, когда он вам совершенно не принадлежит, посмотрел материал. но все вы сделали.

Костен, не понимаю, как ты позволяешь ставить левые источники.
csretven
csretven 16.04.2016 16:537
0
Tventum, если говорить и исходить от правил ucoz, то это спам в комментариях, который наказывается.
Kosten
Kosten 16.04.2016 17:098
0
Спам убрал, источник 100% не правильный в этом случай.
Alex_L_X
Alex_L_X 16.04.2016 15:523
0
В общем скажу так - удалите этот материал из-за отсутствия описания, причем на источнике тоже оно отсутствует.

И в нём меняем fa-folder на нужную вам картинку.
Хотите сказать вбить url картинки и всё заработает? biggrin

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

Честно матом хочется ругаться. Всё должно быть описано, незнаю как у вас на сайте, тут я всегда всё понимаю, да и думаю каждый поймет.
Kosten
Kosten 16.04.2016 16:254
0
Alex_L_X, на скоряк переписал, так как вообще все скопировано было, потом нормально напишу.
FeStemBer
FeStemBer 16.04.2016 16:425
0
Мне понятно как описано, хотя сам знаю как делать, просто считаю как пользователь, который в первые видит этот файл.
Kosten
Kosten 16.04.2016 20:519
0
Проверил и переписал, так как для блока, кто хочет установить его, не выйдет, стили переписывать нужно, а что так в контейнер ставить, так отлично подойдет, изображение приложил в материал.
vitsavu
vitsavu 16.04.2016 21:0010
0
Спасибо костен молодец !
Tergran
Tergran 17.04.2016 00:5511
0
vitsavu, а что он сделал, то что извините ваш бред переписал, но больше не как не могу назвать, через каждое слово знак, тут язык можно сломать когда читаешь, а поисковые роботы так те вообще обойдут подальше.

Учитесь описывать, просто что видите то пишите и для чего нужно.
Alex_L_X
Alex_L_X 17.04.2016 13:2712
0
Кстати у кого горизонтально меню встаёт вместо nav изменить на div
from121rus1233
from121rus1233 21.04.2016 17:2513
0
НЕ РАБОТАЕТ!
Kosten
Kosten 21.04.2016 17:3414
0
Вверх сайта в шапку установите эти стили.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Kosten
Kosten 21.04.2016 17:4316
0
Но что получилось, появились иконки, если что скиньте ссылку на сайт посмотреть.
Kosten
Kosten 21.04.2016 17:3615
0
Эти стили отвечают за шрифтовые иконки и нужно в head стиль /head разместить.
avatar