CSS 'menu' hover table cell background color

Discussion in 'CSS' started by white.lotus, Mar 19, 2013.

0
  1. #1
    Hi,

    I'm trying to for a CSS 'menu' script that when a table cell is hovered the cell background color changes.

    Here are 2 good examples of what I'd like, in action (note: this doesn't reflect my personal music taste!):

    http://www.bonjovi.com/whataboutnow
    (It is highly preferred to have 'cells' that contain logos, such as amazon, iTunes, etc.)

    http://twentytwenty.justintimberlake.com/
    (click buy now at top of page - I'd prefer the code to not be 'pop-up' - instead more like the Bon Jovi page.)


    Just need a little push in the right direction - don't need all buttons written out! I can infer from an example table and plug in my own variables.

    Thanks in advance - greatly appreciated!! :)
     
    white.lotus, Mar 19, 2013 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    99.99% of your problem -- TABLES. That's tables for layout and no reason any menu should EVER be in table tags. Menus are a LIST of choices, which is why UL/LI is the correct semantic tags, NOT tables.

    Second problem, you're trying to color the container instead of the anchor. Set the anchors to display:block or display:inline-block (depending on how you're handling you spacing or LI) and color those instead. You should probably already have one of those set anyways so the entire anchor is clickable, instead of just the text.
     
    deathshadow, Mar 19, 2013 IP
  3. gandalf117

    gandalf117 Active Member

    Messages:
    111
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #3
    I agree with deathshadow. Don't use table when it comes to menus.

    Take a look at how they have done it in on of the websites you gave as an example:

    <ul class="menu">
<li class="tour"><a href="">Tour</a>
<ul class="submenu tour">
<li><a href="">Tickets</a></li>
<li><a href="">Backstage JBJ Pre-sale Tickets</a></li>
<li><a href="">Backstage JBJ VIP Packages</a></li>
<li><a href="">VIP Experience</a></li>
<li><a href="">Runaway Tours Packages</a></li>
<li><a href="">JBJSF Packages</a></li>
<li><a href="">Past Dates</a></li>
</ul>
</li>
<li class="news"><a href="">News</a></li>
<li class="gallery">
<a href="">Gallery</a>
<ul class="submenu tour">
<li><a href="">Photos</a></li>
<li><a href="">Videos</a></li>
</ul>
</li>
<li class="music"><a href="">Music</a></li>
<li class="store"><a href="">Store</a>
<ul class="submenu store">
<li><a href="">Featured Products</a></li>
<li><a href="/">Tour Photos</a></li>
<li><a href="">Music Store</a></li>
</ul>
</li>
<li class="fanclub"><a href="">Fan Club</a></li>
</ul>
    HTML:
    Now the css for the fist hover menu will look something like:

    li.tour:hover
    {
    background:...;
    }

    li.tour:hover ul
    {
    display:visible;
    }

    You have to position li.tour ul in the right place. Set a couple of properties and that should do it.
     
    gandalf117, Mar 22, 2013 IP