Створюємо випадаюче меню навігації на CSS3

40

В черговий раз звертаюся до теми створення меню навігації для сайту виключно засобами CSS3. Практично всі сучасні браузери підтримують основні функції css3, це дозволяє більш гнучко налаштовувати ефекти і зовнішній вигляд навігаційних панелей, без підключення javascript і яких би то не було додаткових файлів зображень, використовуючи в роботі тільки команди CSS3.
Сьогодні ми розглянемо структуру і техніку виконання меню навігації з випадаючими підпунктами. Зовнішній вигляд панелі оформимо за допомогою функції лінійного градієнта, закругливши кути і додамо трохи тіні для шрифту.

Выпадающее меню

По накатаній, як завжди для початку, можете подивитися приклад роботи готового випадаючого меню на демо-сторінці, а для подальшого розбору виконуючого коду, завантажити вихідні коди.

ДемоСкачать

HTML-Розмітка

Всю структуру меню сформував у вигляді неупорядочного списку, помістивши його в блок div з певним класом «menu-nav», для прив’язки до CSS.

<div class="menu-nav">
<ul>
<li class="first"><a href="#">Головна</a></li>
<li><a href="#">Уроки</a>
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Flash</a></li>
</ul>
</li>
<li><a href="#">Відео</a>
<ul>
<li><a href="#">Youtube</a></li>
<li><a href="#">Vimeo</a></li>
<li><a href="#">Rutube</a></li>
</ul>
</li>
<li><a href="#">Програми</a>
<ul>
<li><a href="#">Система</a></li>
<li><a href="#">Безпека</a></li>
<li><a href="#">Мультимедіа</a></li>
<li><a href="#">Інтернет</a></li>
</ul>
</li>
<li><a href="#">Онлайн</a>
<ul>
<li><a href="#">Сервіси</a></li>
</ul>
</li>
<li><a href="#">WordPress</a>
<ul>
<li><a href="#">Плагіни</a></li>
<li><a href="#">Теми WP</a></li>
</ul>
</li>
<li><a href="#">Сайт</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</div>
  • Головна
  • Уроки
    • HTML/CSS
    • Photoshop
    • Dreamweaver
    • Flash
  • Відео
    • Youtube
    • Vimeo
    • Rutube
  • Програми
    • Система
    • Безпека
    • Мультимедіа
    • Інтернет
  • Онлайн
    • Сервіси
  • WordPress
    • Плагіни
    • Теми WP
  • Про Сайт
  • Контакти

