I've created an horizontal CSS/HTML menu with some jQuery to move elements into a dropdown if the parent is not wide enough to keep everything on one line. When elements move into the #dropdown the resulting <ul> appears to have its width limited and I don't understand what it is doing that?
jsFiddle
On line 7 of your fiddle, you are dynamically creating a <ul> which contains the menu items that do not fit into your menu. It's that <ul>'s width that is too small for the text, which makes the text go to multiple lines. If you give that menu a style of white-space:nowrap, it will make the <ul> take up as much width as it needs. The code below does it inline, but it's just an example. http://jsfiddle.net/wf7h8/1/
var dropDownHTML = "<li id='dropdown'><a href='#'>Menu</a><ul style='white-space:nowrap;'></ul></li>";
Related
I have an unordered list held within a div tag.
I have a tree like structure of list elements containing additional lists e.g.
<ul>
<li>
<ul>
<li>
</li>
</ul>
<li>
</ul>
When i hover over a list element that contains a sublist the sublist displays as a popup within the containing div element. This list can be up to three layers deep which presents a problem. The width i have to display my containing div is limited (170px width/400px height)so i'd like the pop up list elements to extend beyond the containing div however I'm struggling to get this working.
Basically I'd like the vertical scroll bar to be present but the width scroll bar hidden. Overflow on the width should extend outside the containing div. I've tried variations on overflow-y/x but I can't seem to get a balance that does what I need. i also haven't been able to get the pop up elements to extend outside the containing dev.
jsfiddle below to provide an example. And an image of the issue below:
http://jsfiddle.net/sapatos/tvZUX/1/
The scroll effect is due to the following CSS code:
overflow-y: scroll;
If you take it out, the scroll will go away for the width.
The idea of putting a sub menu within a submenu, etc.. can be seen in this example.
You can also try this DEMO
I altered your code to reposition everything using margin-left. But to be honest, your code is extremely vast, I would suggest taking a portion of it and then working on it. My last thing I want to note is to not get too confused when you start going further into the sub menus.. it is definitely a complex thought process.
EDIT Here is the last example I can give you... I do want to caution you that this may not be exact in every browser and there may be some better way to positioning everything. Here it is:
DEMO
This does however become much harder when the contents inside of the li tags are different. An example of this is when you have only one line of text vs two lines of text, which will render the absolute positioning utterly useless. It may be easier to style these vertically than horizontally and there could be a better solution but that could entail using JavaScript or a derivative of that language.
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
I have a layout like this.
How can I align each div.product_image to the vertical middle of <li> items if I don't have fixed height of list item or image and in the same time be sure that images won't overlap each other?
A table may work, but you won't like it. Then JS may help. The "normal" way to do it would need to use min-height & min-width in <li>, then using 2 divs. 1st position: absolute; 1px*1px top:50%;left:50%;, 2nd a relative div left:-Xpx; top:-Ypx; width:2*X; height:2*Y; (<- that would be static), then just place whatever you want inside.
Please how to keep div width after hover ?
this is HTML Code
<div>
Refining
Products
Process
Quality Assurance
Safety
</div>
========
please this is my main menu and the width is not fixed, when mouse hover on (Quality Assurance) main div is increased width approximately 2 pixels.
and i want the hover is Bold.
i am used letter-spacing but not good :(
you can see my problem here
Currently, the menu's width is decided by the widest element.
"Saudization and Training" is currently the widest element, and as such, when it is in bold type the extra width is accommodated by extending the menu's width. This is because bold text is wider than standard text.
Is there a reason why you can't fix the width of your menu?
If you can't fix the width of the menu - you might choose a different way of highlighting the selected element on hover (underline, being a common choice).
See related discussion here:
Inline elements shifting when made bold on hover
Try setting div style overflow with:
overflow: hidden;
So:
<div style="overflow:hidden;width:250px;height:200px;">
content here
</div>
You will need to set a width if you use this i believe so also add the width (you can set your own width to what you require) same for height.
Another idea would be to use some JavaScript to catch the mouseenter event on the menu div, get the outerWidth() of the div, then set the max-width of the menu div. The hover will not expand the box with this.
var width = $this.outerWidth();
$(this).css({"max-width": width+"px"});
Just make sure overflow on the menu items is set to visible:
$("menu items").css({overflow: "visible"});
Also best to clear max-width on mouseleave.
This worked great for me.
I have maybe a little bit strange task, but I belive there is no better solution. I need to have <ul> in some container which width is changeable and with inlined <li> elements of fixed width. I should (and already found solution) put spaces between <li> elems of same width. Width of spaces is changes dynamicaly and depends of parental container width. Again, this <li> items have fixed width.
I also should place some links above this described elements. For some reasons links must be in other <ul> element. They also wrapped in inlined <li> elems. And I want them to be positioned right above described <li> items. This can be done by setting fixed width of <li> items as above. Now, the problem is that text in every link is actualy have different width and will break into two lines, but I must place it into one line.
So I want to trick browser: text will be overflowing <li> items.
.liElem {
width: 100px;
height: 20px;
overflow: visible;
}
But, as you may guess, text is breaking into two lines and overflowing actually the bottom of list items, not the right side.
The effect I wanted can be done by inserting insted of spaces in text like this: <li>Add to Favourites</li> .
So, my question is this: how in css-way make usual text NOT to break into several lines ?
.nobr { white-space:nowrap; }