WP Mega Menu-plug-in: functionaliteit, installatie, configuratie. Horizontaal vervolgkeuzemenu Super WordPress-plug-in Max Mega Menu Stap voor stap

Dropdown-megamenu's- een uitstekende designvondst. Sitenavigatie met een groot aantal pagina's is altijd een probleem geweest. Klassieke statische sitemap-achtige menu's groeien snel naarmate het aantal pagina's groeit en veel ruimte in beslag neemt. Dynamische vervolgkeuzemenu's kunnen aanzienlijk paginaruimte besparen, maar het gebruiksgemak wordt opgeofferd - actieve en redelijk nauwkeurige muisbediening is vereist voor navigatie. Ik heb een beetje gemist en het verkeerde menu wordt onthuld.

De ontwikkeling van het megamenu-concept is waarschijnlijk geïnspireerd op de lintinterface van Microsoft Office 2007. Dit concept valt precies tussen een eenvoudig statisch menu en een dynamisch vervolgkeuzemenu in. Aan de ene kant is zo'n menu behoorlijk informatief en intuïtief, aan de andere kant vermindert het de nodige muismanipulaties aanzienlijk. Uitbreidend kan het alle beschikbare schermruimte gebruiken, waardoor de gebruiker alle aangeboden punten in deze context kan bekijken en, indien nodig, kan verbergen.

Hoe het ook zij, maar het megamenu is nu, zoals ze zeggen, in een trend en als je het nog niet hebt gebruikt, moet je het eens van dichterbij bekijken.

UberMenu: WordPress Mega Menu-plug-in

Daarnaast heeft het menu nog een aantal andere leuke features zoals:

• Ingebouwd responsief raster
• Pas de breedte van elke kolom aan en stel de standaardbreedte in
• Menu-items combineren in groepen
• Menu-items centreren in horizontale lijnen
• Aangepaste achtergrondafbeeldingen
• Scrollende submenu's met een groot aantal items.

Kosten: $ 19

Mega-hoofdmenu

Kosten: $ 15

Liquida Mega-menu

De plug-in biedt volop mogelijkheden voor: een menu maken met een modern en stijlvol ontwerp: verticale of horizontale oriëntatie, de mogelijkheid om in menu-items op te nemen links, afbeeldingen en zelfs WooCommerce-productkaarten of Easy Digital Downloads, wat handig kan zijn bij het ontwikkelen van online winkels.

Kosten: $ 19

Sky mega-menu

Kosten: $ 6

WP Mega-menu

Kosten: $ 29

NOO-menu

De inhoud van de menu-items kan zijn: tekst, links, afbeeldingen, video's, formulieren en verschillende widgets... Het gebruikt zijn eigen 12-koloms raster om dit alles te huisvesten.

Kosten: $ 15

Hero Menu - Responsieve WordPress Mega Menu-plug-in

De inrichting is modern en stijlvol en natuurlijk helemaal.

Kosten: $ 19

Superfly - Responsieve WordPress Menu Plugin

Een van de vertegenwoordigers van dit soort megamenu's is Superfly - Responsive WordPress Menu Plugin. Een indrukwekkend hulpmiddel in zowel ontwerp als prestaties.

Kosten: $ 22

Menu wisselen

Wisselmenu is heel eenvoudig minimalistisch menu die niettemin zijn hoofdfunctie uitstekend vervult.

Kosten: $ 5

WP Zwevend Menu Pro

Ter beschikking van de ontwikkelaar biedt WP Floating Menu Pro 13 en 7 verschillende lay-outs op de pagina, aanpassingsopties, kleuren, inhoud en aantal items.
Voor schermen met een resolutie van minder dan 480px is er een optie om het menu automatisch uit te schakelen.

Kosten: $ 17

Flexi Menu WordPress-plug-in

Kosten: $ 14

Max Mega-menu (gratis)

In staat om bestaande reguliere menu's automatisch om te zetten in één megamenu met volledige controle over het conversieproces en het opslaan of opnieuw toewijzen van passende acties.

