javascript - Making DropDown menu 'DropUp' - Stack Overflow

admin管理员组

文章数量:1421031

I am trying to implement a drop up menu. As a starting point I am using an existing drop down menu built using HTML/CSS/jQuery based on CSS trick's Simple jQuery Dropdowns. (As I couldn't get a pure css one to work on touch devices as they relied on hover states.)

I have made a little bit of progress fiddling with ul.dropdown ul {top: -100%; } but this only moves the dropdown up one 'row', I am not convinced that's semantic css.

Any ideas how I could achieve this ?

I have made a jsfiddle of the problem here - /

I am trying to implement a drop up menu. As a starting point I am using an existing drop down menu built using HTML/CSS/jQuery based on CSS trick's Simple jQuery Dropdowns. (As I couldn't get a pure css one to work on touch devices as they relied on hover states.)

I have made a little bit of progress fiddling with ul.dropdown ul {top: -100%; } but this only moves the dropdown up one 'row', I am not convinced that's semantic css.

Any ideas how I could achieve this ?

I have made a jsfiddle of the problem here - http://jsfiddle/TTTb6/

• javascript
• jquery
• html
• css
• drop-down-menu

Share Improve this question Follow edited Sep 16, 2015 at 20:19 adrien54 1,64011 gold badge2626 silver badges3232 bronze badges asked Apr 26, 2013 at 16:13 samsam 10.2k4040 gold badges114114 silver badges167167 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try changing this:

ul.dropdown ul {
    bottom: 100%;
}

Updted jsfiddle

Instead of top, use bottom: 100%;:

ul.dropdown ul {
    position: absolute;
    bottom: 100%;
}

For touch devices you need to write code in click event. please check this one here you will get your answer...

Click to close jQuery dropdown menu on mobile devices while retaining other behavior

本文标签： javascriptMaking DropDown menu 39DropUp39Stack Overflow