Випадаюче меню

Головна Веб-дизайн та оптимізація сайтів Фотолабораторія Радіотехніка Корисні програми Розробка сайтів

Випадаюче меню. Створення за допомогою HTML та CSS

При розробці навігації для сайтів широко застосовують меню, що випадають (Drop-Down Menus). У цьому часто спостерігається некоректний висновок у браузерах: спотворення, довільне зміна становища чи мерехтіння меню. Іноді за потрібним рядком доводиться ганятися, як за тарганом, що тікає. Тим часом класичний варіант випадаючого меню, виконаний простими засобами HTML і CSS, практично позбавлений цих недоліків. Створення такого меню, що випадає, як горизонтального, так і вертикального, не становить великої праці.

  • Посилання
  • Покажчик
  • Посилання 1
  • Посилання 2
  • Посилання 1
  • Посилання 2
  • Посилання 3

    • • • Посилання 3 • Посилання 4 • Посилання 5

    За допомогоюправив CSS видалімо відступи та маркери у створеному ненумерованому списку і задамо ширину пунктів меню 150px.

    ul < margin: 0; padding: 0; list-style: none; width: 150px; >

    ПосиланняПокажчик Посилання 1 Посилання 2 Посилання 3 Посилання 4 Посилання 5

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

    Далі задаємо становище елементів списку. За замовчуванням вони вже розташовані вертикально один під одним, оскільки задані тегом

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

    Крім того, небажано прописувати для гіперпосилань у меню, що випадає, атрибут title , так як, по-перше, ці підказки часто закривають рядки, а по-друге, в деяких браузерах (Firefox3.5) при попаданні покажчика миші на таку підказку випадає меню пропадає.

    Остаточно ми маємо наступний набір правил CSS для меню, що випадає (для наочності введені межі блоків):

    ul < margin: 0; padding: 0; list-style: none; width: 150px; > ul li < position: relative; border: 1px solid; Padding:10px; > *+html ul li < float: left; > *+html ul li < width: 100%; > li ul < position: absolute; ліфт: 149px; top: 0px; display: none; width: 100px; > ul li a < display: block;

    > ul li a:hover < display: block;

    > li:hover ul < display: block; >

    • Посилання
    • Покажчик
    • Посилання 1
    • Посилання 2
  • Посилання 3
  • Посилання 4
  • Посилання 5

    • Для простоти опису створення меню, що випадає, я не став вводити декоративне оформлення осередків. Впевнений, що ви можете це зробити самостійно. Тим більше, що всі ці фенечки – фон, розмір шрифту, колір посилань, межі блоків тощо.має відповідати дизайну конкретного сайту. Зверніть увагу, що відступ для меню, що випадає, повинен бути менше ширини основного меню, щоб не було просвіту між ними. Якщо цього не зробити, то при попаданні курсору на цей просвіт меню зникає. В даному випадку встановлено відступleft: 149px ;. при ширині головного меню 150рх.

    Описаний "класичний" варіант меню, що випадає, працює швидко і чітко на відміну від варіантів, побудованих на скриптах. Додаткову привабливість має і використання лише засобів HTML та CSS. Простіше нікуди!

    Насамкінець, ще один камінь у городIE. Не забувайте, що цей бразер не любить документи, написані вHTML 4.01 Transitional та його поведінка абсолютно непередбачувана. Намагайтеся оформлювати ваші сторінки хоча б уXHTML 1.0 Transitional, аInternet Explorer must die!

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