Dit kan met behulp van stijlen.
Maar je moet begrijpen dat je het menu hebt, dan moet je van boven naar de zijbalk gaan, wat je nog niet hebt.
Nou, dat wil zeggen, als dit thema het toelaat, sluit u de zijbalk aan de rechterkant aan en sleept u het menu erin.
En om het verticaal te maken, hoeft u alleen maar de CSS toe te voegen / te wijzigen

Hoofdnavigatie ul li, .secundaire navigatie ul li (weergave: blok! Belangrijk;)

Welnu, daarna moet u de inspringingen en andere eigenschappen een beetje wijzigen.

Misschien heb ik je verkeerd begrepen, maar mijn Max mega-menu staat al in het gebied van de linkerkolom (het is zwart, uitgelijnd in 2 regels omdat het gebied wordt omgekeerd, en dus is het standaard horizontaal in de plug-in), daar toegevoegd via de widgets, in het bovenste gedeelte heb ik een standaard themamenu en ik heb ze allebei nodig, nu zal ik de CSS proberen, bedankt

Het kan zijn dat ik je ook niet helemaal goed heb begrepen.
Ik had het over het menu dat je op het scherm hebt in het horizontale bovenste blok van lichtgroene kleur "Tea Coffee Sweets ..."
Maar na het herlezen van uw antwoord begrijp ik dat we het over verschillende menu's hebben.
Op het scherm zie je aan de linkerkant van dit zeer Max mega menu, maar ik zie het niet op de site met jouw link.
En sindsdien Ik heb hem gisteren niet gezien, toen heb ik niet naar het scherm gekeken.
Ik zie het nu ook niet.

Ik probeer de hele tijd iets te doen, verschillende dingen aan en uit te zetten, totdat ik erachter ben gekomen hoe ik dit menu verticaal kan maken, ik ben op zoek naar een ander geschikt menu. Voor dit menu kan dezelfde oplossing met css worden toegepast als u schreef? Kun je me vertellen welk deel van de code deze regels in de code van de plug-in zelf moet invoegen? Is locatie belangrijk?
Ik ging Plugins-bewerken-koos Max mega-menu, dan zijn er dergelijke secties:
css
megamenu.scss
reset.scss
toggle-blocks.scss
beheerder
mixin.scss
Geen vergelijkbare regels gevonden in een van hen om te repareren

Ik ben gewoon helemaal een noob en begreep niet waarom je het nodig hebt om op mij te worden weergegeven, blijkbaar om naar de code te kijken en te suggereren. Ik vond het antwoord van de beheerder in het Max Mega Menu-ondersteuningsforum dat verticaal alleen beschikbaar is in de Pro (betaalde) versie, dus voorlopig zal het moeten worden opgegeven. Kunt u een vergelijkbare plug-in adviseren, de criteria zijn als volgt:
- de mogelijkheid om in de zijbalk te installeren
- het menu moet dropdown zijn
- bij het overschakelen naar een van de categorieën, zodat deze in dit stadium open blijft en niet volledig sluit bij het vernieuwen van de pagina

Precies.
Zonder dit menu te zien, is het onmogelijk om advies en aanbevelingen te geven. Misschien is een paar regels CSS voldoende. Maar geen feit.

Hoewel, als je echt van plan bent om dit Max Mega Menu te gebruiken dat al zijn mogelijkheden onthult, dan is $ 23 voor zo'n product helemaal niet veel. Het is het waard.

Mega-hoofdmenu het is een plug-in voor het snel maken van menu's voor WordPress. Het heeft speciale functies die het gebruik gemakkelijker maken.

• Sticky en dropdown menu's, pictogrammen, logo en zoeken.
• Verscheidene kleuren. Bovendien kunt u de kleur van elke optie in het menu wijzigen. Naast kleuren worden ook verlopen, achtergronden en afbeeldingen gebruikt.
• De inhoud heeft maximaal 10 variaties. U kunt ook inhoud in vervolgkeuzemenu's plaatsen. Het kan alles bevatten, van links tot afbeeldingen en shortcodes.
• Er kunnen maximaal 1600 pictogrammen worden gebruikt in het sitemenu. Deze pictogrammen hebben vectorafbeeldingen, dus ze vereisen geen grote volumes en resoluties. Hierdoor kunt u ze zelfs op een mobiele telefoon gebruiken.
• Lettertypen hebben ook hun eigen variëteit. Het kan 600 Google-lettertypen gebruiken, die eenvoudig kunnen worden geconfigureerd in de plug-in-instellingen.

