Question

I’m trying to build my own custom dropdown menu that should remember it’s vertical position like a normal <select> tag. The dropdown works fine already there is just this little thingy I want to improve.

this is my html structure:

<div class="select width210" id="sortby1">
       <ul>
           <li class="option darr" title="all">show all</li>
           <li class="option" title="published">published only</li>
           <li class="option" title="unpublished">private only</li>
       </ul>
    </div>

this is my jquery:

/**
     * Select Boxes
     *
     */   
    var currentSelectDiv = null;
    $('.select ul li.option').click(function(e) {
        //storing the id attribute
        currentSelectDiv = $(this).parents("div.select").attr("id");

        $(this).siblings().toggle().removeClass('darr');
        $(this).addClass('darr');
    });

    $(document).click(function(e) {
        $('.select ul li.option').each(function() {
            // check IDs to make sure only closing other lis
            if( $(this).parents("div.select").attr("id") !=
               currentSelectDiv) {
                if ( !$(this).is(":hidden" ) ) {
                    $(this).not('.darr').toggle();
                }
            }
        });
        currentSelectDiv = null;
    });

The problem is I can’t actually explain the thing without referencing to a live example.
http://jsfiddle.net/veUwn/

As you can see the dropdown works like a charm. It behaves like an actual drop down where the li.option‘s are actually dropping DOWN. However I don’t want them to dropdown but remain its vertical position just like the actual select field underneath. If you select a option further down in the select field the vertical position of the select stays intact – so the options are not actually dropping down but just appear in a layer above.

Any idea how I can achieve the same thingy with my own select.ul’s ?

Thank you for your help.

edit:

Answer 1

Well it’s a start anyhow… fundamentally, you are trying to perform an action that a select box does without mimicking the structure of a select. You need a dummy first option that just displays the selected option.

http://jsfiddle.net/CVc2Z/1

Edit

Aaaaaand option two:

if($(this).siblings().is(":hidden"))
            $(this).parent().css({marginTop:"-" + currentSelectElement .index() * 32 + "px"});
        else
            $(this).parent().css({marginTop:"-" + 0 + "px"});

...

$(this).parent().css({marginTop:"-" + 0 + "px"});

http://jsfiddle.net/RDk4P/