Zwijanie mobilnego menu

Menu mobile
2015-07-31 17:28
Menu mobile
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?

edytowany 1x, ostatnio: furious programming, 2016-12-13 18:26

Pozostało 580 znaków

2015-07-31 17:36

Rejestracja: 4 lata temu

Ostatnio: 3 lata temu

0

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

Pozostało 580 znaków

Menu mobile
2015-07-31 17:45
Menu mobile
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?

Pozostało 580 znaków

2015-07-31 17:52

Rejestracja: 4 lata temu

Ostatnio: 3 lata temu

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.

Pozostało 580 znaków

Menu mobile
2015-07-31 17:59
Menu mobile
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?

801. Liczyłem że mobilne menu masz gdy strona ma 480px szerokości i wygodniej było wpisać <481 niż =<480. - _naf 2015-07-31 18:00
@_naf - anonimom odpowiadaj w postach, bo nie mogą dodawać komentarzy; - furious programming 2015-07-31 20:20
@furious programming - ok, będę pamiętał - _naf 2015-07-31 20:47

Pozostało 580 znaków

Menu mobile
2015-07-31 18:10
Menu mobile
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?

Pozostało 580 znaków

2015-07-31 21:11

Rejestracja: 4 lata temu

Ostatnio: 3 lata temu

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 .

Pozostało 580 znaków

pietrol
2018-01-14 23:45
pietrol
0
$( "ul" ).click(function() {
    $( this ).parent().removeClass("in");
});
edytowany 1x, ostatnio: furious programming, 2018-01-15 01:04

Pozostało 580 znaków

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