De plug-in wordt op de gebruikelijke manier geïnstalleerd, zoals alle programma's, en er zijn geen problemen. Nadat je het hebt geactiveerd, moet je naar het hoofdmenu gaan. Op de pagina van dit menu, aan de linkerkant, ziet u vier opties. Dit is de hoofdoptie met algemene instellingen, vervolgens de optie voor het instellen van het uiterlijk van de pagina genaamd skins, die de kleur, het lettertype, enz. verandert. Ook de laatste twee opties zijn ondersteuningslink en speciale instellingen voor professionals.

In de Algemene opties er zijn drie opties onder opties: primair, mobiel_menu, secundair. De primaire sectie wordt gebruikt om alle waarden van het hoofdmenu te configureren. Daar kunt u bijvoorbeeld de hoogte instellen, anti-aliasing van pictogrammen, de logo-afbeelding aanpassen. In mobiel en secundair worden deze instellingen afzonderlijk weergegeven.


In de Skins-instellingen er zijn ook drie variaties van de instellingen: primair, extra, voettekst... Bij de eerste optie kunnen we de achtergrond van de primaire container aanpassen en kiezen voor horizontale, verticale en radiale weergaven. Dan het lettertype van de eerste alinea, enz.

In specifieke parameters kunt u de respons op draagbare apparaten instellen. Vervolgens kunt u de schermresolutie en -stijl instellen.

De laatste optie is om de sitestructuur aan te passen. Hier kiest u welke optie u wilt inschakelen en welke u wilt uitschakelen.

Dit is dus een geweldige menu-plug-in die je thema kan transformeren. Met zijn hulp kun je het gemakkelijk vullen met pictogrammen, afbeeldingen en andere elementen. Het belangrijkste is dat de kwaliteit ervan is dat het eenvoudige functionaliteit heeft. in tegenstelling tot anderen Mega Hoofdmenu-plug-ins heeft een verwaarloosbare impact op de site.

Hallo! Zoals altijd gebeuren er veel gebeurtenissen in mijn leven, dus het is erg moeilijk om tijd te vinden voor een blog. Gisteren hebben we kaartjes gekocht naar Sri Lanka en gaan binnenkort voor 4 maanden weg, kom maar op bezoek! En nu ben ik op zoek naar de mooiste trouwjurk :))
Vandaag zullen we het hebben over het maken van een menu in WordPress en het toevoegen van deze blokken in willekeurige delen van de sjabloon.
We zullen leren hoe we het menu kunnen aanpassen en bewerken naar onze smaak.

Menu's bewerken en aanpassen in WordPress

Laten we eerst eens kijken naar de functionaliteit die voor ons beschikbaar is in het blogbeheerpaneel. De nieuwe sjablonen, die compatibel zijn met de nieuwste versies van WordPress, maken de menuweergave vrij eenvoudig en aanpassen is niet al te moeilijk.

Nadat we een child-thema hebben gemaakt dat kan worden gewijzigd zonder het hoofdthema te beïnvloeden, voegt u de volgende functie toe aan het functie.php-bestand.

register_nav_menus (array ("additionalmenu" => __ ("Extra menu", "Uw onderwerpnaam")));

Als u geen child-thema maakt, voegen we dit toe aan het hoofdfunctiebestand van uw thema.

Met deze functie kunnen we een extra WordPress-menu aan onze sjabloon toevoegen en er een ander gebied voor maken.

Ga na het toevoegen naar het admin-paneel in de "Beheer gebieden":

Er zou een extra onderwerpgebied moeten verschijnen met de naam die we in de functie hebben ingesteld.

Klik op "Nieuw menu gebruiken" als u de secties voor het extra gebied wilt wijzigen, of selecteer "Home". In het nieuwe gebied worden dan dezelfde secties weergegeven als in het hoofdmenu.

