How to make submenu of dropdown to open on the left side or right side automatically depending upon room available

Asked Sep 25 '14 at 11:54

Active Sep 25 '14 at 11:54

Viewed 2,429 times

The submenu shows to the right and is off of the screen when there is plenty of room to pop open on the left. how can i implement the feature that allows submenu to appears to the left rather than right by first checking to see where the menu should appear

Here are the images to show what i exactly mean. (This is typical windows right-click on desktop taken for example)

Submenu on left when there is no room on right

In this image, submenu is opening on left knowing that there is no room on right side.

Submenu on right When there is room on right

In this image, submenu is opening on left knowing that there is room on left side.

I want to implement feature like this.

So, how i can achieve this? I tried tweaking my CSS with this

.sf-menu > li:last-child > ul ul {
  left: auto; // reset the default positioning
  right: 100%; // this makes the submenu fly out to the left
}

with Supposition Plugin written by Joel Birch

this solves it. but i can't use this plugin in my work.

is there any other way to do it ?

asked Sep 25 '14 at 11:54

S J

3,210
1
22
32

3

Plain CSS can't do this. You have to know the width of your submenu, calculate the available space and then add a corresponding CSS class via JavaScript. – chm-software.com Sep 25 '14 at 12:12
Alright. that was helpful. but how should i calculate the available space. that depends on browser windows size. any lead or help ? – S J Sep 25 '14 at 12:18
You should provide some code to make us see what you got already and we will improve it together. – chm-software.com Sep 25 '14 at 12:20
I used above listed plugin. check it out. – S J Sep 25 '14 at 12:21
The plugin seems to work. So where's the problem? – chm-software.com Sep 25 '14 at 12:24
I can't use this plugin in my work. i have to make my own kind of function. – S J Sep 25 '14 at 12:25
So here we are back to the point where we need some of YOUR code to proceed. – chm-software.com Sep 25 '14 at 12:26
1

http://stackoverflow.com/a/11525189/1004312 – Christina Sep 25 '14 at 12:28
@chm-software.com - i can't show my code. it's private repository. i am sorry. i was asking for hints. – S J Sep 25 '14 at 15:40

How to make submenu of dropdown to open on the left side or right side automatically depending upon room available

0 Answers0