Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 86
  • Last Modified:

Handling the alignment of the Drop down Divs

I had this question after viewing Positioning of the DIVs.

So,  all that was suggested works as stated.  However,  the dilemma is that the drop downs can exceed the page width (the rightmost 1 or 2 at the moment) and the dropdown for those cases cannot display the links in columns and has the displayed vertically.  How can I change my CSS to handle that in a generic way?

If not,  what kind of post generation jQuery statements might I use to cause the rightmost dropdowns to instead of dropping down and to the right,  to drop down and to the left?
0
Howard Bash
Asked:
Howard Bash
  • 6
  • 5
1 Solution
 
Julian HansenCommented:
I am not sure I understand. In this sample - the menus are all aligned to the left - as you add top level items to the right the sub menu will still be left aligned?
Can you show us a link / screen shot of the problem?
0
 
Howard BashSenior Software EngineerAuthor Commented:
I think we had discussed that the requirement was to have these dropdowns align with the toplevel link on dropping down.

I agree that a solution would be to have them all left align.  But commenting out the left:0 attribute satisfied the original requirement but surfaced this issue when there are too many items with multiple columns, causing the drop down to be two wide.

It would be great if I could determine the widths of all the drop downs (jQuery?) and change the drop downs for the drop downs that would not display the multiple columns due to the page width constraint.
0
 
Julian HansenCommented:
Sorry - I think you lost me there - can you post a screen shot of the problem.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Howard BashSenior Software EngineerAuthor Commented:
Sorry for the poor description.  Here is a figure that hopefully will be clearer.  I took a good case and marked and commented it up.  Thanks.

DropDownWidthIssue.png
0
 
Julian HansenCommented:
Ok and how would you like it to look - not sure I am understanding the problem here.

Either you left align all the menus or you making the relative to the parent - in which case wide sub menus are not going to work due to the Right Hand border issue.

Can you show me how you would like it to look and we can take from there (apologies but we are often dealing with multiple questions, on volunteered time - the more you can spoon feed us the easier it is to find a solution).
0
 
Howard BashSenior Software EngineerAuthor Commented:
In the figure above, with the "too small border" in affect,  I would want only that rightmost dropdown to be shifted left enough that it would display the columns in their containing div as they do in the "actual width" case (fitting in available space).  

Without special handling for those dropdowns that collide with the "too small border"  the dropdown doesn't look as desired and displays all the links in one column.

Either a shift the transgressing dropdown(s) by only what it needs, or centering it under the navigation panel or leftmost as all the dropdowns would appear with this:

.sub-menu {
  background: #fff;
  border: 1px solid black;
  display: none;
//  left: 0;
  position: absolute;
}

Open in new window


and the "left: 0" uncommented.  

I would think that somehow in javascript/jQuery it would be possible to adjust the attribute(s) of the offending sub-menu(s) by querying the total width, their position on the screen and the sub-menu(s) widths in the document ready event.  I'm not sure of the details of how, but it seems like programmatically something like that could work.
0
 
Julian HansenCommented:
Do you mean something like this

http://www.marcorpsa.com/ee/t1578a.html

Basically you position the left: auto but the last menu item's submenu you make right 0
.sub-menu {
  background: #fff;
  border: 1px solid black;
  display: none;
  left: auto;
  position: absolute;
}
.item:last-child .sub-menu {
	right: 0;
}

Open in new window

0
 
Howard BashSenior Software EngineerAuthor Commented:
Pretty cool.  But not exactly.  Because the DIV structure is generated from a JSON file and that there is no way to no before you generate the DIVs which dropdown will have two many columns, the solution you have shown (which again is cool) doesn't know which is the rightmost DIV that can pop below the top level link before it needs to be shifted.

By the way,  using left:0 for the last-child is closer, but again is a hardcoding of which sub menu needs special treatment.  For example,  if the 2nd DIV had enough columns, it would need to have the "LEFT:0" setting.
0
 
Julian HansenCommented:
I think you are making this more complicated than it needs to be. The permutations of menu's and screen sizes and having to calculate widths probably can be done with some javascript but when you start getting into that level of detail for a menu you should be reconsidering what it is you are trying to do.

The type of menu you are describing (a multicolumn drop-down) is in wide use but typically results in a dropdown panel  that spans the entire width of the menu bar - not selectively left / right or under its parent depending on content.

Two samples I found
1. Oracle
https://www.oracle.com/index.html

2. This one is probably what you are trying to do ?
http://www.cssplay.co.uk/menus/multi-column.html
0
 
Howard BashSenior Software EngineerAuthor Commented:
Great stuff
0
 
Julian HansenCommented:
@hbash,

Do you still need assistance with this question?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now