Zwijanie mobilnego menu

0

Witam,
mam taki kod:

$( "ul" ).click(function() {
 $( this ).slideUp();
});

odpowiada on za to, żeby po kliknięciu w link z menu, menu się schowało. I tak się dzieje. Gdy klikam w link z menu to ono się chowa, jednakże dzieje się tak zarówno dla menu mobilego jak i zwykłego. Jak zrobić, żeby zwijało się tylko menu mobile?

0

użyj innego selektora niż ul które masz w obu menu...

0

Ale wszystkie selektory mam wspólne dla jednego menu.

<nav>
            <button class="toggle-menu"><img src="img/navicon.png""/></button>
            <ul>
                <li><a href="#">Zakladka1</a></li>
                <li><a href="#">Zakladka2</a></li>
                <li><a href="#">Zakladka3</a></li>
                <li><a href="#">Zakladka4</a></li>
                <li><a href="#">Zakladka5</a></li> 
             </ul>
        </nav> 

Mam wspólne menu dla wersji mobilnej i zwykłej.
Gdy użyję **ul ** to zwija się w obu wersjach całe menu.Gdy użyję li to zwija się obu wersjach jeden wiersz menu, gdy użyję **nav ** to zwija się cała belka z menu w obu wersjach. Czego mam użyć zatem?

0

Hmm w takim razie możesz to zrobić tak:

if ($(window).width() < 481) {
    $( "ul" ).click(function() {
        $( this ).slideUp();
    });
}

Funkcja wykona się tylko jeżeli szerokość ekranu będzie mniejsza niż 481px.

0

Ok, a jeśli mobile menu wywołuje się gdy:

@media (max-width: 800px) {}

to jakiego width mam użyć w w/w przez Ciebie kodzie?

0

Tylko to nie do końca zdaje egzamin gdyż
-gdy otwieram stronę na komputerze to menu jest normalnie(wersja standardowa)
-gdy przybliżę rolką myszki(chrome) tak aby pojawiła się wersja mobilna i rozwinę menu i wybiorę jakiś link z menu oraz oddalę z powrotem do normalnej rozdzielczości to tego menu ze zwykłej wersji(podstawowej) już nie ma - znika. Dlaczego?

0

Nie prościej symulować widok mobilny poprzez zmniejszenie okna?
..albo jak większość normalnych ludzi: Ctrl+Shift+I > Toggle device mode (taki smartfonik w lewym górnym rogu tego okienka).
Menu znika bo zostało zwinięte i nie ma nic co by je rozwinęło po powrocie do normalnego widoku :)

Nie mam pomysłu na jakieś kreatywne rozwiązanie, ale możesz dodać nasłuchiwacz zdarzeń i rozwinąć to menu kiedy szerokość strony przekroczy 800px:

window.addEventListener('resize', function(){
    if ( $(window).width() > 800 ) {
        $( "ul" ).slideDown();
    }
}, true);

if ($(window).width() < 801) {
    $( "ul" ).click(function() {
        $( this ).slideUp();
    });
}

Jeżeli to nie pomoże wrzuć ten fragment strony na jsfiddle.net, prościej się myśli mogąc wyświetlić sobie jak wygląda problem .

0
$( "ul" ).click(function() {
    $( this ).parent().removeClass("in");
});

1 użytkowników online, w tym zalogowanych: 0, gości: 1