In ons geval maken we een nieuw menu aan met de naam Extra:

Selecteer hiervoor het themagebied "Extra menu".

Maar nu moeten we dit gebied associëren met de blokken van de sjabloon. We moeten bijvoorbeeld een extra menu maken onder de kop van een WordPress-site. Ga naar het header.php-bestand of kopieer het naar het child-thema. Voeg na de body-tag het volgende toe:

Laten we het resultaat zien:

We hebben een extra menu boven de kop. Nu moeten we het opmaken, de items op een lijn uitlijnen en het blok onder de kop verplaatsen.

We brengen de volgende wijzigingen aan in het bestand style.css:

#additionalmenu nav (breedte: 940px; / * containerbreedte * / marge: 0 auto;) #additionalmenu li (weergave: inline; opvulling: 10px; / * opvulling * / marge: 20px 0;) #additionalmenu (breedte: 100% ; top: 420px; / * Bovenmarge * / achtergrondkleur: # 000; / * achtergrondkleur * / positie: relatief;)

Laten we eens kijken wat er gebeurd is:

De weergave van het menu dat we hebben gemaakt is nog verre van ideaal, maar indien nodig kunt u het in de juiste vorm voor uw blog brengen.

Widgets en plug-ins voor het toevoegen van menu's in WordPress

Ik raad aan om een ​​video te bekijken over het maken van een menu in WordPress:

In het artikel over de widget werd "Custom Menu" genoemd. Laten we het in meer detail analyseren.

Ga naar "Uiterlijk" - "Widgets", zoek de widget "Aangepast menu" en sleep deze naar een gebied dat beschikbaar is voor uw thema en geschikt is voor een blog:

In ons geval is het menublok toegevoegd aan de zijbalk. Hiervoor hebben we de secties geselecteerd van het aanvullende blok dat we hebben gemaakt.

Dienovereenkomstig wordt het volgende blok weergegeven in de zijbalk aan de rechterkant:

Naast de standaardwidget die in het thema is ingebouwd, zijn er ook veel extra plug-ins die zijn ontworpen om verschillende soorten menu's te maken: verticaal, horizontaal, vervolgkeuzemenu's, enz.

Hier is bijvoorbeeld een plug-in voor het maken van een verticaal menu met meerdere niveaus in WordPress: Navgoco Vertical Multilevel Slide Menu.

Of de geavanceerde aanpassing Dropdown Menu Widget.

Ook populair zijn widgets met jQwery-effecten voor menu's, bijvoorbeeld: jQuery Slick Menu Widget.

Laten we een voorbeeld nemen van hoe het werkt.

Ga na het installeren van de JQuery Slick Menu Widget naar Uiterlijk - Widgets.

Een nieuwe die door ons is geïnstalleerd, zou moeten verschijnen in de lijst met beschikbare widgets. We verplaatsen het naar het toegankelijke gebied, in ons geval de zijbalk:

We onthullen de instellingen:

We selecteren de naam van het menu (de secties die we hebben gemaakt), Tab-tekst - de naam van het blok dat op de site wordt weergegeven, de plaatsing (selecteer Links - aan de linkerkant), Offset - de offset vanaf de bovenrand in pixels, Animation Speed ​​​​- de animatiesnelheid (Fast). U kunt Auto-Close Menu selecteren om de blokkering automatisch te laten verdwijnen. En kies de kleur van het blok. Klik op opslaan en bekijk het resultaat:

Links in de koptekst verscheen een uitschuifmenu. Wanneer u op het tabblad klikt, verschijnt een weergave van secties:

Bij nogmaals indrukken verdwijnt het blok weer.

Dit is slechts een van de manieren om menu's in WordPress te installeren, bewerken en weergeven.

Kies de meest geschikte en handige manier om een ​​menu voor uw WordPress-blog te maken. Succes!

Het is algemeen bekend dat WordPress 3.0 ondersteuning heeft toegevoegd voor aangepaste menu's (aangepaste menu's). Het ding is naar mijn mening buitengewoon handig en nuttig. Daar komt dit artikel eigenlijk vandaan.

