highlight menu options

Question

i am trying to highlight the following menu

<ul class="listing">
<li><a href="Review.html">Review</a></li>
<li><a href="Preview.html">Preview</a></li>
<li><a href="Images.html">Images</a></li>
<li><a href="Videos">Videos</a></li>
</ul>

And the css

 .listing li{display: inline;
            text-decoration: none}

ul.listing a{font-size: 15px;
              text-align: justify;
              text-decoration: none}

ul.listing a:hover{box-shadow: inset 0px 12px 15px -2px gray }




ul.listing{margin-left: 150px;
           padding: 5px;    
           background: ;
           box-shadow: inset 0px -20px -2px -16px #812;
           width: 940px;
           height:  25px;
           margin-top: 100px;
       }

How do I do it?

I created [a jsfiddle](http://jsfiddle.net/LgymJ/) for this. — Martin Hennings, Feb 22 '12 at 12:26
your html is not valid (closing `a` without opening), and your question is not clear. Please explain in more detail what you are trying to achieve — Billy Moon, Feb 22 '12 at 12:28

score 1 · Answer 1 · answered Feb 22 '12 at 12:30

1

What do you mean by highlight? It sounds like you could accomplish this by adding a div surrounding your ul and giving it a highlighted background color.

#nameOfDiv{
    background-color: #FFFF00;
}

Also, like Billy Moon said, you need to fix your tags.

answered Feb 22 '12 at 12:30

SnakeBombs

21
2

never mind the tags, thats just a small error. What I need to work out is the highlighting, and to be more specific i mean that i want the current page i am in to be highlighted. – Johnny Hankgard Feb 22 '12 at 12:36

score 1 · Accepted Answer · answered Feb 24 '12 at 09:19

Try this,

Your codes are correct, only problem was you forgot to add a dot before your class defenition in css. I have corrected it. now your code is working.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
<style type="text/css">

.listing{margin-left: 150px;
           padding: 5px;    
           background: ;
           box-shadow: inset 0px -20px -2px -16px #812;
           width: 940px;
           height:  25px;
           margin-top: 100px;
       }
 .listing li{display: inline;
            text-decoration: none}

.listing a{font-size: 15px;
              text-align: justify;
              text-decoration: none}

.listing a:hover{box-shadow: inset 0px 12px 15px -2px gray }





}
</style>
</head>

<body>

<ul class="listing">
<li ><a href="Review.html">Review</a></li>
<li><a href="Preview.html">Preview</a></li>
<li><a href="Images.html">Images</a></li>
<li><a href="Videos">Videos</a></li>
</ul>


</body>
</html>

score 0 · Answer 3 · edited May 23 '17 at 12:02

0

just use equal js function to get filename from url to get the url name. then:

if you got in var filename your filename then just do following:

$("#listing a[href="+filename+"]").addClass("highlightclass");

this should add the class to the link with the given href to highlightclass

edited May 23 '17 at 12:02

Community

1
1

answered Feb 22 '12 at 14:50

Neysor

3,893
11
34
66

highlight menu options

3 Answers3