Jenni1990
Neues Mitglied
Hallo,
Ich habe schon des öfteren toggle Funktionen auf Webseiten eingebaut (meist um bestimmte Divs ein/auszublenden).
Jetzt möchte ich ein Menü, welches für jede Art von Device nutzbar ist. Deshalb soll es einmal den Menüpunkt selbst geben und daneben einen "<" um das Untermenü auf Klick (weil Smartphones und Tablets nunmal keinen Hover Effekt haben) und beim Hovern auszuklappen.
Mein Klick funktioniert aber leider erst beim zweiten Versuch. Könnt ihr mir sagen wie ich es schaffe, dass die Funktion beim ersten mal direkt aufgerufen wird?
Menüpunkt im HTML
ausgeblendetes Untermenü im HTML
Javascript Funktion
CSS
Vieln Dank schonmal im Voraus.
LG Jenni
Ich habe schon des öfteren toggle Funktionen auf Webseiten eingebaut (meist um bestimmte Divs ein/auszublenden).
Jetzt möchte ich ein Menü, welches für jede Art von Device nutzbar ist. Deshalb soll es einmal den Menüpunkt selbst geben und daneben einen "<" um das Untermenü auf Klick (weil Smartphones und Tablets nunmal keinen Hover Effekt haben) und beim Hovern auszuklappen.
Mein Klick funktioniert aber leider erst beim zweiten Versuch. Könnt ihr mir sagen wie ich es schaffe, dass die Funktion beim ersten mal direkt aufgerufen wird?
Menüpunkt im HTML
HTML:
<div class="header-menu">
<div class="menu-hauptmenu-container">
<ul id="menu-hauptmenu-1" class="FirstMenuLevel">
<!-- Dienstleistungen -->
<li id="menu-item-dienstleistungen" class="MenuItem-FirstMenuLevel">
<a href="<?php bloginfo('url')?>/dienstleistungen/">Dienstleistungen</a>
<a href="javascript:toggleMenu('sub-menu-Dienstleistungen', 'sub-link-dienstleistungen');" id="sub-link-dienstleistungen">∨</a>
</li>
HTML:
<!-- Untermenues mit Wordpress automatisch generiert -->
<!-- Dienstleistungen -->
<div class="sub-menu-container" id="sub-menu-Dienstleistungen">
<!-- Hier Menü einfügen -->
<?php wp_nav_menu( array( 'menu' => 'dienstleistungen','menu_class' => 'first-sub-menu'));?>
</div>
HTML:
function toggleMenu(element, selector) {
if(document.getElementById(element).style.display == 'none')
{
document.getElementById(element).style.display = 'block';
document.getElementById(selector).innerHTML = '<';
}else{
document.getElementById(element).style.display = 'none';
document.getElementById(selector).innerHTML = '∨';
}
}
HTML:
.sub-menu-container{
display:none;
}
Vieln Dank schonmal im Voraus.
LG Jenni