I need button to STAY selected not only when hovered but also clicked...

Discussion in 'HTML & Website Design' started by nycionx, Feb 28, 2013.

  1. #1
    Hey there! I heard this was the best forum to ask web design questions so I'll shoot with my first one. :)

    I need to make a website where the links/buttons show a selected version of that button not only when I hover over them, but also when I click them, so they STAY selected (see the attached pics for a better idea of what I need done here). When I click lets says "Pants", the button will stay red and the brands that are available for sale will turn black, the ones that aren't will remain grey. Then when I click on one of the brands in black, they will turn red and in the big box it will show the title (ie. adidas) and then feature the products/pics in those rectangles.

    sample1-01.png = unselected versions
    sample1-02.png = EXAMPLE
    sample1-03.png = selected versions
     

    Attached Files:

    nycionx, Feb 28, 2013 IP
  2. Nicholas Pope

    Nicholas Pope Well-Known Member

    Messages:
    357
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    165
    #2
    In your style.css file (maybe named something else but will have .css extension) you can make or change current settings. Please search for a guide on proper css terms but this will give an idea.

    .links li a {
        color:  html color code;
        Style:  none;
    }
    .links li a:hover {
        color:  html color code;
        Style:  Underline;
    }
    .links li a:active {
        color:  html color code;
        style    Underline;
    }
    Code (markup):
    I hope this helps you.
     
    Nicholas Pope, Feb 28, 2013 IP
  3. Riboflavin

    Riboflavin Well-Known Member

    Messages:
    1,091
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    155
    #3
    The best and easiest way to do something like this is to apply an 'active' class on the appropriate pages and style them appropriately. So on your homepage your 'home' links would have class="active" etc
     
    Riboflavin, Mar 2, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Since those do not appear to be form elements I'm going to assume you mean "anchor" when you say "button" (NOT that one should really ever use the BUTTON tag -- pointless idiotic redundancy in the specification that it is)...

    If so, then when you click each takes you to a new page, correct? If so, riboflavin is on the mark, you need to say on EACH page which one is 'current' using something like a class (Personally, I'd avoid using a class named "active" since there's a pseudostate of the same name)... since as it would be a separate page things like what was clicked on some other page does not apply.

    Though if you are using frames, iframes, or javascript asshattery to piss all over accessibility using AJAX for nothing or DHTML trickery, that's a horse of a different color.
     
    deathshadow, Mar 5, 2013 IP
  5. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #5
    Please put below CSS class in your css file. Just change my .menu1 to your class name. Also give .current class which page you will needs to be active.

    .menu1 li.current a {color:#fff; background:url(button3.gif);}
    .menu1 li.current a {background:url(button3.gif) no-repeat right top;}
    .menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
    .menu1 li a:hover {background:url(button2.gif) no-repeat right top;}
    .menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
    .menu1 li.current a:hover {background:url(button3.gif) no-repeat right top;}
     
    creativewebmaster, Mar 5, 2013 IP
    JoyGoRound likes this.