Подобряване на джаджата на персонализираното меню

Персонализирано меню в WordPress - codex.wordpress.org/Function_Reference/wp_nav_menu - прекрасно нещо, всякакви елементи от менюто и връзки във всякаква комбинация и йерархия. Уиджетът „Персонализирано меню“ предоставя още повече опции за организиране на навигацията в сайта. Показването на произволно меню в страничната лента обаче се извършва „както е“, т.е. стиловете на темата се прилагат, разбира се, и под-елементите в повечето случаи са разположени правилно - отдясно на родителския елемент (в зависимост от темата), но липсва някакво взаимодействие с потребителя.

Можете да добавите стил, който ви позволява да отваряте под-елементи, когато задържите курсора на мишката върху елемент от менюто, съдържащ под-елементи. За темата Twenty Ten - wordpress.org/extend/themes/twentyten, този стилов лист изглежда така:

За съжаление има и минуси. И основните са, че всички елементи се разширяват, а елементите от менюто, съдържащи подпозиции, продължават да съдържат активна връзка, която в повечето случаи, например със заглавия, не е необходима. Да, можете да добавяте стилове и да разкривате само следния поделемент при задържане на курсора, но предлагам друго решение.

Добавете стилове към файла style.css:

Добавете скрипта към шаблона footer.php:

Ако идентификаторите и класовете от примера по-горе съвпадат с тези на вашата тема и jQuery е включен, трябва да сте доволни от резултата. Ако не, поправката не би трябвало да е трудна.

Работещ пример може да се види и изпробва тук - jsfiddle.net/skodnik/LHcU7

Този скрипт може да бъде допълнен с малки обяснителни пиктограми „+“ за елемент, съдържащ под-елементи, „-“ за разширен елемент и т.н.

Разгледайте предишните публикации:

Здравейте, казвам се Юджийн

Занимавам се със създаването, поддръжката и развитието на съществуващитесайтове, уеб оформление, разработка и превод на теми за WordPress. Какво друго?

---