Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Matthew Stewart
Matthew Stewart
9,214 Points
Posted by Matthew Stewart
Matthew Stewart
9,214 Points

Responsive Menu made with Jquery

This is a two-part question.

Part One: For a site I'm working on I'm trying to optimize the mobile navigation using jquery. I've got it pretty much how I want the functionality but there is one weird thing that I have noticed.

While testing on my desktop I noticed that if I resize the browser window to look at the mobile view, and I open / close the nav and then resize the window back to normal I'm getting a weird glitch in how the desktop navigation displays.

Part Two: For some reason my phone isn't pulling up the mobile view but the desktop version of the site instead. Am I doing something wrong in the css here(see below)? I'm obviously still working on the styling of the site for smaller screens as things are broken.

To view the issue I've uploaded the site to my server: http://mattstewart.co/caferegular/

Since this is not live I have a password set up for viewing: Username: mattsguest Password: welcome

Here is the code I'm using:

<header>
        <a href="index.php"><img id="logo" alt="Cafe Regular Logo" src="img/Logo.png"></a>
        <nav>
            <ul>
                <li><a href="#">Design</a></li><li>
                <li class="divider">&#8226;</li><li>
                <a href="#">Shop</a></li><li>
                <li class="divider">&#8226;</li><li>
                <a href="spotlight.php">Spotlight Regular</a></li><li>
                <li class="divider">&#8226;</li><li>
                <a href="#">Press</a></li><li>
                <li class="divider">&#8226;</li><li>
                <a href="#">Videos</a></li>
            </ul>
        </nav>
    </header>   

/* MOBILE NAV
================================*/

/* //Modify CSS to hide links on smaller widths and show button and select
//Also hides select and button on larger widths and show links */

@media (min-width: 320px) and (max-width: 640px) {
    .divider {
        display: none !important; 
    }
    nav {
        max-width: 100%;
        margin: auto;
        background: #fff;
        text-align: center;
        li {
            display: none;
        }
    }
}

@media (min-width: 640px) {
    header {
        #logo {
            width: 275px;
            padding: 50px 0;
        }
    }
    nav {
        max-width: 100%;
        margin: auto;
        background: #fff;
        text-align: center;
            li {
                display: inline-block;
                a {
                    padding: 0 50px;
                }
            }
            button {
                display: none !important;
            }
    }
}

// MOBILE NAVIGATION

//Create Menu button to show nav links
var $menu = $("<button class='mobileMenu'>Menu</button>");
$("nav ul").append($menu);

//Create close button to hide nav links again
var $close = $("<button class='close'>Close</button>");
$("nav ul").append($close);

//Hide close until menu is clicked
$close.hide();

//Click menu button to reveal nav links // Hide Menu btn // Show Close btn
$menu.click( function() {
    $("nav ul li").slideDown();
    $menu.hide();
    $close.show();
});

//Click close button to hide nav links again // Hide Close btn // Show Menu btn
$close.click( function() {
    $("nav ul li").slideUp();
    $close.hide();
    $menu.show();
});

Any help here would be much appreciated! Thanks!!

2 Answers

thomascawthorn
thomascawthorn
22,986 Points

Hey man,

I can answer part two with some confidence..

In your head section, have you included a meta tag for viewport?

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

There are a couple of different things you can pass in, but I think the most basic (above) should get you started.

Matthew Stewart
Matthew Stewart
9,214 Points
Matthew Stewart
Matthew Stewart
9,214 Points

Hey Tom!

Thanks for the help! That solved part 2 for me.

thomascawthorn
thomascawthorn
22,986 Points

I've just taken a look at your site, and it appears that you need to add some window.width listeners.

In a noted form:

on window.resize

run check to see if window.width is above/below 700px if it is above 700px

  • you're on desktop so change back to desktop navigation
  • close anything that's open
  • unappend anything that's appended etc

if it is below 700px

  • you're on mobile so change to mobile navigation
  • reappend
  • do other things

You can achieve exactly the same without so much javascript. It it was me, I wouldn't change any html elements between desktop and mobile. Instead I would keep the same html and change only the css to create an inline/normal list.

All you need to do then is show/hide with javascript, but again you'll need to make sure that when you resize javascript checks to see if it should be hiding/unhiding the navigation.

thomascawthorn
thomascawthorn
22,986 Points

I just dug up some old script I used when I did it.. It's not work showing it all because it was a long time ago and pretty ugly! 

    $(window).resize(function(){    
        if(window.innerWidth <= 960) {
            $("nav").removeAttr("style");
            }
        applySizeRule();
        $('#coursesDropDown').fadeOut();
    });
Matthew Stewart
Matthew Stewart
9,214 Points
Matthew Stewart
Matthew Stewart
9,214 Points

Hey Tom! You're the man — thanks so much for taking the time to look at my site / provide me with great feedback and answers. I'll look into adding the window.width listeners to trim down the code.

thomascawthorn
thomascawthorn
22,986 Points

No worries, just one more thing that kept on getting me - if you have a function for the navigation which is something along the lines of "whatShouldILookLikeRightNow" make sure you call it no only on resize but also on page load. You could play with doing it via css classes of hide/show, using javascript to append the classes where applicable. If you choose to do it this way, make sure you don't hide anything by default in case javascript is turned off. Otherwise the user won't be able to see any links to click on!

I honestly have no idea which option is best.. I imagine there's not much in it!