Making a dropdown list in html/jquery, without following any tutorials

Question

First of all, i know that there are tons of tutorials out there to show how to make a dropdown list, but i wanted to try myself with my limited knowledge to make a very simple one, and i am aware that i am probably doing it wrong, but still i wanna try it.

So this is my problem now, i have set up ul and li in html and i have setup a simple jquery code that it will slideDown the submenu when mouse enters and slideUp the submenu when mouse leaves, but it doesn't work correctly at all.

Code:

<div style="width:200px; height:400px;">
    <ul id="ul" class="menu" style="border:thin solid #090;">
        <li id="li">Test
        <ul id="ull">
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul> 
        </li>
        <li id="li">Test 2A
            <ul id="ull">
                <li>Test 3A</li>
                <li>Test 4A</li>
            </ul>
        </li>
    </ul>
</div>




    <script>
    $(document).ready(function(){
        $("#ul ul").css({"color":"red","font-size":"30px"}).hide();
    });

    $("#li").mouseenter(function(){
        $("#ull").slideDown(400).show();    
    });

    $("#li").mouseleave(function(){
        $("#ull").slideUp(400).hide(100);
    });

    </script>

All this, is inside one html, i am not using anything else, expet a CSS where the class "menu" is just this display:inline-block;

The problem is that dropdown menu doesn't work as it should. When i move my mouse over the Test the sub-menu appears, but this doesn't happen at Test 2A, plus when the dropdown list "drops", Test 2A follows below it aswell.

I can't explain the problem easily so i setup a jsfiddle which will help you understand.

Once again, i know that this is not right and i should have done it by using some other way, but i wanted to try using the few things i've learned so far to make a simple dropdown list.

Thanks in advance.

you are using id="ul" .. id should be unique in dom .. use class instead class="blabla" . I changed jsfiddle jsfiddle.net/eAvQ8/2 — rab
– rab, Commented May 30, 2013 at 9:02
In my opinion, the best solution is to change id at one of the two minor ul and add a row in your function that call it. @Nick — SamDroid
– SamDroid, Commented May 30, 2013 at 9:03
You say "Test 2A follows below it aswell." do you mean the headers should stay at the same level vertically? — Tomi Lammi
– Tomi Lammi, Commented May 30, 2013 at 9:05
@harsha it is not good practice to add event handler to each li#id ids. — rab
– rab, Commented May 30, 2013 at 9:11

Suresh Atta · Accepted Answer · 2013-05-30 09:09:19Z

1

Id must be unique.

 <li id="li">Test

 <li id="li">Test 2A

Change to different id's or use a class

Corrected Fiddle

And do not take li and ul as Id's or classes.Those are reserved key words.Creates mess.

edited May 30, 2013 at 9:09

answered May 30, 2013 at 9:02

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

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

1 Comment

Harsha Venkataramu Over a year ago

And just doing what you said will solve the issue? This looks like a comment more than an answer.

SamDroid · Accepted Answer · 2013-05-30 09:05:34Z

In my opinion, the best solution is to change id at one of the two minor ul and add a row in your function that call it.

<div style="width:200px; height:400px;">
    <ul id="ul" class="menu" style="border:thin solid #090;">
        <li id="li">Test
        <ul id="ull">
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul> 
        </li>
        <li id="li">Test 2A
            <ul id="lull">
                <li>Test 3A</li>
                <li>Test 4A</li>
            </ul>
        </li>
    </ul>
</div>




    <script>
    $(document).ready(function(){
        $("#ul ul").css({"color":"red","font-size":"30px"}).hide();
    });

    $("#li").mouseenter(function(){
        $("#ull").slideDown(400).show();    
$("#lull").slideDown(400).show();    
    });

    $("#li").mouseleave(function(){
        $("#ull").slideUp(400).hide(100);
 $("#lull").slideUp(400).hide(100);
    });

    </script>

Collectives™ on Stack Overflow

Making a dropdown list in html/jquery, without following any tutorials

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related