Створення меню за допомогою CSS та JavaScript
Рецензії на книги
Стандарти від W3C
Просте горизонтальне меню
Це просте горизонтальне меню з дуже коротким і простим кодом.
Можливості
Проста, зручна та красива навігація на сайті з невеликою кількістю розділів.
Принцип роботи
2. Тепер нам треба вибудувати його в лінію і прибрати маркер, для цього напишемо наступні стилі:
3. Оскільки ми не можемо використовувати блокові властивості стилів для inline елементів, зробимо з тега a блоковий елемент, а щоб вони вишикувалися в один рядок, додамо властивість float:left :
4. Ось, власне і все, залишилося навести красу.
4.1 описуємо стилі для тексту посилань:
4.2 додаємо внутрішні відступи та фон для посилання:
4.3 описуємо псевдоклас hover:
Кросбраузерність
IE 5+; Opera 7+; FF 1+; Mozilla 1+.
Що треба мати на увазі
Не забудьте наступний блоковий елемент після меню прописати в стилях властивість clear:both , щоб припинити обтікання.
Використовуючи графічний фон, можна досягти дуже гарних ефектів.
Вертикальне меню
Це вертикальне меню, що дозволяє розмістити велику кількість посилань на обмеженій площі. Ідею цього меню я запозичив у пана Nick Rigby, доопрацювавши меню для своїх цілей.
Можливості
Проста, зручна та красива навігація на сайті з великою кількістю розділів.
Принцип роботи
1. Створимо тіло нашого меню:
2. За допомогою стилів приберемо підменю:
3. Використовуючи псевдоклас hover, зробимо підменю видимим при наведенні миші:
5. Ось власне і все, залишилося навести красу:
Кросбраузерність
IE 5+; Opera 7+; FF 1+; Mozilla 1+.
Що треба мати на увазі
Це меню має два дуже серйозні недоліки: якщо список розділів або підрозділів дуже великий, то при відкритті підменю з'являється смуга прокручування, а коли ви хочете прокрутити сторінку, меню закривається; якщо у користувача старого браузера не працює це меню, він взагалі не зможе переміщатися по вашому сайту.
Вертикальне меню, що розкривається
Це вертикальне меню, що дозволяє розмістити велику кількість посилань на обмеженій площі. Фактично це доопрацювання попереднього меню, що дозволяє прибрати всі його недоліки.
Можливості
Проста, зручна та красива навігація на сайті з великою кількістю розділів, яка працюватиме у всіх браузерах.
Принцип роботи
1. Створимо тіло нашого меню:
4. Поставимо дзвінок цієї функції на завантаження сторінки.
5. Ось власне і все, залишилося навести красу:
Кросбраузерність
IE 5+; Opera 7+; FF 1+; Mozilla 1+.
- Helen
Я дуже довго шукала таке тлумачне пояснення. У мене все вийшло. Дякую ще раз
Автору ДЯКУЮ. Безмірно вдячний, так і продовжуй))) Дуже зрозуміло і максимально просто пояснив. Ще раз дякую.
Вітаю! Дуже цікаво! Я новачок і роблю перший сайт на WordPress. Будь ласка, підкажіть, як і Антону, куди вставляється код вертикального меню
Як зробити так, щоб меню розбивалося ще на понпункт, тобто з такою конструкцією.
вкладка _підпункт 1 _підпункт 2 _підпнкт підпункту 1
Меню при натисканні хороші, але у вигляді такої конструкції я його не застосую в WordPress. Меню тамзгенерується автоматично і я не зможу посилати поставити onclick. Які ще способи є, щоб меню відкривалося за посиланням?
Велике дякую!
Все чудово, єдине, що не зрозуміла, що таке «.over» у тій частині коду, де ми прописуємо псевдоклас для li:
#menu_body li:hover ul, #menu_body li.over ul display: block; > Поясніть, будь ласка, що таке li.over, що він робить?
Цій статті 10 років. Краще пошукати свіжіший матеріал.
Sq.Piglet ваша порада для наведених нижче наслідків ?
Щоб на старих браузерах (30% користувачів у всьому світі) нічого не працювало і потенційний клієнт більше ніколи не повернувся на твій супер новий сайт.