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

Posted by Craig Watson
Craig Watson
27,930 Points

jQuery Overlay Navigation (advice please)

Hi everyone!

I have just been working on a little something as an update for my site, not especially familiar with jQuery and am just wanting people to check out my code and give me some advice on how i could improve it.

also is the a shorthand or simply better way to add the links?

or in you opinion should I have created the element straight into the HTML and then css display none followed my jQuery slideToggle ?

Just practising so any advice is more than welcome here is the link

Please ignore the bulky block colour css its just simply for me to get a hold on the functionality!

Thanks Craig

mikes02
mikes02
Courses Plus Student 16,968 Points

In this case there's really no reason to have so much of your markup in jQuery, all of that should be in the HTML. Also, what if a user happened to have JS disabled? I know it seems unlikely, and it probably is, but it could happen, meaning your site would have no navigation because it's completely reliant on jQuery to handle all of it. For an example, disable JS in your browser and load the page and you will see that your navigation is no longer functional.

Marcus Parsons
Marcus Parsons
15,719 Points

I like where your site is headed. I can see you have some good ideas.

mikes02 is absolutely correct, though. If a user navigates to your site (as it stands), there will be no bavigation for them to see. You can mitigate this by having a fallback navigation.

All you need to do to do this is to create your navigation the same way as above via HTML. Set its display to none by default. Then, all you need to do is add the <noscript> element to your page in the head of your page and set the navigation to display whatever you'd like:

<head>
  <noscript>
    <style>
      #myNav { display: block; }
    </style>
  </noscript>
</head>

The <noscript> element will only execute if JavaScript is disabled. I'd want to also tell them, though, "Turn on JavaScript, you blithering idiot!" lol