HTML/CSS

Горизонтальное меню justify

В отличии предыдущего меню, где есть отступы у каждого элемента, часто возникает задача сделать резиновое меню без них. Пункты меню должно идти с одинаковыми интервалами и без отступов по бокам.

Сделать его можно с помощью text-align: justify и псевдо-свойств :before и :after.

1

Пример 1

<div class="menu">
    <div class="wrp">
        <ul>
            <li><a href="#">Каталог</a></li>
            <li><a href="#">Акции</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
    </div>
</div>
.wrp {    
    width: 600px;
    margin: 0 auto
}
.menu {
    background: #b92525;
    padding: 20px 0 0 0;
    height: 40px;
}
.menu ul {    
    text-align: justify;
    margin: 0;
    padding: 0;  
}
.menu ul:before{
    content: '';
    display: block;
    width: 100%;
    height: 0;
}
.menu ul:after {
    content: '';
    width: 100%;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    display: inline-block;
}
.menu li {    
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu a {
    font-size: 16px;
    color: #fff;
}
2

Пример 2

Добавление разделителей между пунктами меню.

<div class="menu">
    <div class="wrp">
        <ul>
            <li><a href="#">Каталог</a></li>
            <li><span></span></li>
            <li><a href="#">Акции</a></li>
            <li><span></span></li>
            <li><a href="#">Отзывы</a></li>
            <li><span></span></li>
            <li><a href="#">Контакты</a></li>
        </ul>
    </div>
</div>
.wrp {    
    width: 600px;
    margin: 0 auto
}
.menu {
    background: #b92525;
    padding: 20px 0 0 0;
    height: 40px;
}
.menu ul {    
    text-align: justify;
    margin: 0;
    padding: 0;  
}
.menu ul:before{
    content: '';
    display: block;
    width: 100%;
    height: 0;
}
.menu ul:after {
    content: '';
    width: 100%;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    display: inline-block;
}
.menu li {    
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu a {
    font-size: 16px;
    color: #fff;
}
.menu span {            
    display: inline-block;
    width: 8px;
    height: 8px;
    background: url(/img/menu-marker.png) 0 0 no-repeat;
}
24 января 2019
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.