CODEWITHSUNDEEP
javascriptasp.netmenu
ahmgeek
ahmgeek

Reputation: 201

asp.net active menu item highlighting

i have a master page and some child pages , i want when i open a page from the menu to collapsed in and stay highlighted i have it in this structure 

     <ul id="menu"  class="unstyled accordion collapse in">


                <li id="MenuDash" class="accordion-group">
                    <a data-parent="#menu"
                         data-toggle="collapse" class="accordion-toggle" data-target="#dashboard-nav">
                        <i class="icon-dashboard icon-large"></i> Dashboard <span
                            class="label label-inverse pull-right">2</span>

                    </a>
                    <ul class="collapse" id="dashboard-nav">
                        <li><a href="/Default.aspx"><i class="icon-home"></i> Dash Board</a></li>
                        <li><a href="/Status.aspx"><i class="icon-bar-chart"></i> Status</a></li>
                    </ul>
                </li> </ul>

so the active class is 

"active"

and the collapsed in classes are 

"collapse in"

i tried this code in default.aspx but it didn't worked 

<script type="text/javascript">
   $('#dashboard-nav').removeClass("collapse");
   $('#dashboard-nav').addClass("collapse in");
</script>

Upvotes: 0

Views: 600

Answers (2)

RAJESH KUMAR
RAJESH KUMAR

Reputation: 517

On every aspx page use this.

   <script type="text/javascript">
       $(document).ready(function () {
        $('#dashboard-nav').addClass('selected');
        $('.menu li a').hover(function () {
            $('.menu li a').removeClass('selected');
            $(this).addClass('active');
        });
        $('.menu li a').mouseleave(function () {
            $('#dashboard-nav').addClass('selected');
        });
    });
   </script>

and CSS

.menu li a:hover,.menu li a.selected
{
background-color :  #E5E5E5;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
color:Black ! important;
font: normal 12px Trebuchet MS;

}

You can modify according to your requirement

Upvotes: 0

markS
markS

Reputation: 580

as the comments indicated make your class a single word name, also wrap your code to make sure the js is executed after the dom elements are alredy on the page.

in addition instead of removing class adding class try toggle jquery toggle event with something like this ...

$('#dashboard-nav li').toggle(function() {
     alert('First handler for .toggle() called.');
}, function() {
     alert('Second handler for .toggle() called.');
});

Upvotes: 1

Related Questions