CODEWITHSUNDEEP
asp.net
Ashok
Ashok

Reputation: 11

How to highlight the navigation bar in master page?

  • Home
  • Add Contact
  • Upload Contact
  • Send Mail
  • Export Contact

    • how to highlight the each link when it click???

    Upvotes: 0

    Views: 780

    Answers (2)

    Ullas
    Ullas

    Reputation: 11556

    I hope the menu links in your master page are something like below.

    Master Page

    <ul>
  <li>
      <asp:LinkButton ID="lbtnHome" runat="server" 
           PostBackUrl="~/Home.aspx">HOME</asp:LinkButton>
  </li>
  <li>
      <asp:LinkButton ID="lbtnAdd" runat="server" 
           PostBackUrl="~/Add.aspx">Add Contact</asp:LinkButton>
  </li>
  <li>
      <asp:LinkButton ID="lbtnUpload" runat="server" 
           PostBackUrl="~/Upload.aspx">Upload Contact</asp:LinkButton>
  </li>
  <li>
      <asp:LinkButton ID="lbtnSend" runat="server" 
           PostBackUrl="~/Send.aspx">Send Mail</asp:LinkButton>
  </li>
  <li><asp:LinkButton ID="lbtnExport" runat="server" 
           PostBackUrl="~/Export.aspx">Export Contact</asp:LinkButton>
  </li>

    Then find each LinkButton in the content page and give the style using JavaScript.
    Add the following JavaScript to all the content Pages.

    Home Page

    <script type="text/javascript">
  var link = document.getElementById('<%=Master.FindControl("lbtnHome").ClientID %>');
  link.style.color = '#3851bc';
</script>

    Add Contact

    <script type="text/javascript">
  var link = document.getElementById('<%=Master.FindControl("lbtnAdd").ClientID %>');
  link.style.color = '#3851bc';
</script>

    Like the same for all other pages.
    Change the color according to your need.

    Upvotes: 2

    Nayana Priyankara
    Nayana Priyankara

    Reputation: 1422

    You can add a new css class with the new styles which should apply to menu item when on click. e.g. 

     .active{
 background-color:red; // example
 }

    Then add a javascript function which se that styles in onClick.set it as onClientClick to all menu items. In the JS function you should set the css class you created to the menu item. you can do it like this.

    document.getElementById("YourElement").className = "active";

    Upvotes: 0

    Related Questions