Здравствуйте! Сегодня выкладываю простое светлое вертикальное меню с разноцветными элементами в виде круга.
Я решил его написать и выложить на сайт так как много раз просили сверстать меню такого плана и что бы не делать этого так сказать постоянно для каждого пользователя и избежать дальнейших просьб на эту тему.
Установка меню
Копируем код ниже и ставим его в то место где будет располагаться данное меню обычно это первый или второй контейнер
Код
<div class="levmenu">
<ul>
<li>
<a href="/load"><i class="fa fa-circle color1" aria-hidden="true"></i>Шаблоны</a>
</li>
<li>
<a href=""><i class="fa fa-circle color2" aria-hidden="true"></i>Скрипты</a>
</li>
<li>
<a href=""><i class="fa fa-circle color3" aria-hidden="true"></i>PSD макеты</a>
</li>
<li>
<a href=""><i class="fa fa-circle color4" aria-hidden="true"></i>Каталог сайтов</a>
</li>
<li>
<a href=""><i class="fa fa-circle color5" aria-hidden="true"></i>Новости</a>
</li>
<li>
<a href=""><i class="fa fa-circle color6" aria-hidden="true"></i>Программы</a>
</li>
<li>
<a href=""><i class="fa fa-circle color7" aria-hidden="true"></i>Помощь с сайтом</a>
</li>
</ul>
<span class="levmenunam"></span>
<ul>
<li>
<a href=""><i class="fa fa-circle color1" aria-hidden="true"></i>Музыка</a>
</li>
<li>
<a href=""><i class="fa fa-circle color4" aria-hidden="true"></i>Портфолио</a>
</li>
</ul>
<span class="levmenunam"></span>
<ul>
<li>
<a href="/"><i class="fa fa-circle color5" aria-hidden="true"></i>Склонения</a>
</li>
<li>
<a href="/"><i class="fa fa-circle color6" aria-hidden="true"></i>Градиент</a>
</li>
<li>
<a href="/"><i class="fa fa-circle color3" aria-hidden="true"></i> Окна ajax ucoz</a>
</li>
</ul>
</div>
Отлично не забываем сохранить!
css таблица стилей
Копируем код ниже и добавляем его в самый низ своей таблице стилей
Код
.levmenu ul {
padding: 20px 20px;
}
.levmenu ul li {
display: block;
border-radius: 10px;
}
.levmenu ul li a {
display: block;
color: #343c5e;
font-size: 13px;
line-height: 40px;
padding: 0 20px;
text-decoration: none;
}
.levmenu ul li a i {
color: #343c5e;
margin-right: 15px;
}
.color0 {color: #ff4754!important;}
.color1 {color: #FBB99C!important;}
.color2 {color: #2E96DE!important;}
.color3 {color: #ACC4FB!important;}
.color4 {color: #EDA8C1!important;}
.color5 {color: #FBB99C!important;}
.color6 {color: #9AFBA5!important;}
.color7 {color: #FBB89A!important;}
.color8 {color: #434343!important;}
.color9{ color: #d2d2d2!important;}
.levmenu ul li:hover {
background: #FFF;
box-shadow: 0 1px 5px #00000014;
}
.levmenu ul li:hover a i {
font-size: 18px;
}
.levmenunam {
margin: 0 35px;
border-bottom: 1px solid #e0e0e0;
display: block;
}
Отлично, не забываем сохранить!
Теперь для тех у кого не подключены шрифтовые иконки font-awesome нужно добавить в самый верх первой строчкой в таблицу стилей вот такую строчку
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);
для тех у кого они уже подключены повторно этого делать не нужно.
Отлично. Не забываем сохранить и почистить кеш у браузера что бы обновились стили.