+ Reply to Thread
Results 1 to 7 of 7

Thread: I want graceful degradation on my drop down menu

  1. #1

    Default I want graceful degradation on my drop down menu

    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:

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

    Code:
    <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

  2. #2

    Default

    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'

  3. #3

    Default

    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/
    Perhaps late-night surfing is not such a waste of time after all: it is just the Web dreaming. Tim Berners-Lee
    Currently listening to: Script of the Bridge by The Chameleons

  4. #4

    Default

    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?
    strictlyjc...

  5. #5

    Default

    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.
    Perhaps late-night surfing is not such a waste of time after all: it is just the Web dreaming. Tim Berners-Lee
    Currently listening to: Script of the Bridge by The Chameleons

  6. #6

    Default

    Thanks David. nice tutorial!
    strictlyjc...

  7. #7

    Default

    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
    Last edited by Prisca; 7th Mar 2012 at 12:28 pm.

+ Reply to Thread

Similar Threads

  1. Drop-down Menus
    By stevepender100 in forum General
    Replies: 0
    Last Post: 11th Nov 2011, 10:07 pm
  2. One Thing I Don’t Like About Drop-Down Menus
    By Impressive Webs in forum Web Design RSS Feeds
    Replies: 0
    Last Post: 7th Nov 2011, 04:19 pm
  3. Is it Accurate to call HTML5-Based Code Forking “Graceful Degradation”?
    By Impressive Webs in forum Web Design RSS Feeds
    Replies: 0
    Last Post: 14th Dec 2010, 02:57 pm
  4. Graceful E-Mail Obfuscation
    By A List Apart in forum Web Design RSS Feeds
    Replies: 0
    Last Post: 6th Nov 2007, 04:59 pm
  5. Easy CSS drop shadows
    By francis in forum Code
    Replies: 0
    Last Post: 13th Feb 2005, 08:10 am

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts