» »

Вертикальное меню на шрифтовых кнопках

Вертикальное меню на шрифтовых кнопках

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

Светлое вертикальное меню

Код:

Код
<div class="menu-rightmenu-container"><ul class="menu-rightmenu">  
<li><a title="титле название" href="http://zornet.ru/load/85"><i class="fa fa-laptop"></i> Скрипты для сайта uCoz</a></li>  
<li><a title="титле название" href="/"><i class="fa fa-rocket"></i> Ajax окна для uCuz</a></li>  
<li><a title="титле название" href="/"><i class="fa fa-key"></i> Меню для портала</a></li>  
<li><a title="титле название" href="/"><i class="fa fa-sitemap"></i> Графика для сайта</a></li>  
<li><a title="титле название" href="/"><i class="fa fa-pencil-square-o"></i> Шаблоны для сайта uCoz</a></li>  
<li><a title="титле название" href="/"><i class="fa fa-wrench"></i> ZorNet: Создание сайта uCoz</a></li>  
</ul></div>

CSS

Код
.menu-rightmenu li {  
  padding: 8px;  
  background: #f5f4f4;  
  border-bottom: 1px solid #e6e0e0;  
}  

.menu-rightmenu li:first-child {  
  border-top: 1px solid #eee;  
}  

.menu-rightmenu li:hover {  
  background: #f3eded;  
}  

.menu-rightmenu li a {  
  color: #1e6586;  
  font-family: PT Sans;  
  font-size: 14px;  
}  

.menu-rightmenu li:hover a {  
  color: #3b4852;  
  font-family: PT Sans;  
  font-size: 14px;  
}  

.menu-rightmenu li a {  
  text-decoration: none;  
  display: block;  
}  
.menu-rightmenu li {list-style-type:none !important}  
.menu-rightmenu li a:before {display:none !important}

Подключить шрифтовые кнопки, что визуально просматривались.
01.11.2017 Просмотров: 343 Комментарий: (7)

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

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

Комментарий: 7
Kosten
Kosten 01.11.2017 01:521
0
Почему то не мог маркеры убрать, что идут перед шрифтовыми кнопками, хотя прописывал стиль, и запрет вывода.
-SAM-
-SAM- 01.11.2017 03:133
+1
Kosten
Kosten 01.11.2017 02:352
+1
По маркеру все решено и исправлено, пользователь -SAM- помог в разрешение и теперь уже в материале прописан стиль, что не будет их показывать.

avatar
keter 10.11.2017 09:135
+1
У меня все равно показывало эти маркеры. Решил проблему этим кодом:
Код
li {
list-style-type: none; /* Убираем маркеры */
}

Взял от сюда: ссылка
Kosten
Kosten 10.11.2017 10:246
0
Но если помогает убирать эти маркеры, то стиль всегда пригодится.
-SAM-
-SAM- 10.11.2017 13:247
0
Kosten
Kosten 01.11.2017 16:074
0
Кому эффект при наведение не нужен, то есть похожий формат вертикальное меню, что также на кнопках создан.
avatar