При створенні меню сайту можна зіткнутися з проблемою обмеженості простору, необхідністю економити місце і уникати нагромадження зайвої інформації. Все це зручно вирішується елементами, які ховаються, коли не потрібні. Якщо хочеться уникнути використання скриптів, таке меню можна створити за допомогою засобів html і css.
Інструкція
Складіть меню, визначте його структуру. Розташуйте елементи в зручному для майбутнього користувача порядку. Подумайте над зрозумілими і грамотними назвами розділів. Визначте пункти, які повинні бути випадають, і підпункти, які будуть в цих списках.
Оформіть придуману структуру за допомогою html-тегів. Це буде виглядати приблизно так:
Помістіть все меню в блок
. Задайте ідентифікатор id, що дозволить надалі привласнювати особливості тільки цього блоку, не зачіпаючи інші. Вкажіть в ідентифікаторі якесь ім'я, властивості для якого опишіть в наступних кроках.
Створіть списки, де
- - сам список, а
- - кожна з його рядків. Додайте для всіх майбутніх ссилкок, які повинні створювати меню, що випадає, свій список з підпунктами. Перетворіть назви пунктів меню в посилання, уклавши їх в тег . Надайте його параметру href адресу сторінки, на яку буде вказувати посилання.
Задайте властивості списку через css, внісши їх у css-файл: #vmenu ul {margin: 0px; padding: 0px; list-style: none; width: 250px; }. Задайте рівними нулю відступи padding - відступ всередині і margin - відступ зовні елемента списку. Вкажіть list-style - стиль маркованого списку, за замовчуванням з точками, які при значенні none забираються. Введіть ширину списку width.
Додайте властивості елемента списку: #vmenu ul li {position: relative-}. Вкажіть параметр позиціонування, тобто розташування елементів position. Надайте йому відносне значення relative, щоб визначати розташування меню, що випадає щодо початкового. Створюване меню буде вертикальним.
Вкажіть властивості для списку, розташованого в елементі іншого списку: #vmenu li ul {position: absolute- left: 250px; top: 0- display: none; }. Надайте параметру позиціонування position значення absolute, щоб здійснювати абсолютне позиціонування підміню щодо пункту меню. Задайте розташування за допомогою відступу простору зліва left і зверху top. Визначте параметр відображення елемента display як none, оскільки спочатку випадає список не повинен бути видний.
Внесіть параметри для посилань: #vmenu ul li a {display: block- padding: 5px; text-decoration: none; color: # 606060- background: # d8d8d8-}. Надайте параметру відображення display значення block, що робить елемент блоковим. При цьому він видимий і поводиться, як блок. Задайте відступ padding, колір тексту посилання color, колір фону посилання background, стиль посилання text-decoration. Значенням none прибирає підкреслення за замовчуванням.
Задайте дію при наведенні курсору: #vmenu li: hover ul {display: block-}. Вкажіть, що при наведенні курсору на рядок списку li, список ul, розташований в ньому, стає видимим.
Додайте за бажанням параметри кольору або зображення для фону, горизонтальні риси, шрифт посилань і інші властивості, що визначають зовнішній вигляд меню.
Як швидко зняти алергію
Як обчислити титр
Як варити молочну вермішель
Як виділяється причетний оборот
Як підключити ігрову приставку до інтернету
Як накачати прес і прибрати боки
Квасоля: калорійність і її корисні властивості