Frage von LordEvil, 87

Hilfe bei php script für Website-Menü?

Hallo liebe Community, ich habe ein Problem mit einer Website die ich für eine Bekannte machen soll (www.frangis-barber.de) . Es gibt ein Navigationsmenü, das schließt sich aber nicht automatisch beim Klick auf einen Menüeintrag. Hier mal die Codestelle, die das öffnen des Menüs beschreibt:

// Menu

    jQuery(".openTopMenu").click(function() {
    jQuery('.navToggle').toggleClass("open");
    });

// Sidepanel show/hide
//------------------------------------

// Open sidemenu
jQuery('.sidemenu_button').click(function (e) {
    "use strict";
    jQuery('body').toggleClass('openMenuFix');

    if (jQuery(this).length > 0) {
        THEMEREX_GLOBALS['swipers']['sidemenu_scroll'].reInit();
        jQuery('#sidemenu_scroll').height(jQuery(window).height());
    }

    setTimeout(function(){},200);
    maxHeightSidemenuUL();
    e.preventDefault();
    return false;
});

Und hier die Zeile die den Klick auf einen Menüeintrag beschreibt:

// Submenu click handler for the creative menu
    jQuery('.sidemenu_wrap .menu_main_nav li a').click(function(e) {
        "use strict";

        if (jQuery('body').hasClass('openMenuFix') && jQuery(this).parent().hasClass('menu-item-has-children')) {
            if (jQuery(this).siblings('ul:visible').length > 0)
                jQuery(this).siblings('ul').slideUp().parent().removeClass('opened');
            else
                jQuery(this).siblings('ul').slideDown().parent().addClass('opened');
        }

        if (jQuery(this).attr('href')=='#' || (jQuery('body').hasClass('responsive_menu') && jQuery(this).parent().hasClass('menu-item-has-children'))) {

            e.preventDefault();
            return false;
        }


    });

Wie kann ich das jetzt irgendwie verbinden, damit beim klick auf einen Menüeintrag das Menü wieder schließt?

Danke im voraus, Felix

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Plueschtier94, 49

Also ich finde es sehr kompliziert gemacht für so eine kleinigkeit. 

Du kannst über jquery das menü anhand der id filtern, und ihm einen Style Code geben. (Display: none für zugeklappt. - Display: block für offen)

Kommentar von Cr33p ,

Rcihtig und wenn er nicht möchte, dass es einfach so verschwindet, sonder z.B. wegslidet, soll er sich zu CSS und animations/keyframes einlesen. Erstelle die Keyframes vorher und aktiviere die animation in JavaScript

Kommentar von Plueschtier94 ,

schau mal hier: Einfachstes Javascript zeigt dir das.

Das ist die JS Function namens Outline. Die wird beim Klick aufgerufen und ändert nur den Style. 

function outline(id)
{
if(document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = 'block';
}
else
{
document.getElementById(id).style.display = 'none';
}
}
<a href="DEIN LINK HIER" onclick="outline('DIE ID VON DEM WAS SICH SCHLIEßEN / SICH ÖFFNEN SOLL'); return false;">Preise</a>
Gern geschehen :-)
Kommentar von Cr33p ,
$('#dein_li_a_link_id').click(function(){
$('#nav').hide();
})
$('#dein_navbar_button').click(function(){
$('#nav').show();
})
Kommentar von Cr33p ,

Für eine Animation emfpiehlt  sich die Methode von Pulschetier:

function outline(id)
{
if(document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = 'block';
document.getElementById(id).style.animation = 'slide 1s ease-in';
}
else
{
document.getElementById(id).style.animation = 'slide 1s ease-out reverse';
document.getElementById(id).style.display = 'none';
}
}
Kommentar von Cr33p ,

CSS dann so etwas wie:

//position sollte relative sein
@keyframes slide{
from {
top: -100%;
}
to {
top: 10%; //oder auf welcher Höhe auch immer das sein soll
}
}
Kommentar von Plueschtier94 ,

Sehr gut ausgeführt werter Kollege.
*Thumbs Up!* 

Kommentar von Cr33p ,

Dankesehr!

Kommentar von Cr33p ,

Du könntest auch die 'top'-Werte anstatt der 'animation' übergeben, wenn du die animation allerdings etwas hübscher machen willst, würde ich es so lassen.

Kleiner Edit hierzu:

$('#dein_li_a_link_id').click(function(){
$('#nav').hide();
})
$('#dein_navbar_button').click(function(){
$('#nav').show();
})

Hier könntest du auch eine Animation mit reinmogeln, die gibt dir allerdings fast gar keine Freiheiten - ist aber einfach und wenn es dir reicht, warum nicht.

also hier:

$('#dein_li_a_link_id').click(function(){
$('#nav').hide(500); //weitere Werte: ('fast'), ('slow'), ('irgendeine Zahl')
})
$('#dein_navbar_button').click(function(){
$('#nav').show(500); //weiter werte, wie bei hide
})
Kommentar von LordEvil ,

Das <a href> muss dann beim HTML rein, oder?

Kommentar von Plueschtier94 ,

Ja genau! 

Kommentar von LordEvil ,

Blöde Frage, aber kann ich auch eine Klasse statt einem ID Element nehmen?

Kommentar von Plueschtier94 ,

Es gibt keine blöden Fragen ;)

Nee das geht nicht. Eine Klasse kann mehreren "Containern" vergeben werden. 
Eine ID (theoretisch) nur einem Container. 

Wenn du noch Fragen hast, kannst du mir ruhig eine Private Nachricht schreiben ;) 

Kommentar von LordEvil ,

Danke, ich werde mich mal an der Variante probieren. Ich will mir halt auch nicht zuviel in der Theme-Datei zerpflücken, dass dann am Ende irgendwas anderes nicht mehr funktioniert.

Das ganze ist in Wordpress, deswegen muss ich da noch vorsichtiger sein

Kommentar von Plueschtier94 ,

JavaScript ist kein Problem für Wordpress. 


jQuery musst du leider nur jedes Mal ausschreiben, da Wordpress dass sonst nicht akzeptiert. Echt lästig! 

$('#nav').hide(500); Normale Variante
jQuery('#nav').hide(500); Wordpress Variante

Ich versuche es also bei Wordpress immer ohne jQuery. 

Antwort
von happyfish2, 49

Ohne das Markup zu kennen schwer zu sagen. Davon abgesehen ist das JavaScript, kein PHP. Daher empfehle ich jemanden zu engagieren, der sich damit auskennt.

Keine passende Antwort gefunden?

Fragen Sie die Community