Het gemak ligt in het feit dat u nu het menu rechtstreeks vanuit het beheerderspaneel kunt maken en configureren, koppelingen kunt toevoegen door op de selectievakjes te klikken en de volgorde van koppelingen kunt wijzigen door simpelweg te slepen en neer te zetten. In het menu kun je links naar pagina's, categorieën en individuele berichten toevoegen. U kunt menu's op meerdere niveaus maken, u kunt ook uw eigen aangepaste links aan het menu toevoegen, waarvan WordPress niets weet. Over het algemeen volledige vrijheid van handelen.

Om echter een dergelijke "vrijheid" beschikbaar te maken, is het nodig, laten we zeggen, met een lichte beweging van de muis, om de uitvoer van een willekeurig menu naar de sjabloon te configureren.

Het is erg handig om dergelijke menu's te gebruiken als u de multisite-functie van WordPress gebruikt, omdat u verschillende menu's voor verschillende sites kunt instellen en daarvoor dezelfde sjabloon kunt gebruiken.

Opmerking: het menu werkt via de WordPress-taxonomie (nav_menu) en willekeurige (externe) links worden naar de databasetabel met hoofdberichten geschreven. Deze benadering is flexibeler en dynamischer, maar vereist een constante generatie van dergelijke menu's.

Register_nav_menus (array ("top" => "Top menu", // Naam van de menulocatie in de sjabloon "bottom" => "Bottom menu" // Naam van een andere menulocatie in de sjabloon));

We hebben nu 2 menu's geregistreerd met ID's "top" en "bottom" met hun respectievelijke namen. Identifiers zijn nodig om ze in het thema te gebruiken, om de plaats aan te geven waar, via de uitvoerfunctie wp_nav_menu (), het menu dat in het admin-paneel is gemaakt, wordt weergegeven. We zullen de namen van de geregistreerde locaties in het admin-paneel zien wanneer we naar het gedeelte Uiterlijk -> Menu gaan.

Nadat de menu's zijn geregistreerd, gaat u naar het beheerderspaneel en maakt u onze eigen menu's (in dit voorbeeld 2 menu's):

Stel de naam van het menu in (het menu in de sjabloon kan worden weergegeven met de opgegeven naam, met behulp van de functie wp_nav_menu ()

Wij maken menu-items. Het linkerblok gebruiken: linkpagina's, koppen

1. We kiezen waar het menu zich zal bevinden, aangezien we 2 menu's hebben geregistreerd, hebben we 2 opties: "Top menu" en "Bottom menu".

Ondersteuning voor aangepaste menu's in WordPress is voor elk thema afzonderlijk ingeschakeld, met een dergelijke regel in het bestand Functions.php add_theme_support ("menu's"); Deze regel is echter niet nodig als we het menu registreren. In dit geval wordt ondersteuning automatisch ingeschakeld.

Willekeurige menu's weergeven via de functie wp_nav_menu

De menu's zijn geregistreerd en gemaakt, het blijft om ze toe te voegen aan de sjabloon. Dit wordt gedaan door de functie wp_nav_menu (), die de volgende parameters kan aannemen:

Wp_nav_menu (array ("menu" => "", // (string) Naam van het weergegeven menu (opgegeven in het beheerderspaneel bij het maken van een menu, // heeft prioriteit dan de opgegeven locatie theme_location - indien opgegeven, is de parameter theme_location genegeerd) "container" => " div ", // (string) Menu container. Wrapper ul. De container tag is gespecificeerd (standaard in de div tag)" container_class "=>" ", // (string) class of de container (tag div)" container_id "=>" " , // (string) id van de container (div tag) "menu_class" => "menu", // (string) klasse van het menu zelf (ul tag) "menu_id" => "", // (string) id van het menu zelf ( ul tag) "echo" => true, // (boolean) Weergeven of retourneren voor verwerking "fallback_cb" => "wp_page_menu", // (string) Gebruikte (fallback) functie als het menu niet bestaat (kan niet worden opgehaald) "before" => "", // (string) Tekst voor elke link "na" => "", // (tekenreeks) Tekst na elke link "link_before" => "", // (string) Tekst voor het anker (tekst) van de link "link_after" => "", // (string) Tekst na het anker (tekst) van de link "diepte " => 0, / / ​​(geheel getal) Nestdiepte (0 - onbeperkt, 2 - menu met twee niveaus) "walker" => "", // (object) Klasse die het menu verzamelt. Standaard: nieuw Walker_Nav_Menu "theme_location" => "" // (string) Locatie van het menu in de sjabloon. (de sleutel wordt aangegeven waarmee het menu is geregistreerd in de register_nav_menus functie)));

In dit voorbeeld moet u ongeveer (afhankelijk van de parameters die u nodig heeft) de volgende 2 codes in de sjabloon invoegen:

#een. Menu per locatie weergeven

Topmenu. We voegen in de sjabloonkop (header.php), waar het bovenste (bovenste) menu wordt weergegeven:

"menu", "theme_location" => "top", "after" => "/")); ?>

Geeft het menu weer dat is gemaakt in het beheerderspaneel dat is gekoppeld aan de locatie "Topmenu" met een vergelijkbare structuur:

Lagere menukaart. We voegen het in de voettekst van de sjabloon (footer.php), waar het onderste (onderste) menu wordt weergegeven:

Geeft het menu weer dat is gemaakt in het beheerderspaneel dat is gekoppeld aan de locatie "Bottom Menu". De structuur zal identiek zijn aan de eerste.

Merk op dat in de eerste versie de parameters door een array werden doorgegeven. In de tweede, door de lijn. Beide opties zijn correct. Dit is gebruikelijk voor WordPress-functies - parameters kunnen worden doorgegeven als een array of als een string (de string wordt vervolgens geconverteerd naar een array).

# 2 Geef het menu weer op naam

Om een ​​menu op naam weer te geven, kunt u het argument "menu" gebruiken. De naam wordt aangegeven, degene die is ingesteld bij het maken van het menu in het beheerderspaneel. In ons voorbeeld (zie afbeelding) "Hoofdmenu". Het menu-argument heeft een hogere prioriteit dan theme_location, wat betekent dat als we op naam weergeven, de parameter theme_location wordt genegeerd.

U kunt de menu-ID opgeven, niet de naam. Dus als u de naam van het menu wijzigt, blijft de code werken. De menu-ID kan in de URL worden bekeken tijdens het bewerken van het menu:

Opmerkingen:

Verwijder de verpakking Div

Het is je misschien opgevallen dat het menu vaak "omhuld" is met een onnodige div-tag. Het kan worden verwijderd door een lege parameter "container" => "" op te geven in de argumenten voor de functie wp_nav_menu ().

De standaardparameters wijzigen

Om te voorkomen dat steeds dezelfde parameter wordt opgegeven voor ingevoegde menu's, kunnen ze worden overschreven in functions.php. Dit wordt gedaan via het wp_nav_menu_args-filter:

Register_nav_menus (array ("top" => "Top menu", "bottom" => "Onderste menu")); add_filter ("wp_nav_menu_args", "my_wp_nav_menu_args"); functie my_wp_nav_menu_args ($ args = "") ($ args ["container"] = ""; retourneer $ args;)

Op dezelfde manier kunt u uw eigen standaardargumenten maken: $ args ["argument"] = "waarde".

Controleren of het menu is geregistreerd

WordPress heeft ook een conditiefunctie: has_nav_menu ("top") - controleert of de locatie van het bovenste menu is geregistreerd. Als het menu niet gespecificeerd is, zal de wp_nav_menu () functie werken zoals wp_list_pages (), maar de "wrapper" div zal blijven, ondanks het feit dat we deze in de argumenten hebben verwijderd. U kunt dit probleem als volgt oplossen:

If (has_nav_menu ("top")) (wp_nav_menu (array ("container" => "", "theme_location" => "top", "menu_class" => "menu"));) else (echo "

"; wp_list_pages (array (" depth "=> 1," title_li "=>" ")); echo"