Vertical Red Menu [Free]

Всем привет, решил подарить вам стильное вертикальное меню для сайта .

Спойлер: Посмотреть GIF скриншот

Перейдем к коду

Код:

<li class="sidebar-item"> <h1 class="sidebar-red">Рубрики</h1><ul>
<li class="cat-item cat-item-44"><a href="#" title="Просмотреть все записи в рубрике «Bootstrap на русском»">Bootstrap на русском</a>
</li>
<li class="cat-item cat-item-55"><a href="#" title="Просмотреть все записи в рубрике «PSD UI-элементы управления»">PSD UI-элементы управления</a>
</li>
<li class="cat-item cat-item-46"><a href="#" title="Просмотреть все записи в рубрике «PSD исходники»">PSD исходники</a>
</li>
<li class="cat-item cat-item-52"><a href="#" title="Просмотреть все записи в рубрике «PSD формы для сайта»">PSD формы для сайта</a>
</li>
<li class="cat-item cat-item-48"><a href="#" title="Просмотреть все записи в рубрике «PSD шаблоны сайтов»">PSD шаблоны сайтов</a>
</li>
<li class="cat-item cat-item-54"><a href="#" title="Просмотреть все записи в рубрике «WordPress»">WordPress</a>
</li>
<li class="cat-item cat-item-1"><a href="#" title="Просмотреть все записи в рубрике «Без рубрики»">Без рубрики</a>
</li>
<li class="cat-item cat-item-50"><a href="#" title="Просмотреть все записи в рубрике «Библиотека»">Библиотека</a>
</li>
<li class="cat-item cat-item-43"><a href="#" title="Просмотреть все записи в рубрике «Вдохновение»">Вдохновение</a>
</li>
<li class="cat-item cat-item-39"><a href="#" title="Просмотреть все записи в рубрике «Веб-дизайн»">Веб-дизайн</a>
</li>
<li class="cat-item cat-item-45"><a href="#" title="Скачать бесплатные PSD-исходники для Photoshop. Скачать бесплатные PSD шаблоны.">Загрузки</a>
</li>
<li class="cat-item cat-item-40"><a href="#" title="Просмотреть все записи в рубрике «Обучение»">Обучение</a>
</li>
<li class="cat-item cat-item-53"><a href="#" title="Просмотреть все записи в рубрике «Полезные статьи»">Полезные статьи</a>
</li>
<li class="cat-item cat-item-47"><a href="#" title="Просмотреть все записи в рубрике «Скачать PSD UI-наборы»">Скачать PSD UI-наборы</a>
</li>
<li class="cat-item cat-item-34"><a href="#" title="Просмотреть все записи в рубрике «Уроки CSS3»">Уроки CSS3</a>
</li>
<li class="cat-item cat-item-57"><a href="#" title="Просмотреть все записи в рубрике «Уроки HTML»">Уроки HTML</a>
</li>
<li class="cat-item cat-item-33"><a href="#" title="Просмотреть все записи в рубрике «Уроки HTML5»">Уроки HTML5</a>
</li>
</ul>
</li>

Код:

h1 {
font-family: Lobster;
font-size: 34px;
}


/*SIDEBAR***********************************************/

#sidebar {
position: relative;
margin-top: 20px;
width: 340px;
float: right;
}

#sidebar .sidebar-item {
list-style: none;
margin-bottom: 15px;
background: rgba(233, 233, 233, 0.5);
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

.sidebar-red {
background: #d73027;
color: #eeeeee;
text-shadow: 1px 1px 0px #a30000;
padding: 7px 0px 7px 0px;
font-size: 28px;
text-align: center;
}


.sidebar-item ul {
margin: 0px auto;
background: #fff;
}

.sidebar-item li {
list-style: none;
}

.sidebar-item li a {
display: block;
padding: 10px 0px 10px 10px;
color: #666666;
text-decoration: none;
border-top: 1px solid #efefef;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.sidebar-item li a:hover {
background: #d73027;
color: #fff;
}

.sidebar-item li:first-child a {
border-top: none;
}

.sidebar-item li:last-child a {
border-bottom: none;
}

Скачать шрифт

 

Норм, может буду использовать, но только изменю цвет