При створенні меню сайту можна зіткнутися з проблемою обмеженості простору, необхідністю економити місце і уникати нагромадження зайвої інформації. Все це зручно вирішується елементами, які ховаються, коли не потрібні. Якщо хочеться уникнути використання скриптів, таке меню можна створити за допомогою засобів 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, розташований в ньому, стає видимим.
Додайте за бажанням параметри кольору або зображення для фону, горизонтальні риси, шрифт посилань і інші властивості, що визначають зовнішній вигляд меню.
Як добути вугілля в Minecraft
Що таке грошова реформа
Як робити трюки з йо-йо
Як навчитися спілкуватися з протилежною статтю
Чому не відкривається сторінка в інтернеті
Хрізотілцементние труби: види, монтаж, застосування в будівництві
Як лікувати застуду у хом'яка