selected menu item style RSS

• • Reply
  

  basmaa

  Member

  130 Points

  136 Posts

  selected menu item style

  Mar 03, 2012 08:20 PM|LINK

  I have Menu as example:

  <div class="AspNet-Menu-Horizontal">
    <ul class="AspNet-Menu">
       <li class="AspNet-Menu-Leaf">
  	<div class="AspNet-Menu-1">
  	   <a class="AspNet-Menu-Link" href="#">
  	       index
  	   </a>
  	</div>
       </li>
       <li class="AspNet-Menu-WithChildren">
  	<div class="AspNet-Menu-2">
  	   <a title="producr" class="AspNet-Menu-Link"        href="#">product
  	   </a>
  	</div>
  	<ul class="AspNet-SubMenu-1">
  	  <li class="AspNet-Menu-Leaf">
              <a class="AspNet-Menu-Link" href="#">
                p1
              </a>
  	  </li>
  	  <li class="AspNet-Menu-Leaf">
              <a class="AspNet-Menu-Link" href="#">
  	      p2
  	    </a>
  	  </li>
         </ul>
       </li>
       <li class="AspNet-Menu-Leaf">
         <div class="AspNet-Menu-3">
  	<a title="customer" class="AspNet-Menu-Link" href="#">
  	  customer
  	</a>
        </li>

  when i hover on any item i can change its style. but i need when i select item change its style and this style remain exist until select another item.

  can anybody help me??

  • Edited by basmaa on Mar 12, 2012 08:09 AM
  • Edited by basmaa on Mar 12, 2012 08:09 AM
• • Reply
  

  breath2k

  Contributor

  2101 Points

  821 Posts

  Re: selected menu item style

  Mar 06, 2012 02:43 PM|LINK

  Use jQuery and change the cssclass when the link is clicked i.e.:

  $(".AspNet-Menu-Link").click(function() {
      // remove from other links in case new selection
      $(".AspNet-Menu-Link").each(function() {
          $(this).removeClass("selectedClass");
      });
  
      // Add class to selected link
      $(this).addClass("selectedClass");
  });

• • Reply
  

  basmaa

  Member

  130 Points

  136 Posts

  Re: selected menu item style

  Mar 10, 2012 11:19 AM|LINK

  breath2k

  Use jQuery and change the cssclass when the link is clicked i.e.:

  $(".AspNet-Menu-Link").click(function() {
      // remove from other links in case new selection
      $(".AspNet-Menu-Link").each(function() {
          $(this).removeClass("selectedClass");
      });
  
      // Add class to selected link
      $(this).addClass("selectedClass");
  });

  i used u code and make css

  <style type="text/css">
          .selectedClass
          {
              background: green;
          }
      </style>

  but when page postback, the style disappear. i want to keep selected style after postback?

• • Reply
  

  breath2k

  Contributor

  2101 Points

  821 Posts

  Re: selected menu item style

  Mar 11, 2012 09:43 PM|LINK

  Try putting something like this between the <asp:TreeView> tags:

  <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px" VerticalPadding="0px" />

• • Reply
  

  basmaa

  Member

  130 Points

  136 Posts

  Re: selected menu item style

  Mar 12, 2012 08:10 AM|LINK

  i solved it using javascript

  • Marked as answer by basmaa on Mar 12, 2012 08:10 AM