CODEWITHSUNDEEP
cssimagetextmenunavigation
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

Viewable Text & Image Website Navigation Menu - CSS

My question is one that I was sure would be a common one, but to the best of my efforts, I cannot find any tutorials about this at all.

I am looking to build a text & image navigation menu for a website. It seems to me that many people would want to do something like this, but either I am totally missing a simple concept or many people aren't looking to do something like this.

My Exact Goal: Create a navigation menu with pictures on top and CSS styled text on the bottom. When you focus or hover over the picture, the image changes AND the text changes as if they were one item.

My Problem: On my button, if you hover over the text, the image and text change. If you hover over the image, ONLY THE IMAGE changes as if they are two separate entities.

My HTML:

    <!DOCTYPE HTML>
    <html>
    <head>

      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charset="UTF-8" />

      <link rel="stylesheet" type="text/css" href="test2.css" />

    </head>

    <body>


        <ul>
        <li id="onlineRugStore"><a href="#"id="test"><b>Button</b></a></li> 
        </ul>

​

The CSS:

    body{
    background-color:#e8f1c4;  
    }

    #onlineRugStore a{
    display:block;
    width:191px;
    height:107px;
    background:url('bestimages/test/worktest.gif') 0 0;
    }

    #onlineRugStore a:hover{
    background:url('bestimages/test/worktest.gif') 0 -107px;
    }

    #test b{
    position:absolute;
    text-align:center;
    margin:110px 0 0 0;
    font-size:18px;
    color:white;
    text-decoration:none;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    width:191px;
    height:24px;
    background-color:#cc7bd6;
    opacity:0.45;
    filter:alpha(opacity=45);
    padding:4px 0 0 0;
    }

    #test b:hover{
    opacity:1.0;
    }

    ul{
    list-style-type:none;
    }

An example of what I am talking about can be viewed at: http://kokorugs.com/test2.php

After exhausting all efforts, I thought that this may be impossible, and then I found a working example on the following website: http://www.amazeelabs.com/en (notice the navigation menu).

I appreciate any and all help.

Happy Holidays, Raphael

Upvotes: 0

Views: 750

Answers (1)

Michelle
Michelle

Reputation: 2712

I've created a JSfiddle for you: http://jsfiddle.net/drXng/

The code you see in the CSS should explain clearly what is going on.

/*CSS you want to apply to the element wrapping both the text and picture*/
.both {
 opacity: 0.5;
width: 200px;
height: 200px;
display: block;
}

/*CSS you want to apply to the text only before it is hovered*/
.text {
background-color: green;
}

/*CSS you want to apply to the picture only before it is hovered*/
.picture {
  width: 50px;
  height: 50px;
}

/*CSS you want to apply to the element wrapping both both the text and picture after hovered*/
.both:hover {
opacity: 1;
}

/*CSS you want to apply to text when both are hovered*/
.both:hover .text {
  background-color: blue;
}

/*CSS you want to apply to picture when both are hovered*/
.both:hover .picture {
background-color: red;
}​

In your case, it could be easily done by changing .both to ul. For example, the following css will change #test b's opacity as long as anything inside ul is hovered.

ul:hover #test b{
opacity:1.0;
}

P.S. as a word of advice, try to avoid using ID selectors in CSS if you can. :)

Upvotes: 2

Related Questions