I want graceful degradation on my drop down menu

[Matine]

I think I have used a script from David's class to create my jQuery drop down menu. However, when Javascript is disabled, the menu won't display the next layer which it needs to otherwise it means people wont be able to access the sub menu if they have disabled JavaScript. I asked Prisca yesterday how I would do about this and she said it should be the JavaScript that hides the sub menu, not the CSS. I understand her in theory but when looking at my code I can't work out what to do. My CSS doesn't have anything hidden so it must be the jQuery doing it.

Does anyone know how to edit mys script or have a new better one?

My jQuery is:

<script type="text/javascript">
$(document).ready(function(){
     $("#link a").click(function(){        
        $("#portfolio-nav").slideToggle("slow");
return false;     }); });
</script>

And my markup is:

<ul id="main-nav">
    <li><a href="#">Link 1</a></li>
    <li id="link"><a href="#portfolio-nav">Portfolio</a></li>
    <li><a class="current" href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul> <!--close main-nav-->

<ul id="portfolio-nav">
    <li><a href="#">Photography</a></li>
    <li><a href="#">Web</a></li>
    <li><a class="current" href="#">Graphic</a></li>
    <li><a href="#">Artwork</a></li>
</ul> <!--close portfolio-nav-->

Thanks in advance!!

Matine

[Matine]

Sorry about the markup on that post, it's formatting very badly, all together in one chunk. It's basically just two sets of unordered lists. 'main-nav' and 'portfolio-nav'

[David]

I've formatted your markup

Prisca is correct. The principle is that JavaScript is used to hide the sub-menu and then to reveal it on click or whatever. So that in the case where JavaScript is turned off, it never gets hidden in the first place.

.slideToggle simple reverses the visibility state - if it's hidden, it will be revealed and if it displays, it will be hidden. Looking at your code, the sub-menu should begin revealed because you are not hiding it (unless you are doing this with CSS!). So I can't troubleshoot.

I suggest you look at some simple examples of drop-down menus and see if you can work them out. Start with Chris Coyier's: http://css-tricks.com/simple-jquery-dropdowns/

[uzoma]

I was thinking, with CSS3 crossing over from pure presentation to also include handling of events, can this be done purely with CSS? And won't that solve the degradation issues that might arise in this case?

[David]

Quite so, Here's a good example: http://webdesignerwall.com/tutorials/css3-dropdown-menu

There's no nice animation effect on this one but still, it's JavaScript free.

[uzoma]

Thanks David. nice tutorial!

[Prisca]

Matine ;)

have a look at this post on webeyedea - there are 2 links to demos I created to teach jQuery dropdowns, as well as some links for useful articles ~ might be useful :)
These are litereally just samples, not necessarily ideal in design and CTA - but should be good examples. 2 different versions: one simple slide/reveal - the other the accordion drop down.

→ jQuery Drop Downs