Падащи мега менюта- страхотна дизайнерска находка. Навигация на сайтасъдържането на голям брой страници винаги е било проблем. Класическите статични менюта като карта на сайта се разрастват бързо с нарастването на броя на страниците и заемат много място. Динамичните падащи менюта могат значително да спестят място на страницата, но използваемостта е пожертвана - навигацията изисква активна и доста прецизна работа с мишката. Малко пропуснато и се разкрива грешното меню.
Импулсът за развитието на концепцията за мега-меню вероятно е лентовият интерфейс Microsoft офис 2007. Тази концепция е точно по средата между обикновено статично меню и динамично падащо меню. От една страна, такова меню е доста информативно и интуитивно, от друга страна, значително намалява необходимите манипулации с мишката. Разширявайки се, той може да използва цялото налично пространство на екрана, което позволява на потребителя да разглежда всички елементи, предлагани в този контекст, и, ако е необходимо, да се скрива.
Както и да е, мега-менюто сега е, както се казва, в тенденция и ако все още не сте го използвали, тогава трябва да го разгледате по-отблизо.
UberMenu: Плъгин за мега меню на WordPress
Този многофункционален плъгин може спокойно да бъде поставен на първо място в този преглед: той създава пълно мега меню, има невероятно количество различни опции, включително контрол на цвета на фона и шрифта, размер на шрифта и т.н. И всичко това става от мощен и удобен панел за настройки.В допълнение, менюто има и редица други страхотни функции, като например:
- Вградена адаптивна мрежа
- Индивидуална настройка на ширината на всяка колона, както и настройка на ширината по подразбиране
- Комбиниране на елементи от менюто в групи
- Центриране на елементи от менюто в хоризонтални редове
- Персонализирани фонови изображения
- Подменюта с възможност за превъртане, съдържащи голям брой елементи.
Цена: $19
Мега главно меню
Много популярен и широко използван плъгин Мега главно менюзнае как да намери баланс между функционалност и простота. На ваше разположение са над 10 различни инструмента за създаване на падащи менюта, които могат да съдържат текст, изображения, връзки и уиджети. Освен това неограничени цветови настройки и над 600 шрифта на Google.Цена: $15
Мега меню Liquida
Мега меню Liquida- модерен и многофункционален плъгин, който ще отговаря и на двете обикновени потребителии разработчици - може лесно да се вгради във вашата собствена разработена тема.Плъгинът предлага широка гама от опции за създаване на менюс модерен и стилен дизайн: вертикален или хоризонтална ориентация, възможност за включване в елементи от менюто връзки, изображения и дори продуктови карти на WooCommerceили Easy Digital Downloads, които могат да бъдат полезни при разработване на онлайн магазини.
Цена: $19
Sky Mega Menu
Три варианта на дизайн за мобилни устройства, 9 цветови схеми, персонализирана мрежа, форми и 360 векторни икони. Този комплект позволява на Sky Mega Menu да заеме достойното си място сред себеподобните си.Цена: $6
WP мега меню
Плъгин от категорията must have. Много настройки и опции, работа с категории, подкатегории и съобщения, SEO оптимизацияи две предварително зададени цветови схеми (тъмна и светла), които обаче могат лесно да се променят по ваш вкус.Цена: $29
NOO Меню
За да разберете панела с настройки NOO Менюдори не е нужно да четете документацията - всичко е толкова интуитивно. Имайки под ръка предварителен прегледв реално време можете просто да промените стойностите и да преместите плъзгачите, докато наблюдавате ефекта. Цветовата схема може да се променя напълно произволно и всяка опция да се записва под собствено име, като броят на тези опции е неограничен.Съдържанието на елементите от менюто може да бъде текст, връзки, изображения, видеоклипове, формуляри и различни уиджети. Той използва своя собствена решетка с 12 колони, за да побере всичко.
Цена: $15
Hero Menu – Адаптивен плъгин за мега меню на WordPress
Hero Menu ви позволява да свързвате връзки към публикации, категории, външни URL адреси към елементи от менюто, както и да показвате публикации в блогове в тях заедно с представено изображение. Последната версия обяви пълна поддръжка за платформата WooCommerce. За удобна работаима вграден редактор за плъзгане и пускане.Дизайнът е модерен и стилен и разбира се изцяло.
Цена: $19
Superfly - Адаптивна приставка за меню на WordPress
Така нареченият fly меню- най-новата тенденция в света на уеб дизайна. Такова меню тихо „дреме“ в ъгъла на страницата под формата на икона, като почти не заема място и когато задържите курсора на мишката върху него, то се отваря, измествайки елементите на страницата и не ги припокрива.Един от представителите на този тип мега-менюта е Superfly – Responsive WordPress Menu Plugin. Впечатляващ инструмент както по отношение на дизайн, така и по отношение на функции.
Цена: $22
Превключване на менюто
С нарастващата популярност на мобилните устройства изскачащите (или контекстните) менюта стават важни, тъй като могат да спестят много място на екрана.Менюто за превключване е много просто, минималистично меню, който въпреки това перфектно се справя с основната си функция.
Цена: $5
WP плаващо меню Pro
WP плаващо меню Proе плъгин 2 в 1. Меню-навигатор за едностраничен сайти стикери за менюта. Нещо повече, с този плъгин можете, поне визуално, да трансформирате традиционния си сайт в модерен сайт с една страница. WP Floating Menu Pro ще осигури плавно превъртанеот една част на страницата в друга.На разположение на разработчика, WP Floating Menu Pro предлага 13 и 7 различни опции за местоположение на страницата, опции за персонализиране, цветове, съдържание и брой елементи.
За екрани, по-малки от 480px, е възможно автоматично изключванеменю.
Цена: $17
WordPress плъгин Flexi Menu
Flexi Menu е 5 различни, напълно адаптивни типа менюта: fly меню, широк (ширина на страницата), широк+описания, широк+изображения и вертикален.Цена: $14
Max Mega Menu (безплатно)
Много добре плъгин с редактор на менюта за плъзгане и пусканеи възможност за вграждане на почти всяка джаджа в елементите на менюто - от формуляри за контакт до карти на Google.Възможност за автоматично преобразуване на вече съществуващи обикновени менюта в едно мега меню с пълен контрол върху процеса на преобразуване и запазване или преназначаване на подходящи действия.
Съвсем наскоро такава функция като Mega Menu беше много само от първокласни плъгини и теми. Но днес ще ви представя, скъпи читатели, два напълно безплатни плъгина, които ще ви позволят бързо, лесно и разбира се, напълно безплатно, да изградите мощно навигационно меню на вашия сайт, не толкова по-лошо от платените колеги.
Какво изобщо е мега меню? Да, същото нещо, обичайното меню за навигация, с което вероятно сте попадали и конфигурирали повече от веднъж. Просто за разлика от стандартната функционалност, има и такива допълнителни функцииза персонализиране и показване на отделни елементи. Например добавяне не само на вертикално, но и на хоризонтално подменю, добавяне на икони и отделни изображения към менюто, фина настройка на външния вид на всички елементи от менюто и т.н. Всичко това е в нашите плъгини, разгледани днес.
Друга чудесна възможност да добавите страхотно меню за навигация към вашия сайт с плъгин е Mega Menu от WooRockets.com. Инсталирането и активирането на плъгина е стандартно.
Този плъгин е малко по-труден за овладяване, но също така предлага повече възможности от конкурента, описан по-горе. Тук конструкцията на менюто е много подобна на конструкцията на страници в стандартния Visual Composer.
Отидете в секцията WR мега менювъв вашия админ панел и щракнете върху Добави нов. Падаме на нова страницаза съставяне на ново меню. Тези, които вече са се занимавали с композитори с влачене и пускане, веднага ще се почувстват като у дома си. Процесът на изграждане на меню не се различава много от изграждането на страница.
В началото се уверете, че в горната част на менюто − местоположениеМенюто е точно това, от което се нуждаете. Или щракнете върху Местоположение на управлениетоза да изберете меню.
Щракнете - Добавяне на елементи изберете в изскачащия прозорец типа съдържание, което искате да добавите към менюто. Горе вляво можете да изберете една от стандартните опции или да добавите WordPress widget.
Ако е необходимо, добавете редове с разделяне на необходимия брой колони. Отляво има раздели за плъзгане на елементи от менюто нагоре или надолу, а отдясно са раздели, където можете да активирате редактиране или изтриване. Не забравяйте да натиснете обичайния бутон вдясно - Публикувайтеили - Опресняванеда запазят резултатите от своя труд.
Като цяло, всякакви текстове, снимки и, ако желаете, всякакви джаджи могат лесно да бъдат поставени в новото ви меню. Изгледът на менюто може да бъде променен чрез щракване върху бутона. Стайлингили до вмъкнете таблиците си, като щракнете върху бутона Персонализиран CSS.
Много функционално нещо, накратко. Не е за нищо, че авторите, в допълнение към този плъгин, също имат: форма за контакт и, разбира се, композитор, който очевидно е послужил като основа за плъгина за мега меню. Тук можете да видите работеща демонстрация в целия й блясък.
Разкошни и мощни добавки, с които на практика можете да създадете менюто на вашите мечти. Единственото нещо, което може леко да засенчи радостта на потребителите, е въпросът за съвместимостта с различни теми. За съжаление, доколкото си спомням, премиум добавките понякога имаха този проблем. Тествах и двата плъгина на темата по подразбиране и не забелязах никакви проблеми или грешки. Какво искате, приятели!
Здравейте! В живота ми, както винаги, има много събития, така че е много трудно да се намери време за блог. Вчера купихме билети за Шри Ланка и скоро ще отлетим за 4 месеца, елате ни на гости! И сега търся най-красивата булчинска рокля :))
Днес ще говорим за това как да създадете меню в WordPress, както и да добавите тези блокове в произволни области на шаблона.
Ще научим как да персонализираме менюто и да го редактираме както намерим за добре.
Редактиране и персонализиране на менюта в WordPress
Първо, нека анализираме функционалността, достъпна за нас в административния панел на блога. В нови шаблони, съвместими с най-новите версии WordPress, показването на менюто е доста просто и настройката не е твърде трудна.
След като сме създали дъщерна тема, която може да бъде модифицирана, без да засяга основната тема, нека добавим следната функция към нейния файл function.php.
| 1 2 3 | register_nav_menus( array ( "допълнително меню" => __( "Допълнително меню" , „Името на вашата тема“ ) ) ) ; |
register_nav_menus(array("additionalmenu" => __("Additional Menu", "Your Theme Name")));
Ако не създавате дъщерна тема, добавете я към основния файл с функции на вашата тема.
Тази функция ще ни позволи да добавим допълнително меню на WordPress към нашия шаблон и да създадем друга област за него.
След като добавите, отидете в админ панела в "Управление на области":
Трябва да се появи допълнителна тематична област със заглавието, което сме дали във функцията.
Щракнете върху „Използване на ново меню“, ако искате да промените секциите за допълнителната област, или изберете „Начало“. След това същите секции ще бъдат показани в новата област като в основното меню.
В нашия случай създаваме ново меню, наречено Допълнително:
Изберете областта с тема "Допълнително меню" за него.
Но сега трябва да свържем тази област с шаблонни блокове. Например, трябва да направим допълнително меню под хедъра на WordPress сайт. Отидете до файла header.php или го копирайте в дъщерната тема. Добавете следното след етикета body:
| 1 2 3 | <div id = "допълнително меню" > ( array( "theme_location" =>"допълнително меню")); ?></div> |
Да видим резултата:
Имаме допълнително меню над заглавката. Сега трябва да зададем стилове за него, да подравним елементите на линия и да спуснем блока под заглавката.
Правим следните промени във файла style.css:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #additionalmenu nav (ширина: 940px; /* ширина на контейнера */марж: 0 авто; ) #additionalmenu li ( display : inline ; padding : 10px ; /* padding */ margin : 20px 0 ; ) #additionalmenu ( width : 100% ; top : 420px ; /* Отстъп от горния ръб */цвят на фона: #000; /* фонов цвят */ позиция: относителна; ) |
#additionalmenu nav (ширина: 940px; /*ширина на контейнера */ margin: 0 auto; ) #additionalmenu li ( display: inline; padding: 10px; /* padding */ margin: 20px 0; ) #additionalmenu ( width: 100% ; отгоре: 420px; /* горно поле */ цвят на фона: #000; /* цвят на фона */ позиция: относителна; )
Да видим какво се случи:
Изгледът на менюто, което създадохме, все още е далеч от идеалното, но с необходимото внимание можете да го приведете в подходящия вид за вашия блог.
Уиджети и плъгини за добавяне на менюта към WordPress
Предлагам да гледате видеоклип за създаване на меню в WordPress:
В статията за джаджата "Персонализирано меню" беше споменато. Нека го анализираме по-подробно.
Отидете на „Външен вид“ – „Виджети“, намерете приспособлението „Персонализирано меню“ и го плъзнете в зоната, налична за вашата тема и подходяща за блога:
В нашия случай блокът от менюто се добавя към страничната лента. За него сме избрали секции от създадения от нас Допълнителен блок.
Съответно в страничната лента вдясно ще се покаже следният блок:
В допълнение към стандартната джаджа, вградена в темата, има и много допълнителни добавки, предназначени за създаване различни видовеменюта: вертикални, хоризонтални, падащи и др.
Например, ето плъгин за създаване на вертикално многостепенно меню в WordPress: Navgoco Vertical Multilevel Slide Menu.
Или по-персонализиращото се приспособление за падащо меню.
Widgets с JQwery ефекти за менюта също са популярни, например: JQuery Slick Menu Widget.
Нека вземем пример как работи.
След като инсталирате джаджата на jQuery Slick Menu, отидете на „Външен вид“ – „Виджети“.
Сред списъка с налични джаджи трябва да се появи нова, инсталирана от нас. Преместете го в достъпна област, в нашия случай страничната лента:
Нека отворим настройките му:
Избираме името на менюто (секциите, които създадохме), Tab Text - името на блока, който ще се показва на сайта, местоположението (ще изберем Left - вляво), Offset - отстъпа от горен ръб в пиксели, Animation Speed - скорост на анимация (бързо). Можете да изберете Auto-Close Menu, за да накарате блока да изчезне автоматично. И изберете цвета на блока. Щракнете върху запазване и вижте резултата:
От лявата страна на заглавката се появи изтеглящо се меню. Когато щракнете върху езика, се появяват секциите:
Когато щракнете отново, блокът ще изчезне отново.
Това е само един от начините за инсталиране, редактиране и показване на менюта в WordPress.
Изберете най-подходящия и удобен начин за създаване на меню за вашия WordPress блог. Късмет!
Това може да стане със стилове.
Но трябва да разберете, че имате меню, след което трябва да го преместите от горната част към страничната лента, която все още нямате.
Е, това е, ако тази тема позволява, свържете страничната лента от дясната страна и прехвърлете менюто към нея.
И за да го направите вертикален, просто добавете / променете CSS
Основна навигация ul li, .secondary-navigation ul li ( дисплей: блок !важно; )
Е, след това трябва да промените малко отстъпите и другите свойства.
Може би съм те разбрал погрешно, но моето меню Max mega вече е в областта на лявата колона (черно е, подредено е на 2 реда поради ограничената област и е хоризонтално по подразбиране в плъгина), добавих го там чрез widgets , в горната част имам стандартно меню с теми и ми трябват и двете, сега ще пробвам CSS, благодаря
Може би и аз съм те разбрал погрешно.
Говорех за менюто, което имате на екрана в хоризонталния горен блок със светлозелен цвят "Чай Кафе Сладкиши ..."
Но след като препрочетох отговора ти разбирам, че говорим за различни менюта.
На екрана, който виждате от лявата страна, това е мега менюто Max, но не го виждам на сайта във вашата връзка.
И защото И аз не го видях вчера, така че не погледнах екрана.
Сега и аз не гледам.
Постоянно се опитвам да правя нещо, слагам и махам разни неща, докато измисля как да направя това меню вертикално, търся друго подходящо. За това меню може ли да се приложи същото css решение, както си написал? Бихте ли ми казали в коя част от кода да вмъкна тези редове, в кода на самия плъгин? Местоположението има ли значение?
Отидох на Plugins-edit-selected Max mega menu, след което има следните секции:
css
megamenu.scss
reset.scss
превключване-блокове.scss
администратор
mixin.scss
Не намерих подобни линии в нито един от тях за коригиране
Аз съм просто пълен noob и не разбрах защо трябва да се показва за мен, очевидно за да погледна кода и да го предложа. Намерих отговора на администратора във форума за поддръжка на Max Mega Menu, че вертикалният е наличен само в Pro (платената) версия, така че засега ще трябва да бъде изоставен. Бихте ли препоръчали подобен плъгин, критериите са следните:
- възможност за инсталиране в страничната лента
- менюто трябва да е падащо
- при превключване към някоя от категориите, така че да остане отворена на този етап и да не се затваря напълно при опресняване на страницата
Точно.
Без да видите точно това меню е невъзможно да давате съвети и препоръки. Възможно е няколко реда в CSS да са достатъчни. Но не е факт.
Въпреки че, ако наистина планирате да използвате това Max Mega Menu, разкриващо всичките му функции, тогава $23 за такъв продукт изобщо не са много. Заслужава си.
Искате ли да персонализирате навигационните менюта на WordPress, за да промените цвета им или външен вид? Вашата WordPress тема управлява външния вид на навигационното меню на вашия сайт. Можете лесно да го настроите с използвайки CSSза да отговарят на вашите изисквания. В тази статия ще ви покажем как да персонализирате стила на вашето навигационно меню на WordPress.
Метод 1: Използване на ръчна промяна на стила на навигационното меню на WordPress
Този метод изисква да редактирате файлове с теми на WordPress. Трябва да го използвате само ако ви е удобно да редактирате кода и разбирате как .
По най-добрия начинправете персонализирани настройки във вашата тема за wordpress е . Ако променяте само CSS, тогава можете да видите нашето ръководство за това как да направите това, без да променяте файловете на темата.
Навигационното меню в WordPress се показва като неподреден списък (списък с водещи символи).
Ако току-що сте използвали следния таг, той ще покаже списък без CSS класове, свързани с него.
Вашият неподреден списък ще има име на клас „меню“, като всеки елемент от списъка има свой собствен клас.
Това може да работи, ако имате само едно местоположение на менюто. Повечето теми обаче имат няколко места, където можете да покажете менюто за навигация.
Използването само на CSS класовете по подразбиране може да е в конфликт с менютата на други места.
Ето защо трябва да дефинирате CSS класа и позицията на менюто. Вероятно вашата WordPress тема вече прави това, като добавя навигационно меню с код като този:
"primary", "menu_class" => "primary-menu",)); ?>
Този код казва на WordPress, че тази тема показва стартовото меню. Той също така ще добави CSS класа на основното меню към навигацията на менюто.
Вече можете да стилизирате вашето навигационно меню с тази CSS структура.
#header .primary-menu() // клас контейнер #header .primary-menu ul () // клас контейнер първи неподреден списък #header .primary-menu ul ul () // неподреден списък в рамките на неподреден списък #header .primary -menu li () // всеки навигационен елемент #header .primary-menu li a () // всеки навигационен елемент anchor #header .primary-menu li ul () // неподреден списък, ако има падащи елементи #header .primary -menu li li () // всеки падащ навигационен елемент #header .primary-menu li li a () // всеки падащ надолу елемент за навигация котва
Заменете #header с класа или идентификатора на контейнера, използван от вашата тема на WordPress.
Тази структура ще ви помогне напълно да промените външния вид на навигационното меню.
Има обаче други класове, които автоматично се добавят с с помощта на WordPressза всеки елемент от менюто и меню. Тези класове ви позволяват допълнително да персонализирате навигационното меню.
Current_page_item() // Клас за текущата страница .current-cat() // Клас за текущата категория .current-menu-item() // Клас за всеки друг текущ елемент от менюто .menu-item-type-taxonomy() // Клас за категория .menu-item-type-post_type() // Клас за страници .menu-item-type-custom() // Клас за всеки потребителски елемент, който сте добавили .menu-item-home() // Клас за началната връзка
WordPress също ви позволява да добавяте CSS класове към отделни елементи от менюто от административната област.
Можете да използвате тази функция за стилизиране на елементи от менюто, като добавяне на икони към изображение с помощта на менюто или просто промяна на цвета, за да изпъкне елементът от менюто.
Да отидем на страницата Външен вид » Менютаи натиснете бутона.
След като сте проверили тези настройки, ще видите, че ще бъде добавено допълнително поле, когато редактирате всеки отделен елемент от менюто.
Сега можете да използвате този CSS клас във вашата таблица със стилове, за да добавите персонализиран CSS. Това ще засегне само елемента от менюто с добавения от вас CSS клас.
Метод 2: Персонализиране на стила на менюто в WordPress с помощта на добавки
Вашата WordPress тема използва стил за навигационното меню. Много начинаещи не се чувстват удобно да редактират файлове с теми или да пишат CSS сами.
Точно тогава идва на помощ WordPress плъгинстилизиране на менюто. Това ви спестява от редактиране на файлове с теми или писане на код.
Първо трябва да инсталирате и активирате плъгина CSS Hero. За още подробна информациявижте нашето ръководство стъпка по стъпка как да.
CSS Hero е премиум WordPress плъгин, който ви позволява да проектирате свой собствен WordPress темабез да напишете нито един ред код (без HTML или CSS).
При активиране ще бъдете пренасочени, за да получите своя CSS Hero ключ. Просто следвайте инструкциите на екрана и ще бъдете пренасочени обратно към вашия сайт с няколко кликвания.
Сега трябва да кликнете върху бутона CSS Hero във вашия административен панел на WordPress.
CSS Hero предлага WYSIWYG редактор (каквото виждате, това получавате). Щракването върху бутона ще ви отведе до вашия сайт с плаваща лента с инструменти на CSS Hero, видима на екрана.
Трябва да кликнете върху синята икона в горната част, за да започнете да редактирате.
Посочете мишката към вашето навигационно меню и CSS Hero ще го маркира, показвайки границите около него. Когато щракнете върху маркираното меню за навигация, то ще ви покаже елементите, които можете да редактирате.
На екранната снимка по-горе ни показва елемента от менюто, навигацията в менюто, контейнера за навигация в менюто и т.н.
Да приемем, че искаме да променим цвета на текста на всички елементи в менюто за навигация. В този случай ще изберем навигационно меню, което засяга всички менюта.
Сега CSS Hero ще ви покаже различни свойства, които могат да се редактират като текст, фон, граници, полета, подложки и др.
Можете да щракнете върху всяко свойство, което искате да промените. CSS Hero ще ви покаже прост интерфейс, където можете да правите вашите промени.
На екранната снимка по-горе имаме избран текст и той ни показа хубав интерфейс за избор на шрифтове, промяна на цвета на текста, размера и други свойства.
Когато промените бъдат направени, ще можете да ги видите на живо във визуализацията на темата.
След като сте доволни от промените, щракнете върху бутона Запазване в лентата с инструменти на CSS Hero, за да запазите промените си.
Най-доброто при използването на този метод е, че можете лесно да отмените всички промени, които правите. CSS Hero пази пълна хронология на всички ваши промени и можете да се връщате напред и назад между тези промени.
Надяваме се, че тази статия ви е помогнала да научите как да стилизирате вашето навигационно меню в WordPress.