2

I am using this tutorial

http://www.1stwebdesigner.com/css/create-sliding-navigation-menu-jquery/

this is the index.html file:

!DOCTYPE html> Jquery Sliding Navigation Menu

    <ul id='header_nav'>
        <li><img src="images/home-icon.png" /></li>
        <li>About Us</li>
        <li>Categories
            <ul>
                <li><a>Coding</a></li>
                <li><a>Freebies<span class="arrow-right"></span></a>
                    <ul>
                        <li><a>Icons<span class="items_num">5</span></a></li>
                        <li><a>Templates<span class="items_num">10</span></a></li>
                        <li><a>Fonts<span class="items_num">3</span></a></li>
                    </ul>
                </li>
                <li><a>Tutorial<span class="arrow-right"></span></a>
                    <ul>
                        <li><a>Icons<span class="items_num">5</span></a></li>
                        <li><a>Templates<span class="items_num">10</span></a></li>
                        <li><a>Fonts<span class="items_num">3</span></a></li>
                    </ul></li>
                <li><a>Web Design</a></li>
            </ul>
        </li>
        <li>Archive
            <ul>
                <li><a>Coding</a></li>
                <li><a>Freebies<span class="arrow-right"></span></a>
                    <ul>
                        <li><a>Icons<span class="items_num">5</span></a></li>
                        <li><a>Templates<span class="items_num">10</span></a></li>
                        <li><a>Fonts<span class="items_num">3</span></a></li>
                    </ul>
                </li>
                <li><a>Web Design</a></li>
            </ul>
        </li>
        <li>Contact</li>
        <li>Write For Us ?</li>
    </ul>



    <script>

        $(document).ready(function(){

            $("#header_nav > li ").addClass("level1");
            $("#header_nav  > li > ul > li ").addClass("level2");
            $("#header_nav  > li > ul > li > ul > li ").addClass("level3");

            $(".level1").live("hover",function(){

                $(".level1").removeClass("main_menu_hover");
                $(this).addClass("main_menu_hover");


                var numberofChildren = $(this).find("> ul").children().length;

                if(numberofChildren != 0){
                    // Section 1
                    $(".level1").removeClass("active_main_menu");
                    $(this).addClass("active_main_menu");

                    // Section 2
                    $(".level1").find("ul").css("display","none");
                    $(this).find(" > ul").css("display","block");

                    // Section 3
                    $(".level2").removeClass("active_first_element");
                    $(".level2").removeClass("active_last_element");
                    $(".level2").removeClass("active_only_element");

                    // Section 4
                    if(numberofChildren == 1){
                        $(this).find("ul li:first").addClass("active_only_element");
                    }else{
                        $(this).find("ul li:first").addClass("active_first_element");
                        $(this).find("ul li:last-child").addClass("active_last_element");
                    }

                    // Section 5
                    $(".level2 a").removeClass("sub_active");
                    $(".level2").removeClass("menu_hover");


                }else{
                    // Section 6
                    $(".level1").find("ul").css("display","none");
                    $(".level1").removeClass("active_main_menu");

                }

            });

            $(".level2").find(".arrow-right").attr("href","javascript:void(0);");

            $(".level2 > a").live("hover",function(e){
                $("li").removeClass("menu_hover");
                $(this).parent().addClass("menu_hover");
                e.preventDefault();
            });

            $(".level2 a").live("click",function(){
                $("li").removeClass("menu_hover");

                if($(this).hasClass("sub_active")){
                    $(this).removeClass("sub_active");
                    $(".level2 > ul").slideUp();
                }else{
                    $(".level2 ul").slideUp();
                    $(".level2 a").removeClass("sub_active");
                    $(this).addClass("sub_active");
                    $(this).parent().find("ul").slideDown();
                }
            });





            $(".level3 a").live("hover",function(){
                if(!($(this).parent().hasClass("accordian_element_hover"))){
                    $(this).parent().removeClass("level3").addClass("accordian_element_hover");
                }
            });
            $(".accordian_element_hover a").live("hover",function(){
                $(this).parent().addClass("level3").removeClass("accordian_element_hover");
            });


        });
    </script>

</body> </html>

I have been trying to figure out how to add a different click function to each of the drop dpwn elements.

I have used this:

$(".level2 a").live("click",function(){  
  return false;
});

and it works by adding the same function to every item in the drop down menu. I was wondering how to address each specific one?

2
  • quick note: live() has been deprecated, use on() off() instead. Commented Nov 12, 2012 at 19:39
  • You should use 4 spaces instead of > for highlight code, which is for quoted text. Commented Nov 12, 2012 at 19:57

1 Answer 1

1

If the content is static, you can use something like $('.level2 a:eq(0)'

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.