» »

Стильное меню на кнопках для сайта uCoz

Стильное меню на кнопках для сайта uCoz

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

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

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

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

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

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

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

Код
<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="http://zornet.ru/forum/2"><i class="fa fa-bullhorn web_id5"></i><span class="web_title">Блог</span><span class="web_desc">Статьи и инструкции по CS:S</span></a></li>  
<li><a href="http://zornet.ru/forum/23"><i class="fa fa-users web_id9"></i><span class="web_title">Форум</span><span class="web_desc">Общение пользователей</span></a></li>  
<li><a href="http://zornet.ru/forum/22"><i class="fa fa-exclamation-triangle web_id10"></i><span class="web_title">Правила сайта</span><span class="web_desc">Обязательно к прочтению</span></a></li>  
  <li><a href="http://zornet.ru/index/gruppy/0-4"><i class="fa fa-cloud-upload web_id4"></i><span class="web_title">Как добавить файл</span><span class="web_desc">Инструкция по дабовлению файлов</span></a></li>  
<li><a href="http://zornet.ru/forum/21-10-1"><i class="fa fa-cloud-download web_id8"></i><span class="web_title">Как скачивать фалы</span><span class="web_desc">Инструкция по скачиванию файлов</span></a></li>  
</ul>  
</nav>

Стили CSS к ним:

Код
.web_menu {background-color: #4E453C; padding: 0 5px; border-radius: 3px; margin-bottom: 10px;}  
.web_menu ul {-webkit-padding-start: 0; padding-left: 0;}  
.web_menu li{padding: 5px 0;}  
.web_menu li:hover{padding: 5px 0; 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; display: block; color: #ccc; padding: 2px 3px 10px 3px; border-radius: 3px; background-color: #322C26; -webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px; -moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px; box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;}  
.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; float: left; color: #FFF; width: 32px; text-align: center; line-height: 32px; height: 32px; margin-right: 10px; border-radius: 3px; border: solid 1px #4E453C; -webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px; -moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px; box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;}  
.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:#C83737}  
.web_id11{background:#455E6B}  
.web_id12{background:#969413}

Здесь представлено 12 оттенков цвета, если у вас будут больше запросов, то просто копируем и в стиле дополняем.

Спасибо ДимДимычу, что разобрал это вертикальное меню по полочкам.
08.03.2017 Просмотров: 795 Комментарий: (20)

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

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

Комментарий: 20
Scheme
Scheme 08.03.2017 12:571
0
Даже догадываюсь под какую игровую тематику создана это меню. Манкрафт, больше всего, а так оно не чем почти не отличается, что здесь стоит. А сто стили могут сталкиваться, это основном так идет, просто что касается меню сразу убрать, не будите же вы ставить или оставлять еще которое идет с шаблоном.
Kolinkor
Kolinkor 08.03.2017 13:562
0
Не просто поставить, а так не нужно уж все подряд удалять, да будет конфликт, но просто посмотрите с кем идет, хотя все можно, меню редко можно увидеть на сайте, который полностью потом переделывают и не разу не замечал, что манюшку от конструктора кто то оставил.
tsakonter
tsakonter 08.03.2017 14:003
0
Красиво получилось на темном фоне.
ДимДимыч
ДимДимыч 08.03.2017 15:264
0
Автор этого меню сайт веб мастер ucoz, за что и спасибо ему. Я же в свою очередь просто добавил немного эффектов и всё.
Kosten
Kosten 08.03.2017 16:015
0
Димон, а сейчас все добавляют и просят источника, я привыкший, если веб мастер, то нужно поставить, это опять редактировать, возможно Роман меня поймет!)
TiMzLeR
TiMzLeR 02.12.2017 19:126
0
Есть не большая проблемка, при добавлений этого меню) у меня получилось так:
Подумал добавить в этой строке:

Код
.web_menu a{text-decoration: none; display:block; color: #ccc; padding: 2px 3px 10px 3px; border-radius: 3px; background-color: #322C26; -webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px; -moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px; box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;}  

добавить это:margin-left:7px; но нечего не вышло!
Kosten
Kosten 02.12.2017 19:337
0
А что вообще с меню, как оно визуально смотрится?
TiMzLeR
TiMzLeR 02.12.2017 19:508
0
Сорри, сообщение ввел не правильно, вот как выглядит:
Kosten
Kosten 02.12.2017 20:049
0
В стилях CSS находишь стили под номером 125, что полностью заменить на этот.
Код
.sidebox li a,.sidebox .catsTable td a {display:inline-block;color:#3498db;padding:5px 0;width: 98%;}


TiMzLeR
TiMzLeR 02.12.2017 20:1510
0
Сделал, только есть один вопрос, а чем относится данный измененный код к этому меню?
TiMzLeR
TiMzLeR 02.12.2017 20:3511
0
Что-то иконки с бордером сливаются)
TiMzLeR
TiMzLeR 02.12.2017 20:5712
0
Иконки в меню почему-то сливаются с бордером:
Kosten
Kosten 02.12.2017 22:4613
0
Найди в CSS эти стили, от 120 -125 и снеси их, и замени на эти. Там отступ margin прописал, что сам можешь уже выставить как нужно.



Код
.marked .sidetitle {background:#f27935;}
.sidebox .inner {padding: 0px 16px;margin: 10px 0px 10px;}
.sidebox ul,.sidebox .catsTable {margin:0;padding:0;list-style:none;}
.sidebox .catsTable,.sidebox .catsTable * {display:block;width:auto!important;}
.sidebox li {list-style:none;padding:0;}
.sidebox li a,.sidebox .catsTable td a {display:inline-block;color:#3498db;padding:5px 0;width: 98%;}
TiMzLeR
TiMzLeR 02.12.2017 23:4514
0
Я сменил тот код на этот, так как вы и отписали) но увы нечего не изменилось - прокрутил там отступ margin и нечего!
Kosten
Kosten 03.12.2017 00:0715
0
Но у меня все получилось, скрин представил, почистите кэш браузера.
Kosten
Kosten 03.12.2017 01:0417
0
TiMzLeR, секунду, постараюсь полностью настроить.
1 2 »
avatar