CODEWITHSUNDEEP
jquery
user3777827
user3777827

Reputation: 344

Auto selected li in a menu using jQuery

I have a dropdown menu which is using jQuery on hover . You can take a look at this here in the side bar

The jQuery code I am using is

    $(document).ready(function(){
         $( ".sidebarnav ul.sf-menu" ).find('li').hover(function() {
                $(this).find('> ul').toggle("slow");
         },
         function() {
            $(this).find('> ul').toggle("slow");
         });
    });

Now I have a query. I want a li being selected according to which product is open on this page. This can be done by finding the li text in the menu.

If I have a value of li say "Wing Banner". Then Can I open the exact li "Wing Banner" in the sidebar menu.

Upvotes: 0

Views: 822

Answers (3)

Dinesh Mandaviya
Dinesh Mandaviya

Reputation: 192

please make a class as below then work do with script

.selected-menu {background-color:#eee;}

<script> 
    $(document).ready(function(){

      $( ".sidebarnav ul.sf-menu li a" ).click(function() {
         $( ".sidebarnav").find(".selected-menu").removeClass(".selected-menu");
         $(this).parents("li").addClass(".selected-menu")

     });


   });

</script>

Upvotes: 0

logan Sarav
logan Sarav

Reputation: 781

Yes,you can do this:

Step1: Initially find the page which is loading in the content,in your case it is "Wing Banner", and it is in the p tag with class productpage_title. using jquery find the page title(make sure the page title and title in the side menu are same else you have to use other way to find the page which is loading).

Step2: Then in the sidebar, using jquery you can find the li under which ul it is present, the apply the css to show the li(apply the current class which shows the li on hover)

Have updated the my using a basic fiddle. Just give it a try.

 $('#cssmenu li a').each(function(){ 
    if($(this).text() == $('#your_id').text()){ 
        $(this).css('background-color','blue').closest('ul').show();
    }
});

From my fiddle, on the slidebar perform a each function to check, if it has the title you need, then if it has just show it.

Upvotes: 0

flipper
flipper

Reputation: 146

from your question i found that you need to open the side bar based on the text that is present in theproduct_title entry-title

you have to find the ul in which the li is present so write a each function on li example

 $("li").each(function(){
 alert($(this).text());
 if(the text is same)
 {
 find parent using parent() (i.e) the ul and toggle it
 }
 });

i assume that u have to toggle it once again when the user is hovering on the over ul elements so add the toggle function once again so that the old toggle in your case banners and flags will go off.

Upvotes: 2

Related Questions