воскресенье, 24 января 2016 г.

Разные виды горизонтального меню

ДемоИсходники
Для начала создадим обычный маркированный список, содержащий пункты нашего меню:
<ul id="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Новости</a></li>
    <li><a href="#">Контакты</a></li>
    <li><a href="#">О сайте</a></li>
</ul>
Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором "menu".


По умолчанию без каких-либо правил CSS он будет выглядеть следующим образом:
Как видно элементы списка выстроились вертикально друг под другом и если нам нужно вертикальное меню, то если стилизовать нужным образом ссылки (добавить фоновый цвет, рамки, отступы, изменить шрифт) можно получить привлекательную навигационную панель. 
Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline илиinline-block. Я буду использовать правило display:inline-block. Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:
<style>
    ul#menu li{
        display:inline-block; /* расположить пункты горизонтально */
    }
</style>
Теперь элементы списка будут расположены по горизонтали:
Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт <code>li</code>, уберем подчеркивание ссылок, настроим отступы и др.:
<style>
    #menu, #menu li {
        margin: 0; /* убрать внутренние отступы */
        padding: 0; /* убрать внешние отступы */
    }
    #menu {
        background: #03658e; /* цвет фона навигационной панели */
    }
    #menu li{
        display:inline-block; /* расположить пункты горизонтально */
        text-align: center; /* текст горизонтально по центру */
    }
    #menu a {
        display: block; /* ссылка растягивается на весь пункт li */
        padding: 5px 15px; /* задаем внутренние отступы */
        color: #fff; /* цвет текста */
        text-decoration: none; /* убрать нижнее подчёркивание у ссылок */
    }
    #menu a:hover {
        background: #8AB8CC; /* фон пунктов при наведении */
    }
</style>
В итоге получится такое привлекательное меню:
Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.

Горизонтальное меню по центру

JavaScript, jQuery и Ajax все сразу в одном видеокурсе!
Выравнять меню по центру можно так:
<style>
    #menu, #menu li {
        margin: 0;
       padding: 0;
    }
    #menu {
        text-align: center; /* пункты и текст горизонтально по центру */
       background: #03658e;
    }
    #menu li{
        display:inline-block;
        text-align: center;
    }
    #menu a {
        display: block;
        padding: 5px 15px;
        color: #fff;
       font-size:150%;
       text-decoration: none;
    }
    #menu a:hover {
        background: #8AB8CC;
    }
</style>
Результат:
Либо так:
<style>
    #menu, #menu li {
        margin: 0;
        padding: 0;
    }
    #menu {
        max-width: 550px; /* ограничение длины панели */
        margin: 0 auto; /* навигационная панель по центру страницы */
        text-align: center;
        background: #03658e;
    }
    #menu li{
        display:inline-block;
        text-align: center;
    }
    #menu a {
        display: block;
        padding: 5px 15px;
        color: #fff;
        font-size:150%;
        text-decoration: none;
    }
    #menu a:hover {
        background: #8AB8CC;
    }
</style>
Результат:

Горизонтальное меню с пунктами одинаковой ширины

JavaScript, jQuery и Ajax все сразу в одном видеокурсе!
Чтобы сделать все пункты меню одинакового размера указываем для них нужный размер. Только главное чтобы в сумме размеры пунктов не превышали размер всей панели. Можно сделать так:
<style>
    #menu, #menu li {
        margin: 0;
        padding: 0;
    }
    #menu {
        text-align: center;
        background: #03658e;
    }
    #menu li{
        display:inline-block;
        text-align: center;
        width: 20%; /* задаем размер пункта можно в пикселях*/
    }
    #menu a {
        display: block;
        padding: 5px 15px;
        color: #fff;
        font-size:150%;
        text-decoration: none;
    }
    #menu a:hover {
        background: #8AB8CC;
    }
</style>
Результат:
Или так:
<style>
    #menu, #menu li {
        margin: 0;
        padding: 0;
    }
    #menu {
        text-align: center;
    }
    #menu li{
        display:inline-block;
        text-align: center;
        width: 20%; /* задаем размер пункта можно в пикселях*/
    }
    #menu a {
        display: block;
        padding: 5px 15px;
        color: #fff;
        font-size:150%;
        text-decoration: none;
        background: #03658e;
        margin-right: 5px; /* добавляем отступы между пунктами */
    }
    #menu a:hover {
        background: #8AB8CC;
    }
</style>
Результат:
Если добавить немного трансформации:
<style>
    #menu, #menu li {
        margin: 0;
        padding: 0;
    }
    #menu {
        text-align: center;
    }
    #menu li{
        display:inline-block;
        text-align: center;
        width: 20%;
        -webkit-transform: skewX (-45deg); /* Трансформация Для Safari и Chrome */
        -moz-transform: skewX (-45deg); /* Трансформация Для Firefox */
        -o-transform: skewX (-45deg); /* Трансформация Для Opera */
        -ms-transform: skewX (-45deg); /* Трансформация Для IE */
        transform: skewX (-45deg); /* Трансформация CSS3 */
        background: #03658e;
    }
    #menu li a {
        display: block;
        padding: 5px 15px;
        color: #fff;
        font-size:150%;
        text-decoration: none;
        margin-left : 5px;
        -webkit-transform: skewX (45deg); /* Трансформация Для Safari и Chrome */
        -moz-transform: skewX (45deg); /* Трансформация Для Firefox */
        -o-transform: skewX (45deg); /* Трансформация Для Opera */
        -ms-transform: skewX (45deg); /* Трансформация Для IE */
        transform: skewX (45deg); /* Трансформация CSS3 */
    }
    #menu a:hover {
        -webkit-transform: skewX (45deg); /* Трансформация Для Safari и Chrome */
        -moz-transform: skewX (45deg); /* Трансформация Для Firefox */
        -o-transform: skewX (45deg); /* Трансформация Для Opera */
        -ms-transform: skewX (45deg); /* Трансформация Для IE */
        transform: skewX (45deg); /* Трансформация CSS3 */
    }
    #menu li:hover {
        background: #8AB8CC;
        -webkit-transform: skewX (-45deg); /* Трансформация Для Safari и Chrome */
        -moz-transform: skewX (-45deg); /* Трансформация Для Firefox */
        -o-transform: skewX (-45deg); /* Трансформация Для Opera */
        -ms-transform: skewX (-45deg); /* Трансформация Для IE */
        transform: skewX (-45deg); /* Трансформация CSS3 */
    }
</style>
то получим меню со скошенными углами:
Автор: на
Ярлыки: , ,

Комментариев нет:

Отправить комментарий