SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Location
    Coimbatore- India
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question onClick event in css..

    I'm wondering if there is a CSS property or CSS class which acts in a similar manner to the onClick event attribute. Because I am in need of a horizontal drowpdown menu that shows the sub items only after the onclick event happens.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,494
    Mentioned
    164 Post(s)
    Tagged
    1 Thread(s)
    I've never tried it, but if anything might work my guess would be the :active psuedo selector

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You would need javascript to do that although you could fake something with CSS it wouldn't work that well.

    We actually did something similar in the CSS quiz which looked like this. See the quiz for a version that works in Opera as well (quiz 19 I think). However for real use as a drop down I don't think it's a viable idea.

    You should do something like this.

    The nearest you can get with css only is something like this which has limited use as its not persistent.

  4. #4
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, nice menu but disable JS and you got a problem.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    Hmm, nice menu but disable JS and you got a problem.
    Yes as with all these types of drop down menus there are accessibility problems unless you address them properly. The simplest solution when JS is turned off is to make the top level links simply travel to the page with the sub links available somewhere on that page.

    Which is why I quite like this type of menu that is navigable with or without js enabled.

    Most times though drop down menus provide too much choice and is probably a sign that there has not been enough thought given to the way that content is structured.

  6. #6
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Yes, the onclick event is entirely a behavioural attribute, which unfortunately can only be manipulated through scripting. What you need to do is use something like Pauls example or the suckerfish method so that if JavaScript is disabled, your menu will appear on the anchor hover and then you can use JavaScript to override this behaviour to the onclick event as required so that at least people with it disabled will have some level of functionality.

  7. #7
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Most times though drop down menus provide too much choice and is probably a sign that there has not been enough thought given to the way that content is structured.
    All this time I thought I was alone in thinking that drop-downs were a good indicator of poor planning.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


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
  •