Need help to finish mobile navigation

[Funkaholik]

Hi y’all (Edo=)))

basically it needs a small fix
after you click on a nav link menu should close itself

plus i’m thinkin how to apply animation to elements inside targeted sections
and to nav buttons (kinda if they are active so they’ll say change color or else)

example here

[Shikkediel]

Not sure I get it. If you close the menu, the nav buttons will be hidden?

[Funkaholik]

well nav is adaptive to screen size
in mobile view you see a menu toggle button always
click nav menu opens – click a button nav menu closed
there is an extra X-close button (if user changed his mind for example))

[Shikkediel]

Okay, so it’s just on small screens…

Just add another hide then?

(function() {

  $('.selector').click(function() {

    var spot = $(this).index('.selector');

    $('.windows').removeClass('active').eq(spot).addClass('active');
    $('.menu').hide();
  });
})();

That also messes with the large view though.

[Funkaholik]

yep .. not cool at all.
is there a way to apply that function only for mobile view?
lock it to screen dimensions (media screen only etc)

[Shikkediel]

Lol, I guess I missed the clue in the title. This ought to work:

if ($('.menu-show').is (':visible')) $('.menu').hide();

Edit – might need another line so there’s no issue when resizing, although I don’t think anyone will ever change orientation with 1440px involved.

[Funkaholik]

what i’m trying to achieve here is
in a normal view when you click on nav buttons, related windows triggered show/hide
but when you’re in mobile view (i set with 1440px randomly just to show a mobile menu button)
mobile menu needs to be shut after you click or else you’ll have to close it manually

right now in a normal view after click menu disapers and that’s a no-no ..
man, i’m stuck with those toggle windows thing, it’s easy to make a regular nav with links and few more pages=))

but i like the fact that content changes without a page reload.

[Shikkediel]

I’m on a 1920px monitor. :-)

That line was actually meant to replace the one suggested earlier…

(function() {

  $('.selector').click(function() {

    var spot = $(this).index('.selector');

    $('.windows').removeClass('active').eq(spot).addClass('active');

    if ($('.menu-show').is (':visible')) $('.menu').hide();
  });
})();

https://codepen.io/anon/pen/eGvweb

[Funkaholik]

there was no ‘if’ before ))
thanx .. look for a new thread hehe

P.S. found a bug .. if in mobile view you’ll click a link and then resize to normal screen size
menu disappears .. not really sure why?

[Shikkediel]

I’ve added a resize function for it, just make sure to change it so it’s in line with the CSS media query.

[Funkaholik]

you almost got it .. but if you’ll resize browser window
you’ll see that now in mobile view menu is alway open

[Shikkediel]

Fixed me thinks.

[Funkaholik]

How you did that .. i don’t really see any changes.

[Shikkediel]

What issue remains? Be a bit specific, por favor…

[Funkaholik]

my bad .. seems like everything is okay, thanx

[Author]

Posts