• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • Last Modified:

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
0
R8VI
Asked:
R8VI
  • 2
1 Solution
 
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
 
Rajar AhmedConsultantCommented:
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now