CODEWITHSUNDEEP
jqueryhtmlcssselectdrop-down-menu
matt
matt

Reputation: 44293

CSS and Jquery: custom dropdown with postioning like <select>

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:

enter image description here

Upvotes: 1

Views: 2744

Answers (2)

Joseph Marikle
Joseph Marikle

Reputation: 78520

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/

Upvotes: 1

yoozer8
yoozer8

Reputation: 7489

When expanding the list, adjust the style attribute to change its position such that it lines up properly. To do this, it would be best to have set consistent sizes for each list item.

Upvotes: 0

Related Questions