Archief - Submenu in wordpress

f

fiestaboyke

Legacy Member

• 12 feb 2012

• #1

Hallo,

Ik zou graag mijn submenu pas zien als ik op het menu ervan klik, is dat mogelijk met wordpress? Het gaat om de submenu's onder de pagina van "foto's" op mijn website Konigsblau Vlaanderen ... Is dit mogelijk of is dat nogal omslachtig om simpel uit te leggen?



Greetz

-

-BVR-

Legacy Member

• 12 feb 2012

• #2

In je css:

Code:

ul li ul.sub-menu {display: none;}
ul li:hover ul.sub-menu {display: block;}

f

fiestaboyke

Legacy Member

• 12 feb 2012

• #3

Wow en ik vindt dit waar? In style.css document van mijn theme? Want dit is meer dan 1000 regeltjes en heb het op het eerste zicht niet tegen gekomen ...

-

-BVR-

Legacy Member

• 12 feb 2012

• #4

Je copy-paset wat ik getypt heb onderaan je style.css

f

fiestaboyke

Legacy Member

• 12 feb 2012

• #5

Gebeurd niets, kijk zelf maar. Heb het aangepast ...

D

Dieterg

Legacy Member

• 13 feb 2012

• #6

@Bram hij bedoelt als je er op klikt.
@fiestaboyke: je zal moeten werken met jQuery, zelf kan ik nu geen voorbeeld geven. Ik zit in de les.

-

-BVR-

Legacy Member

• 13 feb 2012

• #7

Had een foutje gemaakt, hier opnieuw:

Code:

ul li ul.sub-menu {display: none;}
ul li:hover ul.sub-menu {display: block;}

En waarom moet dat perse als je erop klikt? Gewoon bij een hover is toch ook al goed, of niet?

f

fiestaboyke

Legacy Member

• 13 feb 2012

• #8

Ok merci, nu is het in orde

f

fiestaboyke

Legacy Member

• 18 feb 2012

• #9

Toch even terug bovenhalen ... Is het ook mogelijk om de lijst met paginas te laten zien en verwijderen als je erop klikt, want is blijkbaar nu nogal lastig om het menu te laten verschijnen met een touchscreen (samsung galaxy tab, ipad, etc) ...

-

-BVR-

Legacy Member

• 18 feb 2012

• #10

Code:

$(document).ready(function () {
    $('ul li').click(function () {
        $('ul li ul.sub-menu').show();
        return false;
    });
});

Zou moeten werken.

f

fiestaboyke

Legacy Member

• 18 feb 2012

• #11

nee u staat het menu altijd uitgeklapt ... Het zou moeten uitklappen als ik op het menu klik en als ik er terug op klik, terug inklappen ....

-

-BVR-

Legacy Member

• 18 feb 2012

• #12

Code:

$(document).ready(function () {
    $('ul.sub-menu').hide();
    $('ul li a').click(function () {
        $(this).siblings('ul.sub-menu').toggle('fast', function () {});
	return false
    });
});

Zo dan. Getest en werkt.

EDIT: return false toegevoegd, beter/mooier zo.

f

fiestaboyke

Legacy Member

• 18 feb 2012

• #13

Nee, nog steeds niets, kijk zelf maar ... Konigsblau Vlaanderen en daar in het menu van foto's .... zal ik de ctyle.css file even uploaden zodat jullie het zelf kunnen zien? Of hier even copy/pasten?

-

-BVR-

Legacy Member

• 18 feb 2012

• #14

Ik zie je scriptje nergens staan op je site hoor.

1. Verwijder deze regels uit je style.css file:

Code:

ul li ul.sub-menu {display: none;}
ul li:hover ul.sub-menu {display: block;}

2. Download dit bestand (recht klik, opslaan als)
3. plaats het op je server waar je het kan terug vinden
4. in je head van je template link je naar die file

bv.

Code:

<script type="text/javascript" src="showHideSubMenu.js"></script>

Maar zorg dat dat path in de src klopt! Zoals het er nu staat zal dat niet juist zijn!

f

fiestaboyke

Legacy Member

• 18 feb 2012

• #15

wow, hier snap ik weer niets van

-

-BVR-

Legacy Member

• 18 feb 2012

• #16

De code waar we het voorheen over hadden was code om te stijlen. (CSS) De code die ik nu post is JavaScript, een volledig andere taal. Dit kan je dus niet in een css-bestand stoppen, want dan wordt de code die erin staat niet uitgevoerd.

EDIT: probeer het volgende:

Ga naar volgende map: wp-content/themes/Schalke-2/Schalke-2 en zoek het bestand 'scripts.js'

Voeg daar onderaan volgende code toe:

Code:

$(document).ready(function () {
    $('ul.sub-menu').hide();
    $('ul li a').click(function () {
        $(this).siblings('ul.sub-menu').toggle('fast', function () {});
	return false
    });
});

f

fiestaboyke

Legacy Member

• 18 feb 2012

• #17

Ook dit lukt niet Heb het in het script.js bestand toegevoegd maar nog steeds niets :doh:

Z

Zero Grav

Legacy Member

• 18 feb 2012

• #18

Gebruik eens jQuery in plaats van het dollarteken, hij bugt erop op uw site en zal waarschijnlijk ergens mee conflicteren. Dus alle $ in de code hierboven gewoon veranderen naar jQuery.

f

fiestaboyke

Legacy Member

• 18 feb 2012

• #19

Yes yes yes, thanx

-

-BVR-

Legacy Member

• 19 feb 2012

• #20

Verwijder dit nog uit je style.css:

Code:

ul li ul.sub-menu {display: none;}
ul li:hover ul.sub-menu {display: block;}

EDIT: never mind, zat met een gecachet exemplaar.

You're welcome.