Создание горизонтального выпадающего меню на чистом CSS

Создание горизонтального выпадающего меню на чистом CSSДля того, чтобы сделать горизонтальное выпадающее меню на чистом CSS 3, для начала нужно сделать html разметку меню такого вида:

<div class="menu">
<ul class="my_menu"> 
    <li class="category">
        <a href="/">Главная</a>
    </li>
    <li class="category">
        <a>Категории</a>
        <ul>	
            <li class="cat-item">
                <a href="">CMS</a>
            </li>
            <li class="cat-item">
                <a href="">PHP</a>
            </li>
            <li class="cat-item">
                <a href="">SQL</a>
            </li>
        </ul> 
    </li> 
    <li class="category">
        <a>Тэги</a>  
        <ul>	
            <li class="cat-item">
                <a href="">Apache</a>
            </li>
            <li class="cat-item">
                <a href="">linux</a>
            </li>
            <li class="cat-item">
                <a href="">windows</a>
            </li>
        </ul> 
    </li>
</ul>
</div>

В результате мы получим следующее:

Это обычное вертикальное меню ul, состоящее из блочных li элементов. С помощью css давайте превратим его в горизонтальное. Для этого к li элементам с классом «category» добавим новые css свойства:

.my_menu .category {
    float: left;
    list-style: none;
}

Теперь элементы с классом category расположатся друг за другом и меню станет горизонтальным.

Добавим новые css свойства к подменю — сделаем его невидимым по умолчанию:

.my_menu .category > ul {
     display: none;
     position: absolute;
}

Делаем подменю выпадающим при наведении курсора мыши, используя css событие hover:

.my_menu .category:hover > ul {
     display: block; 
}

Вот и все. Теперь осталось добавить стили на свое усмотрение, чтобы меню выглядело красиво. Ниже приведу простой пример оформления горизонтального выпадающего меню:

.menu {
        background-image: -webkit-linear-gradient(top,#3c3c3c 0,#222 100%);
        background-image: -o-linear-gradient(top,#3c3c3c 0,#222 100%);
        background-image: -webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222));
        background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        background-repeat: repeat-x;
        border-color: #101010;
        border: 1px solid;
    }

    .my_menu {
        display: inline-block;
        margin: 0px;
    }

    .my_menu .category {
        float: left;
        list-style: none;
        padding: 15px 15px;
        cursor: pointer;
    }

    .my_menu .category:hover {
        background: black;
    }

    .my_menu .category > ul {
       display: none;
       position: absolute;
       list-style: none;
       padding-left: 0px;
       border: 1px solid black;
       margin-top: 15px;
       margin-left: -15px;
       z-index: 999;
    }

    .my_menu .category:hover > ul {
       display: block; 
    }

    .my_menu ul {
        background: black;
    }

    .my_menu a {
        color: white;
        text-decoration: none;
    }
     
    li.cat-item {
        padding: 5px 10px;
    }
    
    li.cat-item:hover {
        background: white;
    }
    
    li.cat-item:hover a {
        color: black;
    }

Чтобы центрировать меню посередине блока div, нужно добавить следующее css свойство:

.menu {
   text-align: center;
}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *