Menu background change

Hi,

I have the code below

   <div id="menu">
                <ul>
                    <li><a href="Home.aspx">Home</a></li>
                    <li><a href="Download.aspx">Download</a></li>
                    <li><a href="Blog.aspx">Blog</a></li>
                    <li><a href="FAQ.aspx">FAQ</a></li>
                    <li><a href="Contact.aspx">Contact Us</a></li>
                </ul>
            </div>

in the CSS I have

#menu
{
      width: 940px;
      height: 76px;
      margin: 0px auto;
      padding: 20px 20px 0px 20px;
}

#menu ul
{
      margin: 0;
      padding: 0px 0px 0px 0px;
      list-style: none;
      line-height: normal;
}

#menu li
{
      float: left;
}

#menu a
{
      display: block;
      float: left;
      height: 56px;
      margin: 0px;
      padding: 0px 30px 0px 30px;
      line-height: 56px;
      letter-spacing: -1px;
      text-decoration: none;
      text-transform: uppercase;
      font-family: 'Arvo' , serif;
      font-size: 14px;
      font-weight: normal;
      color: #B5B5B5;
      border: none;
}


#menu a:hover
{
      text-decoration: none;
      color: #FFFFFF;
      background: url(../images/img03.jpg) repeat-x left top;
}


I want to make sure that once a link on the menu has been clicked that img03 stays on the background and if the user click another link on the menu that that images moves to the other link

please

R8VI
R8VIAsked:
Who is Participating?
 
Rajar AhmedConnect With a Mentor ConsultantCommented:
Try this,
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style>
        #menu
{
      width: 940px;
      height: 76px;
      margin: 0px auto;
      padding: 20px 20px 0px 20px;
}

#menu ul
{
      margin: 0;
      padding: 0px 0px 0px 0px;
      list-style: none;
      line-height: normal;
}

#menu li
{
      float: left;
}

#menu a
{
      display: block;
      float: left;
      height: 56px;
      margin: 0px;
      padding: 0px 30px 0px 30px;
      line-height: 56px;
      letter-spacing: -1px;
      text-decoration: none;
      text-transform: uppercase;
      font-family: 'Arvo' , serif;
      font-size: 14px;
      font-weight: normal;
      color: #B5B5B5;
      border: none;
}


#menu a:hover
{
      text-decoration: none;
      color: #FFFFFF;
      background: url(../img03.jpg) repeat-x left top;
}
#menu a.selected 
{
      text-decoration: none;
      color: red;
      background: url(../img03.jpg) repeat-x left top;
}

    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            var url = window.location.href;
            url = url.substr(url.lastIndexOf("/") + 1);
            $("#menu").find("a[href='" + url + "']").addClass("selected");
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
 <div id="menu">
                <ul>
                    <li><a href="Home.aspx">Home</a></li>
                    <li><a href="Download.aspx">Download</a></li>
                    <li><a href="MenuHover.aspx">Blog</a></li>
                    <li><a href="FAQ.aspx">FAQ</a></li>
                    <li><a href="Contact.aspx">Contact Us</a></li>
                </ul>
            </div>

    </form>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
0
 
leakim971PluritechnicianCommented:
With jQuery : http://jsfiddle.net/2FKuk/5/

$(document).ready(function() {
    $("#menu a").click(function(evt) {
        evt.preventDefault();
        $("#menu a.active").removeClass("active");
        $(this).addClass("active");
    })
})¿

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.