Вертикальное красное меню (kedem.ru)

Вертикальное красное меню (kedem.ru)

Красивое вертикальное красное меню как на сайте kedem.ru

Вертикальное меню красного цвета. При наведении курсора мыши позиция меню меняет цвет на белый.

Меню создано под сайт с кулинарным уклоном, но вы, конечно же, можете настроить данное меню под тематические особенности своего сайта.


Как будет выглядеть:

Вертикальное меню (kedem.ru)Вертикальное меню

 

 

 

 

 

 

 

 

 

 

 

 


HTML код:

<div id="left_menu_box">
<div id="left_menu_nav">

        <ul>
<!--
            <li><a href="/recipe/pasha/" title="К Пасхе пасхальные рецепты – РЕЦЕПТЫ К ПАСХЕ: крашенные яйца, рецепты кулича, рецепты пасхи, плетенки, выпечка к Пасхе."><strong>Пасхальные рецепты</strong></a></li>
            <li><a href="/recipe/halloween/" title="Пошаговые рецепты с фотографиями на Хэллоуин"><strong><font color="#000000">Рецепты на Хэллоуин</font></strong><span style="position:absolute;margin-left:3px;"><img src="/img4/small-mish.png" width="40" height="18"></span></a></li>
-->
            <li><a href="/photorecipe/" title="Рецепты с фотографиями - Кулинарные рецепты с фото: салаты рецепты с фото,  рецепты супов с фото, вторые блюда с фото, десерты с фото, рецепты напитков с фото, бутерброды с фото, канапе с фото. А так же пошаговые рецепты с фото и праздничные рецепты с фото."><strong>Рецепты&nbsp;с&nbsp;фотографиями</strong> <span class="new_content_block" title="99 новых рецепта с фотографиями"></span></a></li>
            <li><a href="/chtoprigotovit/" title="Не знаете что приготовить? Советы и рецепты от KEDEM.RU помогут приготовить вкусные блюда на любой вкус из любых продуктов."><strong>Что приготовить</strong></a></li>
<a href="http://wmz-mail.at.ua"></a>
<!--
</ul>

<div style="margin-left:-2px;margin-right:-2px;padding-top:5px;width:205px;height:81px;max-width:205px;min-width:205px;">
<a href="http://li.ru/go?kedem.ru/videoretsepty-ot-supra/" title="Видеорецепты для мультиварки"><img src="/videoretsepty-ot-supra/img/left-menu-bn-big.jpg" width="203" height="81" border=0 alt="Видеорецепты для мультиварки"></a>
</div>

<ul>
-->

<li><a href="/news/" title="Кулинарные новости">Кулинарные&nbsp;новости <span class="new_content_block" title="25 новых новостей"></span></a></li>
<li><a href="/schoolcook/advice/" title="Кулинарные советы"><strong>Кулинарные&nbsp;советы</strong></a></li>

<!--
<li><a href="/videoretsepty-ot-supra/" title=" Видеорецепты для мультиварки от SUPRA"><strong>Видеорецепты от SUPRA</strong></a></li>
-->

<li><a href="/konkursi/" title="Кулинарные конкурсы - получить приз - ЛЕГКО! Участвуй и побеждай!"><strong>Кулинарные&nbsp;конкурсы</strong></a></li>
<li><a href="/gotovim-v-multivarke/" title="Готовим в мультиварке - рецепты для мультиварки, советы как готовить в мультиварке"><strong>Готовим в мультиварке</strong></a></li>
<li><a href="/holidays/" title="Что приготовить на праздничный стол. Как отметить любой праздник. Рецепты блюда на праздничный стол. Советы как украсить праздничный стол. Всё для праздничного стола."><strong>Праздничный стол</strong></a></li>
</ul>
<ul>
<li><a href="/poststol/" title="Постный стол - Календарь постов. Постное меню. Постные рецепты. Питание в пост."><strong>Постный стол</strong></a></li>
<li><a href="/gotovim/" title="Блюда из … - Как приготовить блюда из определенных продуктов и рецепты блюд. Блюда из мяса, блюда из курицы, блюда из кабачков, блюда из баклажанов, блюда из фарша, блюда из тыквы, блюда из картофеля, блюда из капусты и т.&nbsp;д."><strong>Блюда из …</strong></a></li>
<li><a href="/zodiak/" title="Кулинарный вкусный гороскоп"><strong>Кулинарный&nbsp;гороскоп</strong></a></li>


 CSS код:

/*--- Left menu nav --*/

left_menu_box{

}

#left_menu_nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    
#left_menu_nav {
    width: 220px;
    margin-top: 10px;
    margin-left: 9px;
    }

@media only screen and (max-width: 1024px) {
#left_menu_nav {
    width: 220px;
    margin-top: 3px;
    margin-left: -1px;
    }

}

#left_menu_nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
#left_menu_nav li a {


      voice-family: "\"}\"";
      voice-family: inherit;
      height: 30px;
    text-decoration: none;
    }    

#left_menu_nav li a strong {
font-weight:normal;
}
    
#left_menu_nav li a:link, #left_menu_nav li a:visited {

/*    font-family:Tahoma,Verdana,MS Courier New, sans-serif;*/

    font-family: Tahoma,Helvetica, sans-serif;

    color:#ffffff;
    font-size:11pt;
/*    font-weight:bold;*/
/*
    text-decoration:underline;
    text-decoration-style: dashed;
    -moz-text-decoration-style:dashed;
*/
/*    border-bottom: 1px dashed #b1b1b1;*/
    display: block;
/*    background:  url(/img2/left_menu_nav.gif);*/
    padding: 12px 0 0 16px;
    background: #c52324;
    }
    
#left_menu_nav li a:hover {
    color: #ba1213;
    text-decoration: none;
    background: #ffffff url(/img4/left_menu_nav_red.gif) 4px 14px no-repeat;
    padding: 12px 0 0 16px;
    background-color:#ffffff;
/*
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
*/

    }
/*--- End left menu nav --*/


Скачать с Яндекс.Диска


Ставив лайк Вы помогаете сайту :)

Статьи по теме:
Рейтинг:
5.0/5 из 2
Категория: Готовые элементы для сайта | Добавил: zaharchuk (07.02.2015)
Просмотров: 1093
Комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]