Красиве меню, що випадає - кілька прикладів меню для сайту, допомога по wordpress
Поміркувавши, раптом зрозумів, що запхати таку велику тему в один або два уроки не реально, з цього це буде початкова сторінка для всіх постів про що випадають меню.
Моя мета: зібрати якомога більше варіантів створення випадаючих меню на цій сторінці.
В макетах буде використано:
Слідкуйте за оновленням сторінки.
Горизонтальне меню, що випадає
Горизонтальне меню CSS
Ні для кого не секрет, що CSS 3 та HTML 5 зробили крок далеко за межі своїх попередників. наприклад:
сьогодні вам не потрібно перекручуватися з вирізанням округлених куточків для меню, досить скористатися простим CSS властивість border-radius
хоча ще 5 - 10 років тому різали ми картинки і собачих їх як завгодно :-).
Гаразд, досить лірики. Головне, це той факт, що сучасні браузери підтримують CSS 3 та HTML 5.
Горизонтальне меню, що випадає на css робиться за допомогою псевдокласу: hover. При чому раніше, браузери навішували ця подія виключно на тег і
У цьому пості ви знайдете:
- Просте горизонтальне меню, що випадає.
- Горизонтальне меню, що випадає на всю ширину.
- Меню, що випадає з роздільниками.
- Багаторівневе меню, що випадає.
Всі приклади випадають меню побудовані на списках ul li, я принципово не використовую тег table, так як таке меню не буде універсальним для установки на сайт ВП.
Вертикальне меню акордеон на jQuery
до меню Одним з найбільш використовуваних видів меню, на російськомовних сайтах, є вертикальне меню акордеон.
Хто не в курсі, - це меню розкривається всередині блоку при кліці на батьківський елемент без переходу за посиланням. Якщо клікнути на наступний батьківський елемент то попередній закриється, а новий буде відкриватися паралельно.
Пропоную вам подивитися 2 види таких меню:
- без використання складних стилі і фонів
- красивіший з фоновим зображенням і картинками покажчиками.
до меню Зазвичай, я розповідаю в своїх уроках про CMS WordPress, так як позиціонують себе як фахівця з Вордпресс. У цьому уроці, також хотілося б поговорити про що випадають меню WP.
По суті, меню, що випадає wordpress ні чим не відрізняється від менюшек для інших CMS, головне правильно вивести і додати його.
Хоча, іноді бувають випадки, коли інтегрувати html меню у WordPress це суцільний геморой.
Буває приносять верстку, а там ось такий диво хтмл код:
Ну і як таке чудо, можна по-людськи вставити в WP - по суті без переробки ніяк. Ну і починається метушня з замовником. Він же верстку в Равшана з Джамшут замовив, так би мовити бюджетний варіант на базі говнокода.
У цьому записі можна подивитися як правильно в wordpress додати меню. Саме в цьому пості нас цікавить робота функції wordpress:
Всі приклади вище, меню, що випадає на списках, ідеально підходять для установки на wordpress.
Коротка інструкція меню, що випадає wordpress - установка
1) до меню Знаходимо відповідний для себе шаблон меню вище.
2) Завантажуємо приклад до себе на комп, разархивируем його.
3) На місце, де буде виводиться меню встановлюємо хтмл код, який відповідає за меню. Він починається і закінчується в моїх прикладах тегом (Тег і ідентифікатор обов'язкові для копіювання, інакше стилі не будуть працювати)
5) Стилі з прикладу потрібно скопіювати у файл style.css вашої теми.
Стилі для body і контейнера можна не копіювати.
6) Для виведення меню використовуємо функцію wp_nav_menu (), її потрібно вставити замість хтмл який знаходиться між .
На цьому у мене все, як спасибі можна поділитися посиланням зі своїми друзями в соц. мережах:
Слідкуйте за цим постом, у міру можливості, я буду додавати сюди посилання на нові шаблони меню, що випадають.
Як автоматично Не підкажете так як не знаю.
Але у ВП є окрема функція для виведення архівів, почитайте про неї wp_get_archives
Цікаві варіанти)) А як щодо варіанту меню, що випадає, в якому показуються мініатюри і останні статті з кожної рубрики?
Доброго дня.
Думаю що це реально, сам механізм випадашкі можна робити так само, а можна і за подією клік, але показати вам такий приклад зараз не можу, так як його немає 🙂 Можливо в недалекому майбутньому напишу щось подібне.
Добрий. А як зробити, щоб це меню, що випадає на мобільній версії виглядало добре?
Доброго дня.
Ну це меню для деськтопной версії, для мобільного я зазвичай обнуляють всі стилі і виводжу меню поверх всього. Стилі задаю щоб всі пункти були по ширині вікна. Для активації меню використовую значок гамбургер або бутерброд, хто як назве 🙂
Іноді мобільне меню і десктоп це різні меню та за кодом і за змістом, одне просто ховається
Я повний "чайник", тому у мене є два дуже дурних питання:
1. Навіщо писати html код, якщо потім замість нього пишеться одна з точки php коду?
2. Як вордпресс дізнається, яким було меню до видалення html коду?
Доброго дня.
1) ХТМЛ версію простіше тестувати і правити. + Якщо я дам користувачам для скачування пхп файли, то на локальному компі ви їх не зможете запустити, тільки на сервері.
2) ВП ніяк не впізнає який у вас був хтмл код. Ми пишемо хтмл ідентичний тому (або практично ідентичний) що видасть ВП.
Потрібно зробити меню, що випадає на 3 рівні.
З горизонтального блоку випадає вертикальний, а з вертикального, в сторону ще один вертикальний.
Візьметеся за таке завдання? Скільки за ціною?
Скажу вам по секрету приклади у вас дуже гарні. Прям так і хочеться взяти ваше меню, що випадає і вставити собі на сайт.
З таким підходом тільки в радянській їдальні пиріжки ліпити для студентів