SitePoint Sponsor

User Tag List

Results 1 to 25 of 79

Threaded View

  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 19

    CSS - Test Your CSS Skills Number 19 : Quiz ended - see solution in post #59

    Time to roll out a new quiz and although this may seem similar to recent quizzes it has in fact got nothing in common with them

    Your task this week is to imitate a drop down menu that works when you click the top level menu to reveal the sub menu items. That sounds easy enough but you are not allowed to use any javascript or scripting of any kind and this layout must work in IE6. (I'm not interested in other browsers but my example works in all except Opera.)

    First take a look at the attached image clickdrop.png which shows several screenshots of the menu in different states.

    Each sub menu is made visible by clicking the top level menu and each is revealed in turn as you click along the row. The previous submenu should disappear when you click a new menu item on the top level. The submenu is persistent in that it is not a hover effect and you can move the mouse away and the menu still stays in place (neither is it an :active or :focus effect).

    To clear the last viewed menu from the screen a close menu button is placed at the end which returns the menu to its original collapsed position when clicked. (A close button is needed because the menu will not disappear if you click the same menu item again.)

    All the submenu links should be clickable and send you to the correct location should they be clicked.

    Just study the screenshots to see the exact positions but it is a pretty straight forward example.

    Rules:

    No Hacks
    No Conditional Comments
    No Scripting of any kind
    No Nested anchors (or object, ins, del)
    No Images or background images
    Valid CSS 2.1
    Valid HTML

    ** Most importantly it Must work in IE6 **


    Use your own HTML and CSS but it must be valid. If you can improve on my version and give it better functionality then by all means do.

    Do not post your answers here but PM them to me so that others can have a go without seeing your answers.

    Any questions just ask and remember this is just for fun

    Solutions to the quiz will be posted later in the week (or longer) depending on how it goes

    Have fun .

    Paul

    PS. : In case you missed the other tests you can find them here:
    test 1: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
    test13: test 14: test 15: test 16: test 17:test18:
    Attached Images Attached Images


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
  •