0

Problem

I'm trying to write an if-statement that does the following:

  • Show when .icon-menu when dropdown is closed and toggle to .icon-cross when dropdown is open/ visible
  • Hide .nav__list--dropdown if it's open (cross icon is showing) and window width is less than 769px**
  • Keep the .nav__list--dropdown open if has been clicked open, and the user the user resizes the window, but the window width is still 768px or lower.

I feel that I have overlapping if-statements, which is causing the icons to show up when they are not supposed to.

scripts.js

$(function(){

    // Window size
    if ($(window).width() <= 768) {
        $(".icon-cross").hide();
        $(".icon-menu").addClass("is-visible");
        $(".icon-menu").show();
    } else {
        $(".icon-menu").hide();
        $(".icon-menu").removeClass("is-visible");
    }

    $(window).resize(function(){
        var w = $(this).innerWidth();
        if (w > 768) {
            $(".nav__list--dropdown").hide();
            $(".icon-cross").hide();
            $(".icon-menu").hide();
            $(".icon-cross").removeClass("is-visible");
            $(".icon-menu").removeClass("is-visible");
        } else {
            $(".icon-cross").hide();
            $(".icon-menu").show();
            $(".icon-menu").addClass("is-visible");
        }
    });

    // Dropdown menu
    $(".nav__menu").on("click", function(){
        $(".is-hidden").slideToggle("slow");

        var menuVisible = $(".icon-menu").hasClass("is-visible")

        if (menuVisible) {
            $(".icon-menu").removeClass("is-visible");
            $(".icon-menu").hide();
            $(".icon-cross").addClass("is-visible");
            $(".icon-cross").show();
        } else {
            $(".icon-cross").removeClass("is-visible");
            $(".icon-cross").hide();
            $(".icon-menu").addClass("is-visible");
            $(".icon-menu").show();
        }
    });
});

index.html

<div class="dropdown">
                <ul class="nav__list--dropdown is-hidden">
                    <a href="#services" class="nav__item" target="_blank"><li class="item--services--dropdown">Services</li></a>
                    <a href="#projects" class="nav__item" target="_blank"><li class="item--projects--dropdown">Projects</li></a>
                    <a href="#teaching" class="nav__item" target="_blank"><li class="item--teaching--dropdown">Teaching</li></a>
                    <a href="https://medium.com/@onlyandrewn" class="nav__item" target="_blank"><li class="item--blog--dropdown">Blog</li></a>
                    <a href="#contact" class="nav__item" target="_blank"><li class="item--contact--dropdown">Contact</li></a>
                </ul>
            </div>

<div class="nav__menu">
                    <img src="src/img/sm-menu.png" class="icon-menu" alt="Open Menu">
                    <img src="src/img/cross-dark.png" class="icon-cross" alt="Close Menu">
                </div>

Potential approach

$(function(){
    function updateMenu(){

        // all logic in here for checking width and show/hide/set classes

    }

    updateMenu();  // runs on doc ready

    $(window).on("resize", updateMenu);
}
Andrew Nguyen
  • 1,416
  • 4
  • 21
  • 43
  • What does `alert(menuVisible);` give you if anything? – Steve Apr 16 '16 at 20:34
  • @Steve Just gives me `menuVisible` is not defined. – Andrew Nguyen Apr 16 '16 at 20:37
  • That is good in a way, as it is a clue to why they are not hiding - you are saying `if(menuVisible)`... and it isn't. You alerted after `var menuVisible =` ? Maybe `if($(".icon-menu").hasClass("is-visible")){var menuVisible = true;}` would do it? – Steve Apr 16 '16 at 20:39
  • Does removing the hyphen from the class name help? `hasClass();` seems to be JQuery 1.2+ which might be worth checking http://api.jquery.com/hasClass/ – Steve Apr 16 '16 at 20:51
  • Worth also alerting `w` your `innerWidth` - iPads do odd things with it when you rotate them and it is not always the value you expect. – Steve Apr 16 '16 at 21:06
  • Also a possibility is your first line `if ($(window).width() <= 768) {` - maybe try `if ($(window).innerWidth() <= 768) {` https://github.com/eddiemachado/bones/issues/468 – Steve Apr 16 '16 at 21:12
  • You could try giving `menuVisible` a temporary value `var menuVisible = "blah";` to test the logic and see if the menu items disappear. – Steve Apr 17 '16 at 01:32
  • 1
    Some other good bits of code to help deal with the heavy refresh rate associated with resize functions on this page http://stackoverflow.com/questions/9828831/jquery-on-window-resize – Steve Apr 17 '16 at 01:41

1 Answers1

0

It's not super pretty, but this is what I came up with that actually worked. I know this can be simplified drastically, so anyone with ideas on how to clean this up, much appreciated

// Less than 768
        if ($(window).width() < 768) {
            $(".icon-cross").hide();
            $(".icon-menu").addClass("is-visible");
            $(".icon-menu").show();
        }

        $(window).resize(function(){

            // More than 768
            var w = $(this).innerWidth();
            if (w > 768) {
                $(".nav__list--dropdown").hide();
                $(".icon-cross").hide();
                $(".icon-menu").hide();
                $(".icon-cross").removeClass("is-visible");
                $(".icon-menu").removeClass("is-visible");
            } else if (w < 768 && ($(".icon-cross").hasClass("is-visible"))) {
                $(".icon-cross").show();
                $(".icon-cross").addClass("is-visible");
                $(".icon-menu").hide();
                $(".icon-menu").removeClass("is-visible");
            } else {
                $(".icon-cross").hide();
                $(".icon-menu").show();
                $(".icon-menu").addClass("is-visible");
            }
        });

        // Dropdown menu
        $(".nav__menu").on("click", function(){
            $(".is-hidden").slideToggle("slow");

            var menuVisible = $(".icon-menu").hasClass("is-visible")

            if (menuVisible) {
                $(".icon-menu").removeClass("is-visible");
                $(".icon-menu").hide();
                $(".icon-cross").addClass("is-visible");
                $(".icon-cross").show();
            } else {
                $(".icon-cross").removeClass("is-visible");
                $(".icon-cross").hide();
                $(".icon-menu").addClass("is-visible");
                $(".icon-menu").show();
            }
        });
Andrew Nguyen
  • 1,416
  • 4
  • 21
  • 43