Робимо css-меню, що випадає з основного

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

Заходячи на сторінку сайту, користувач бачить її зміст. Це як зміст книги, яку ви збираєтеся прочитати. Зміст складається з різних наборів посилань, які переводять користувача на інші сторінки ресурсу або навіть на інші сайти. Такі посилання допомагають користувачам здійснювати навігацію по інтернету. Групуються посилання в окремі блоки, що представляють меню сайту.

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

css меню, що випадає

Горизонтальне CSS меню, що випадає

Горизонтальне меню, що випадає застосовується для того, щоб упорядкувати навігаційну структуру сайту. Не слід зловживати кількістю рівнів для вкладення, їх повинно бути не більше двох. При більшій кількості рівнів користувачеві буде набагато складніше відшукати необхідну інформацію. Далі більш детально розглянемо методику створення меню.

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

Щоб створити меню, що випадає CSS, знадобиться:

  • файл HTML;
  • файл CSS;
  • зображення для фону.

Зображення для фону є допоміжним елементом для поліпшення дизайну і додання меню стильності.

меню, що випадає css

Створення HTML-файлу

Сторінки будь-якого сайту можуть бути статичними або динамічними. Статична сторінка сайту при перегляді в браузері виводиться в тому вигляді, в якому вона спочатку створена. Динамічна сторінка створюється в момент її відкриття в браузері з окремих підключаються сторінок і додаткового виведення інформації з бази даних. Але в будь-якому випадку, якщо через браузер відкрити сторінку з вихідним кодом, то буде виведена HTML-сторінка гіпертекстової розмітки. Для створення меню необхідно розробити HTML-сторінку і зберегти її в HTML-файл. Створюємо з-меню, що випадає з основного цим способом. HTML-сторінки можна створювати в будь-яких текстових редакторах, але краще використовувати спеціалізовані: Notepad ++ або Adobe Dremweaver CSS. Відкриваємо в редакторі порожню сторінку, вписуємо необхідний код і зберігаємо її під ім`ям myindex.html. Коментарі можна додавати прямо в коді, між спеціальними тегами, які використовуються в HTML для цих цілей.

Розмітка сторінки при створенні випадає горизонтального CSS-меню буде відрізнятися від звичайного стандартного меню, так як до потрібних обліковим елементам

  • необхідно буде додати вкладені ненумеровані або нумеровані списки
      або
        .
  • код HTML

    Слід зауважити, що в HTML всі конструкції між дужок lt;> називаються тегами. Теги можуть бути одинарними і парними. Парний тег обов`язково містить дві пари дужок lt;>, причому в другій парі конструкція всередині починається зі слеша /. У парному тезі перший тег відкриває, а другий - що закриває.



    Створюємо код:

    CSS-меню, що випадає з основного

  • Головна сайту
  • Мій пункт меню 1


  • Мій підпункт 1
  • Мій підпункт 2
  • Мій пункт меню 2
  • Мій підпункт 1
  • Мій підпункт 2
  • Мій підпункт 3
  • Мій підпункт 4
  • Мій підпункт 5
  • Мій підпункт 6
  • Так можна створити нескінченну кількість пунктів і підпунктів меню. В самому кінці закриваємо всі парні теги.

    вертикальне меню, що випадає на css

    Створення CSS-файлу

    У файлі HTML був підключений файл стилів style.css, необхідний не тільки для правильного позиціонування меню на сторінці сайту, а й для додання меню красивого виду, створення неповторного дизайну сайту. Файл CSS створюється в такому ж редакторі, як і файл HTML, але, на відміну від сторінки HTML, користувач побачить тільки результат роботи файлу стилів на сторінку, що. Крім цього, при додаванні коментарів в CSS використовується конструкція / * коментувати ... * /.

    код CSS

    Створюємо код:

    / * Меню, що випадає CSS * /
    body {/ * Стиль для тіла сторінки сайту * /
    background: # 0814da- / * Колір фону * /
    margin: 0- / * Зовнішні відступи * /
    padding: 0- / * Внутрішні відступи * /
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif- / * Сімейство шрифтів * /
    }
    .primer {/ * всього блоку меню * /
    position: relative- / * Позиціонування щодо вихідного місця * /
    background: # ebecf7 url (../ images / vanbackground.jpg) - / * Фон з картинкою для всього меню * /
    width: 525px; / * Ширина всього блоку меню * /
    height: 384px; / * Висота всього блоку меню * /
    border: 1px # 000 solid- / * Товщина і стиль кордону всього блоку меню * /
    margin: 21px auto-
    padding: 16px;
    }
    / * Стилі для меню * /
    .navigator, .navigator ul {/ * Стиль блоку з ненумерований списком * /
    list-style: none; / * Скасування маркерів для списку * /
    margin: 0-
    padding: 0-
    }
    .navigator {/ * Стиль навігаційного блоку * /
    position: relative-
    }
    .navigator ul {/ * Стиль ненумерованого списку * /
    height: 0- / * По висоті * /
    left: 0- / * Зліва * /
    overflow: hidden- / * Ховається частина блоку, якщо не поміщається повністю в відведеному місці * /
    position: absolute- / * Робимо абсолютне позиціонування * /
    top: 47px; / * Зверху * /
    }
    .navigator li {/ * Стиль пунктів ненумерованого списку * /
    float: left; / * Обтікання з лівого боку * /
    position: relative-
    }
    .navigator li a {/ * Стиль посилань пунктів ненумерованого списку * /
    background-color: # 7c75b7- / * Колір фону * /
    border: 1px solid # 7c75b7-
    color: # fbfbff-
    display: block- / * Показ блоком. * /
    font-size: 15px; / * Вибір розміру шрифту * /
    line-height: 34px; /* Міжрядковий інтервал */
    padding: 6px 21px;
    text-decoration: none; / * Текст без оформлення * /
    transition: 0.6s-
    }
    .navigator li: hover> a {/ * Стиль пунктів ненумерованого списку при наведенні * /
    background: # 8fcb38-
    border-color: # 7c75b7-
    color: # fbfbff-
    }
    .navigator li: hover ul.vipadnoe {/ * Стиль меню, що випадає при наведенні * /
    height: auto-
    width: 181px;
    }
    .navigator ul li {/ * Стиль списку і пунктів * /
    -moz-transition: 0.7s-
    }
    .navigator li ul li {/ * Стиль пункт-список-пункт * /
    -moz-transition-delay: 1s-
    }
    .navigator li: hover ul li {/ * Стиль при наведенні мишки * /
    }
    .navigator ul li a {/ * Стиль список-пункт-посилання * /
    background: # 7c75b7-
    border-color: # 7c75b7-
    color: # fbfbff-
    line-height: 2px;
    -moz-transition: 1.7s-
    -o-transition: 1.7s-
    -webkit-transition: 1.7s-
    transition: 1.7s-
    }
    .navigator li: hover ul li a {/ * Стиль при наведенні пункт-список-пункт-посилання * /
    line-height: 36px;
    }
    .navigator ul li a: hover {/ * Стиль список-пункт плюс посилання при наведенні * /
    background: # 8fcb39-
    background-image: rgba (41,137,216,0.5) -}

    css меню, що випадає при наведенні

    Після того як були створені файли myindex.html і style.css, їх потрібно помістити в окрему папку. Створюємо для зручності в папці "Мої документи" окрему папку demo, а в ній папку CSS, куди поміщаємо файл style.css, і папку images, куди поміщаємо малюнок фону, вказаний у файлі стилів. Для файлу myindex.html не створимо ще однієї окремої папки і поміщаємо його в спочатку створену папку demo. Тепер, відкривши в браузері файл myindex.html, можна буде побачити горизонтальне CSS-меню, що випадає при наведенні. От і все.

    Таким же способом створюється вертикальне меню, що випадає на CSS, але тільки для нього необхідно буде розробити кілька інший файл стилів.



    Увага, тільки СЬОГОДНІ!

    Увага, тільки СЬОГОДНІ!