Accentsconagua

Superfish Menu integreren in een sjabloon

Code
Share

Dit is een korte en eenvoudige stap-voor-stap handleiding voor het gebruik van de jQuery-menu-plugin, Superfish, ontwikkeld door Joel Birch.

Stap 1 Downloaden

Download de zip van het Superfish-pakket van de officiële website.

Stap 2 Bestandsstructuur

Kopieer de CSS en JS naar de map van het thema. Voor onze tut, het doelwit is de twintig elf map. De directorynamen zijn Superfish-css en Superfish-js.

Stap 3 Importeer commando's

Importeer de CSS & JS-bestanden naar header.php met de wp_enqueue_script en wp_enqueue_style WordPress-functies.

Stap 4 Klasse-instelling

Zoek in de regel hieronder en verander zoals aangegeven. Op deze manier maken we WordPress om de Superfish-versie te gebruiken voor het hoofdmenu:

 // Wijzigen van dit:  'primair')); ?> // Hier naartoe:  'primair', 'menu_class' => 'sf-menu',)); ?>

Stap 5 Een menu maken

Maak en bewaar een menusysteem in de WordPress-beheerder, dan zal het verschijnen in het juiste deel van de site. De onderstaande afbeelding toont de site voordat het menu werd toegevoegd:

Stap 6 Menu toegevoegd

Nadat het menu is toegevoegd:

Stap 7 Styling

Pas de Superfish-stijlen aan het Twenty Eleven-thema aan. Het bestand heet superfish.css. Hieronder staan ​​de details:

 / * Verander dit: * / .sf-menu a, .sf-menu a: bezocht / * bezocht pseudo-selector dus IE6 past tekstkleur * / kleur toe: # 13a;  .sf-menu li achtergrond: # BDD2FF;  / * Hiernaar: * / .sf-menu a, .sf-menu a: bezocht / * bezocht pseudo-selector dus IE6 past tekstkleur * / kleur toe: # 999; / * # 13a; * / .sf-menu li achtergrond: #ccc; / * # BDD2FF; * /
 / * Verander dit: * / .sf-menu li: hover, .sf-menu li.sfHover, .sf-menu a: focus, .sf-menu a: hover, .sf-menu a: active background: # CFDEFF; overzicht: 0;  / * Hiernaar: * / .sf-menu li: hover, .sf-menu li.sfHover, .sf-menu a: focus, .sf-menu a: hover, .sf-menu a: active background: #eee; overzicht: 0; kleur: # 111; 
 / * Verander dit: * / .sf-shadow ul background: url ('... /images/shadow.png') no-repeat rechtsonder; opvulling: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px;  / * Hiernaar: * / .sf-shadow ul / * background: url ('... /images/shadow.png') no-repeat rechtsonder; opvulling: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; * /

Stap 8 Voltooide versie

Hier is hoe het eruit zal zien als het klaar is:

Code
×