the following is my menu structure:
<ul>
<li> menu 1</li>
<li> menu 2<br/> description</li>
<li> menu 3</li>
<li> menu 4</li>
</ul>
as you noticed the second menu have a height different than other siblings cause of it's content
so take alook at the css
ul{
display:flex;
flex-direction:row;
flex-wrap: nowrap;
}
ul>li{
background-color:blue;
border:2px solid red;
}
this will display ul as a menu with items side by side in the center of the containing parent "ul" but unfortunately with different height
so how i can make children have the 100% of their parent using flexbox without adding custom height in pixel?
Put an align-self: stretch on the ul>li.
Check out the sample : http://cssdeck.com/labs/full/nttaiab7/
Related
I'm trying to build a menu in css using flexbox.
I have already made it responsive so it shrinks from horizontal menu to dropdown menu.
But I struggle separating first menu link from others and putting on the left while the rest are on the right.
As shown in picture I want to put first li the home icon on the left and the rest li items on the right.
Any suggestions?
menu example
From your image, I think this is a very simple example of what you want.
ul {
display: flex;
align-items: flex-end;
flex-direction: column;
}
li:first-child {
align-self: flex-start;
position: absolute; /* used only to preserve row alignment */
}
<ul>
<li>home</li>
<li>whatever 1</li>
<li>whatever 2</li>
<li>whatever 3</li>
</ul>
Zurb Foundation's top-bar is extremely useful. It works great as a main navigation for a site/app, and collapses to a mobile-friendly format on smaller devices.
Its one major shortcoming is the ability to make the top-bar full-width with evenly spaced nav items. Is there a way to make the top-bar full-width and the nav items evenly spaced?
Example
If the top-bar has 6 nav items (width varying length titles) and we're using the default width of 1000px for .rows (with 15px gutters) the 6 nav items should evenly space themselves across the 970px top-bar. The first and last nav items should be left and right justified respectively.
As the screen size reduces the nav items should shrink in width to maintain their even spacing until the $topbar-breakpoint causes the top-bar to collapse to the mobile format.
Requirements
The solution should be CSS-based.
The solution should match Foundation 5's compatibility chart. Namely this means it needs to support IE9+.
Beneath the $topbar-breakpoint the top-bar should work as normal.
Here's a jsFiddle with the Foundation 5 resources already loaded.
Here is another solution. It is based on flexbox which hasn't been supported by browser for very long and it is still only a candidate recommendation: CSS Flexible Box Layout Module
jsFiddle
If you provide a good fallback, like the original Foundation CSS it can be used.
Update
You could also use this jQuery solution as a fallback as I haven't found any polyfills for flexbox: http://jsfiddle.net/borglinm/x6jvS/14/
.top-bar-section > ul {
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
}
.top-bar-section > ul > li {
float: none;
-webkit-flex: 1;
-moz-flex: 1;
flex: 1;
}
.top-bar-section > ul > li > a {
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
overflow: hidden;
}
Here's a solution that might need a bit of tweaking
JSFiddle Here
Sticking to the CSS-only requirements, the only feasible way I can think of is using CSS tables. We create nested table, table-rows and table-cells. The table-cells, by default, will try to maintain equal spacing between itself and other table-cells.
The table-row needs to span the entire topbar minus any Foundation topbar title-areas. To do this, we use an overflow: hidden trick to make the .top-bar-section span the remaining width of the topbar. Finally, we wrap our topbar with a div that has display: table and spans its parent.
Here's the relevant CSS
.top-bar-section {
overflow: hidden;
}
.center-topbar {
display: table;
width: 100%;
}
.center-topbar .full-width {
display: table-row;
}
.center-topbar .full-width li {
display: table-cell;
float: none;
text-align: center;
}
What we are left is with a topbar whose elements are centered and have widths that vary depending on its contents. The $topbar-breakpoint works as normal as well.
Improvements?
Works on Chrome + Safari well on my end (OS X). For Firefox, the dropdown arrow is not displaying due to the removal of the left float. Just wanted to post this to get the conversation going. Anyone have any improvements?
Here's a solution using some built in foundation classes...basically I added 4 classes to your fiddle.
http://jsfiddle.net/x6jvS/7/
<div class="row">
<div class="small-12 columns">
<nav class="top-bar contain-to-grid" data-topbar>
<ul class="title-area">
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="full-width web button-group large-block-grid-6">
<li>Link 1</li>
<li class="has-dropdown">
Long Link 2
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Even Longer Link 5</li>
<li>Link 6</li>
</ul>
</section>
</nav>
</div>
</div>
added class "contain-to-grid" to the nav element
added classes "web button-group large-block-grid-6" to the "section.top-bar-section > ul" (first ul in that section)
and blammo...seems to work fairly well cross-browser
How can I make the <li> item width fit the text length in Bootstrap 3? My menu item is shorter than the text which causes my class="active" to look ugly.
This is the navbar in which it occurs:
<div id="menu" class="col-md-1">
<ul class="nav nav-pills nav-stacked">
<li class="active">Startseite</li>
<li>Kontakt</li>
</ul>
</div>
make a .custom_li class and give
.custom_li{
display:inline-block;
}
EDIT
To force same size, i'll suggest using max-width and place it under some media-query
li{
display: inline-block;
max-width:50%; /* limit width */
word-break:break-all; /* wrap extended text*/
border:1px solid red /* demo */
}
demo here
some optional things
some optional things
When I tried display: inline-block; it removes the bullet.
Instead, I use float:left; to have them only as wide as text, while preserving the bullet. Optionally, add clear:both; to keep it as a vertical list with each item on a new line.
CSS
.my-list > li {
float: left;
clear: both; /* remove this if you want them flowing inline */
}
HTML
<ul class="my-list">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
If the display: inline-block; or display: block; is messing up the alignment.
Then just use width: fit-content;
Prevent it becoming a block by adding display: inline-block; to the proper element.
Post more code and preferably CSS if you want details.
I got it to work with the following css:
ul {
margin: 0 auto;
width: fit-content;
}
li{
display:flex;
margin: 0.5rem auto;
}
Basically what I did was make the container width to fit content. Used the CSS hack to make sure it would center using the margin. In the li tag I wanted the contents to be centered so I set it that way
I want to have some list items (floated) with 100% width.
The number of list items is arbitrary, it could be 1 or 2, or it could be 20 or 30.
When there are more items than can fit in 100% width of the page, I want it to have a scroll bar to scroll through.
This is what I am currently using, but it doesn't create the scroll. I am guessing I need to set a width for overflow to work, but I want the width to be 100%.
.scroll {overflow-x:scroll;}
.scroll li {float:left}
<div class="scroll">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<div stye="clear:both"></div>
</ul>
</div>
So how can I keep a 100% width, with an horizontal scroll?
Add white-space: nowrap to .scroll ul
.scroll {overflow:auto; }
.scroll ul{ white-space: nowrap;}
.scroll li {display: inline-block;}
JS Fiddle: http://jsfiddle.net/f6CRt/
Don't use float at all. Floated elements are block level, and white-space: nowrap;, which causes text to go off screen, only works for inline elements -- Here's a possible duplicate of your question...
So basically use:
.scroll {
display: block;
overflow: scroll;
white-space: nowrap;
}
.scroll li {
display: inline;
}
Here's a fiddle
Say I have a menu bar at the top of my webpage.
Each menu item is in its own DIV, and these are laid out horizontally, with each menu item DIV side-by-side.
Now, as you shrink the width of the browser, there comes a point where the browser width will be less than the width of this menu bar.
What I'd like to do is to have the very last menu item (DIV) move down to the next line when this happens, and each consecutive last menu item do the same as the width of the browser continues to shrink, until all the menu items end up stacked from top to bottom.
I'm not sure how to do this using CSS.
Any suggestions?
Thanks.
html:
<div id="container">
<ul>
<li>
Menu1
</li>
<li>
Menu2
</li>
<li>
Menu3
</li>
<li>
Menu4
</li>
<li>
Menu5
</li>
</ul>
</div>
css:
#container{
width:100%;
min-width:200px;
background-color:green;
}
#container ul li{
width:50px;
height:22px;
background-color:red;
border:1px solid black;
list-style:none;
text-align:center;
display:inline-block;
}
demo:
http://jsfiddle.net/jU44m/
To accomplish this, All of the menu items should be in one larger div, and to make this div resize when the page is resized, set its width value to a percentage. Set the height value of this div to auto so that it will expand when the items fall down (sizing can be done with padding) like this:
#menu {
width: 50%;
height: auto;
}