Як видно з прикладу коду, для створення панелей, що випадають, до деяких пунктів меню

  • додав ще один невеликий шматок простого коду, формувального ненумерованний список:

    <ul>
    <li>Посилання1</li>
    <li>Посилання2</li>
    <li>Посилання3</li>
    <li>Посилання4</li>
    </ul>
    • Ref1
    • Посилання2
    • Ссылка3
    • Ссылка4

    Тепер, ви можете додавати випадаючі списки до будь-якого основного пункту меню. Якщо ви подивіться на код нижче ви побачите, як до пункту (4), доданий випадаючий список підпунктів:

    <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
    <li>Пункт 4
    <ul>
    <li>Підпункт 1</li>
    <li>Підпункт 2</li>
    <li>Підпункт 3</li>
    <li>Підпункт 4</li>
    </ul>
    </li>
    </ul>
    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4
      • Підпункт 1
      • Підпункт 2
      • Підпункт 3
      • Підпункт 4

    Без стилів CSS, вся ця конструкція буде виглядати всього лише списком. Давайте ж подивимося як з допомогою CSS оформити наше випадаюче меню.

    CSS

    Ми використовуємо CSS, щоб оформити зовнішній вигляд і додати функціональності нашому меню. Перше, що вам необхідно зробити, це створити файл CSS, обізвати і зберегти його у форматі типу: style.css.

    Примітка: Переконайтеся, що для виклику CSS файлу в голові вашого HTML документа, між тегами ….., розміщений наступний код:

    <link rel="stylesheet" type="text/css" href="style.css"/>

    Тепер, коли у вас є файл style.css, ми можемо почати додавати стилі, експериментувати з параметрами і функціями. Для більшої ясності додав коментарі до деякими параметрами коду CSS:

    /*База*/
    * {margin: 0; padding: 0;}
    body{
    font-family:Helvetica,Arial, sans-serif;
    font-size:14px;
    background: #474747 url(bg.png);
    }
    #container {
     width:960px; /*Ширина контейнера*/
    margin: 10px auto;
    }
    /*Меню*/
    .menu-nav {
    position:relative;
    width: 100%; /*Ширина панелі меню*/
    height:50px;
    font-size:14px;
    color:#999;
     margin: 0 auto;
    margin-top: 20px;
    /*Колір і градієнт фону панелі меню*/
    background: #395593;
     background: -moz-linear-gradient(top, #647db5, #395593);
     background: -webkit-gradient(linear, left, top, left bottom, from(#647db5), to(#395593));
     background-image: -o-linear-gradient(top,rgb(100, 125, 181), rgb(57, 85, 147));
    text-shadow: 0 -1px 0 #111;
     border: 1px solid #444;
    /*Закруглені кути панелі меню*/
    border-radius: 8px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    -webkit-border-radius: 8px;
    }
    .menu-nav ul {
    list-style:none;
    color: #FFF;
    }
    .menu-nav ul li {
    float:left;
    position:relative;
    }
    .menu-nav ul li a {
    border-right:1px solid #364f87;
     border-left:1px solid #7189c0;
     padding:17px;
    display:block;
    text-decoration:none;
    text-align:center;
    color:#FFF;
     background: #395593;
     background: -moz-linear-gradient(top, #647db5, #395593);
     background: -webkit-gradient(linear, left, top, left bottom, from(#647db5), to(#395593));
     background-image: -o-linear-gradient(top,rgb(100, 125, 181), rgb(57, 85, 147));
    text-shadow: 0 -1px 0 #111;
    }
    .menu-nav li.first a {
    border-radius: 8px 0 0 8px;
    -moz-border-radius: 8px 0 0 8px;
    -khtml-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    }
    /*Колір і градієнт фону при наведенні*/
    .menu-nav ul li a:hover {
    background: #647db5;
     background: -moz-linear-gradient(top, #395593, #647db5);
     background: -webkit-gradient(linear, left, top, left bottom, from(#395593), to(#647db5));
     background-image: -o-linear-gradient(top,rgb(57, 85, 147), rgb(100, 125, 181));
    color:#fff;
    }
    .menu-nav ul ul li {
    display: none;
    }
    .menu-nav ul li:hover ul {
    display: block;
    position: absolute;
    min-width:200px;
    left:0;
    margin-top: -1px;
    }
    .menu-nav ul li:hover ul li a {
    display:block;
    color:#ffffff;
     width: 110px;
    text-align: center;
    border-bottom: 1px solid #283f74;
     border-top: 1px solid #366ea6;
     background: #364f87;
    }
    .menu-nav ul ul li li:first-child a {
    border-top:none;
    }
    .menu-nav ul ul li li:last-child a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    }
    .menu-nav ul li:hover ul li a:hover {
    background:#395593;
     color:#ffffff;
    }

    /*База*/
    * {margin: 0; padding: 0;}
    body{
    font-family:Helvetica,Arial, sans-serif;
    font-size:14px;
    background: #474747 url(bg.png);
    }
    #container {
    width:960px; /*Ширина контейнера*/
    margin: 10px auto;
    }
    /*Меню*/
    .menu-nav {
    position:relative;
    width: 100%; /*Ширина панелі меню*/
    height:50px;
    font-size:14px;
    color:#999;
    margin: 0 auto;
    margin-top: 20px;
    /*Колір і градієнт фону панелі меню*/
    background: #395593;
    background: -moz-linear-gradient(top, #647db5, #395593);
    background: -webkit-gradient(linear, left, top, left bottom, from(#647db5), to(#395593));
    background-image: -o-linear-gradient(top,rgb(100, 125, 181), rgb(57, 85, 147));
    text-shadow: 0 -1px 0 #111;
    border: 1px solid #444;
    /*Закруглені кути панелі меню*/
    border-radius: 8px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    -webkit-border-radius: 8px;
    }
    .menu-nav ul {
    list-style:none;
    color: #FFF;
    }
    .menu-nav ul li {
    float:left;
    position:relative;
    }
    .menu-nav ul li a {
    border-right:1px solid #364f87;
    border-left:1px solid #7189c0;
    padding:17px;
    display:block;
    text-decoration:none;
    text-align:center;
    color:#FFF;
    background: #395593;
    background: -moz-linear-gradient(top, #647db5, #395593);
    background: -webkit-gradient(linear, left, top, left bottom, from(#647db5), to(#395593));
    background-image: -o-linear-gradient(top,rgb(100, 125, 181), rgb(57, 85, 147));
    text-shadow: 0 -1px 0 #111;
    }
    .menu-nav li.first a {
    border-radius: 8px 0 0 8px;
    -moz-border-radius: 8px 0 0 8px;
    -khtml-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    }
    /*Колір і градієнт фону при наведенні*/
    .menu-nav ul li a:hover {
    background: #647db5;
    background: -moz-linear-gradient(top, #395593, #647db5);
    background: -webkit-gradient(linear, left, top, left bottom, from(#395593), to(#647db5));
    background-image: -o-linear-gradient(top,rgb(57, 85, 147), rgb(100, 125, 181));
    color:#fff;
    }
    .menu-nav ul ul li {
    display: none;
    }
    .menu-nav ul li:hover ul {
    display: block;
    position: absolute;
    min-width:200px;
    left:0;
    margin-top: -1px;
    }
    .menu-nav ul li:hover ul li a {
    display:block;
    color:#ffffff;
    width: 110px;
    text-align: center;
    border-bottom: 1px solid #283f74;
    border-top: 1px solid #366ea6;
    background: #364f87;
    }
    .menu-nav ul ul li li:first-child a {
    border-top:none;
    }
    .menu-nav ul ul li li:last-child a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    }
    .menu-nav ul li:hover ul li a:hover {
    background:#395593;
    color:#ffffff;
    }

    Дивитися ДемоСкачать Исходники

    На цьому власне і все. Після того як ви розмістите код, наведений вище у таблиці стилів, меню з випадаючим списком буде повністю оформлено і готове до роботи. Використовуючи чистий стиль CSS3, неварто забувати, що не всі браузери однаково добре підтримують нові стандарти. Наприклад, у старих версіях IE, дане меню буде выгладеть трохи інакше, хоча і для цього «гальма прогресу» є свої милиці ))).

    З Повагою, Андрій .

    Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: