2
Answers

how to set styles in selected menu item.

Dinesh Ambaliya

Dinesh Ambaliya
12y
2.8k
1
I putted this code in master page to display menus in all this pages.
<ul> 
        <li><a id="lnkHome" href="Default.aspx">Home</a> </li>
        <li><a id="lnkAboutUs" href="AboutUs.aspx">About Us</a> </li>
        <li><a id="lnkDisclaimer" href="Disclaimer.aspx">Disclaimer</a>
        </li> <li><a id="lnkServices" href="Services.aspx">Services</a> </li>
        <li><a id="lnkContactUs" href="ContactUs.aspx">Contact Us</a> </li>
</ul>

And used css to style this menus like ul li,a:hover, a:visited……
Now how I can add difference appearance in particular <a> link if that page is currently visiting.
 E.g. If I click the About Us <a> link then it navigate to AboutUs.aspx page and then I want to
 set background image in that link and background:none in other links.

Answers (2)
2
Deepak Verma
NA 1.7k 690.4k 12y

Attachment menudemo.zip

Hi Dinesh,

Refer to this code:

Master Page:

<head runat="server">
  <title></title>
   <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
   <script src="jquery-1.6.2.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(document).ready(function () {
  $(".menuLinks").click(function () {
  $(".menuLinks").removeClass("selected");
  });
  });
  </script>
   <asp:ContentPlaceHolder ID="head" runat="server">
   </asp:ContentPlaceHolder>
 </head>
 <body>
  <form id="form1" runat="server">
   <div>
   <ul class="menu">
   <li><a id="link1" class="menuLinks" href="Page1.aspx" runat="server">Link 1</a></li>
   <li><a id="link2" class="menuLinks" href="Page2.aspx" runat="server">Link 2</a></li>
   <li><a id="link3" class="menuLinks" href="Page3.aspx" runat="server">Link 3</a></li>
   </ul>
   <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
   </asp:ContentPlaceHolder>
   </div>
   </form>
 </body>
 

StyleSheet.css :

ul.menu li
 {
  float: left;
  list-style: none;
 }
 ul.menu li a
 {
  text-decoration: none;
  font-family: Tahoma;
  font-size: 20px;
  margin: 0px 10px 0px 0px;
  padding: 3px;
  background-color: Black;
  color: White;
  border-radius: 5px;
 }
 ul.menu li a:hover
 {
  background-color: Blue !important;
 }
 ul.menu li a.selected
 {
  background-color: Blue !important;
 } 

Page1.aspx.cs :

 protected void Page_Load(object sender, EventArgs e)
  {
  ((HtmlAnchor)this.Page.Master.FindControl("link1")).Attributes.Add("class", "selected");
  }

Page2.aspx.cs :

 protected void Page_Load(object sender, EventArgs e)
  {
  ((HtmlAnchor)this.Page.Master.FindControl("link2")).Attributes.Add("class", "selected");
  }

Page3.aspx.cs :

 protected void Page_Load(object sender, EventArgs e)
  {
  ((HtmlAnchor)this.Page.Master.FindControl("link3")).Attributes.Add("class", "selected");
  }

Accepted
0
Dinesh Ambaliya
NA 42 59.8k 12y
This will work. Thank you.
Next Recommended Forum