Владимир Родионов
ваш частный маркетолог

г. Н. Новгород,
ул. Есенина, 30

Звоните Пн-Вс: 10 - 20

+7 (952) 769-95-98
Заказать звонок сейчас

Меню сайта

Внутреннее, якорное меню с иконками

Первоначальная цель — создание хорошего якорного меню с иконками.

Вот так оно будет выглядеть:

Подключаем CSS стили:

/* Меню внутреннее  начало*/

ul.list-vrv{padding:0;margin:0;float:left;width:100%;}
ul.list-vrv li {
    background-image: none;
    /* display: inline-block; */
    vertical-align: top;
    width: 132px;
    height: 140px;
    margin: 2px 11px 10px;
    float: left;
    list-style: none;
    cursor: pointer;
}
ul.list-vrv li:last-child{margin: 2px 0 15px 0;}
ul.list-vrv li:first-child{margin: 2px 14px 15px 2px;}
ul.list-vrv li:hover {
    outline: 2px solid #CE1C1C!important;
}
.list-vrv li a:hover .h5-vrv h5{color:#000;}
ul.list-vrv li .image-vrv{}
ul.list-vrv li .image-vrv img{width: 74%;border-radius: 45px;border: 8px solid white;margin: 3px auto 0;text-align: center; display: block;}
ul.list-vrv li .h5-vrv{padding: 0 5px;}
ul.list-vrv li .h5-vrv h5{margin:2px 0 0;color:#343434;font-size:12px;font-weight:700;font-family:'Orienta',sans-serif;overflow:hidden;padding: 0 5px;font-size: 15px;    text-align: center;}
ul.list-vrv li .h5-vrv h5:hover{}
.list-vrv li:hover a .h5-vrv h5{text-decoration:underline;color:#023B8C;    }
  
/* Меню внутреннее от web-ptica.ru - конец */

Прописываем HTML-код:

Иконки должны быть не больше чем 100 на 100 пикселей.

<ul class="list-vrv"><!-- якорное меню web-ptica.ru -->
<li><a class="thumbnail" href="#"> <!--target="_blank"-->
<div class="image-vrv"><img alt="заказ газели" src="//www.gorky-transit.ru/filesvrv/fury.jpg" /></div>
<div class="h5-vrv">
<h5 itemprop="name">Заказать газель</h5>
</div>
</a></li>

<li><a class="thumbnail" href="#"> <!--target="_blank"-->
<div class="image-vrv"><img alt="заказ газели" src="//www.gorky-transit.ru/filesvrv/fury.jpg" /></div>
<div class="h5-vrv">
<h5 itemprop="name">Заказать фуру</h5>
</div>
</a></li>
</ul>

Комплексное продвижение сайта!

Синергетический эффект:

- Анализ конкурентов
- Поисковое SEO
- Яндекс Директ
-Техническая поддержка!
Обратная связь

Как удобнее связаться?

Cогласен с условиями политики конфиденциальности данных