Making DropDown menu 'DropUp'

Question

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.net/TTTb6/

score 4 · Accepted Answer · answered Apr 26 '13 at 16:19

4

Try changing this:

ul.dropdown ul {
    bottom: 100%;
}

Updted jsfiddle

answered Apr 26 '13 at 16:19

DarkAjax

15,955
11
53
65

NP, it's a long code, things like that are easy to overlook :) – DarkAjax Apr 26 '13 at 16:23
The only quirk ive noticed is that the menu is now back to front - ie. first item in the css is now last, but its not a particular problem as you can just write the list backwards – sam Apr 26 '13 at 16:33

score 2 · Answer 2 · answered Apr 26 '13 at 16:19

2

Instead of top, use bottom: 100%;:

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

answered Apr 26 '13 at 16:19

Derek Henderson

9,388
4
42
71

score -2 · Answer 3 · edited May 23 '17 at 11:44

-2

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

edited May 23 '17 at 11:44

Community

1
1

answered Apr 26 '13 at 16:26

Jilani J

49
5

Of course one has to trigger the event. The OP knows that. The OP is asking about styling (positioning) of an element, not how to trigger events. – Derek Henderson Apr 26 '13 at 16:31

Making DropDown menu 'DropUp'

3 Answers3

Linked