ZorNet.Ru — сайт для вебмастера » Меню для сайта » Вертикальное меню на шрифтовых кнопках

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

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

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

Код:

Код

<div class="menu-rightmenu-container"><ul class="menu-rightmenu">
<li><a title="титле название" href="http://zornet.ru/load/85"> Скрипты для сайта uCoz</a></li>
<li><a title="титле название" href="/"> Ajax окна для uCuz</a></li>
<li><a title="титле название" href="/"> Меню для портала</a></li>
<li><a title="титле название" href="/"> Графика для сайта</a></li>
<li><a title="титле название" href="/"> Шаблоны для сайта uCoz</a></li>
<li><a title="титле название" href="/"> 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 Ноября 2017 Просмотров: 1864 Комментариев: (7)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 7
Порядок вывода комментариев: Kosten 01 Ноября 2017 01:52¹ +1 Почему то не мог маркеры убрать, что идут перед шрифтовыми кнопками, хотя прописывал стиль, и запрет вывода. -SAM- 01 Ноября 2017 03:13³ +1 По поводу маркированного списка вот тема уже есть, это от шаблона берётся. И вот вам фикс в стили дописать там в самый конец .menu-rightmenu li a:before {display:none !important} - чтобы другие не мучались. Если после этого стиля не устраивает то, что пункты меню получаются прижаты к левому краю, то этот отступ опять же исходя из шаблона был, а не из-за меню (править padding у .menu-rightmenu li там нужно). Пункты маркированного списка еще можно убрать так там: вместо .menu-rightmenu li a:before {display:none !important} прописать .menu-rightmenu li a:before {content:'' !important} - тем самым отступ останется. Kosten 01 Ноября 2017 02:35² +1 По маркеру все решено и исправлено, пользователь -SAM- помог в разрешение и теперь уже в материале прописан стиль, что не будет их показывать. keter 10 Ноября 2017 09:13⁵ +1 У меня все равно показывало эти маркеры. Решил проблему этим кодом: Код li { list-style-type: none; /* Убираем маркеры */ } Взял от сюда: ссылка Kosten 10 Ноября 2017 10:24⁶ 0 Но если помогает убирать эти маркеры, то стиль всегда пригодится. -SAM- 10 Ноября 2017 13:24⁷ 0 Всё верно, это всё от шаблонов зависит, как и писал там в теме на форуме, что в новых системных шаблонах изначально прописан этот стиль (соответственно еще раз добавлять не нужно), а где нет такого (или шаблон нестандартный) - надо дописывать. Kosten проверял на тестовом у себя, где системный шаблон был уже с этим стилем, а маркеры были сделаны через свойства content. Исходя из этого, оба стиля теперь добавлены в шапку материала, чтобы проблем не возникало больше ни у кого с этим. Спасибо, что напомнили. Kosten 01 Ноября 2017 16:07⁴ 0 Кому эффект при наведение не нужен, то есть похожий формат вертикальное меню, что также на кнопках создан.