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

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:

enter image description here

Yeah, it's complicated to explain :) … the thing is I want the dropdown not to "drop down" but to STAND OUT like the select tag does in webkit browsers. E.g. open my jsfiddle sample with chrome or safari and click the <select>, choose a option at the bottom of the select tag and close the input - then open it again und you see that the options of the select tag "stand out". So they're not actually dropping down anymore but the current selected element keeps its position. In my case its a regular dropdown. I want it to behave like the select field and keep its position. — matt
– matt, Commented Aug 9, 2011 at 15:14
So you want the list to move to line up the selected item with the select box? — Cloudy
– Cloudy, Commented Aug 9, 2011 at 15:18
yes exactly! imagine in the first box there is the last item selected (private only). And you click on the box - both other option should align above the selected because they are literally above in the list. — matt
– matt, Commented Aug 9, 2011 at 16:05
As far as I can tell, Joseph (below) has answered the question. But I'd just like to point out that as it's currently written, this code is not keyboard operable, which is an accessibility problem. Blind people won't be able to use it properly. — Will Martin
– Will Martin, Commented Aug 9, 2011 at 16:05

Community · Accepted Answer · 2020-06-20 09:12:55Z

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/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 9, 2011 at 15:50

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

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

4 Comments

matt Over a year ago

why do I need a dummy? I think it's just a position problem or something. I think you still didn't get what I'm after. I added an image to explain what I mean!

matt Over a year ago

I think you almost got the idea of what I mean. However I want it even to me simpler. I don't want a dummy box. I want just the hidden option to appear above or below the selected option. see my screenshot. So it doesn't drop down but just "pop out".

Joseph Marikle Over a year ago

@mathiregister ouch... that's a very complicated requirement.

matt Over a year ago

is there a chance to make you first example with the empty first box work better? So that 1.) the startbox is not empty but already has the value of the first option and 2.) that that the same value in the dropdown is hidden once the dropdown is openend - so I don't want the same option to appear twice. I tried a while but can't find a solution.

Cloudy · Accepted Answer · 2011-08-09 15:22:05Z

0

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.

edited Aug 9, 2011 at 15:22

answered Aug 9, 2011 at 12:21

Cloudy

7,5297 gold badges64 silver badges98 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Edit

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related