let selector = document.querySelector('.activate')
selector.addEventListener('mouseover', function(){
document.querySelector('#hidden-li').classList.remove("hidden")
})
selector.addEventListener('mouseleave', function(){
document.querySelector('#hidden-li').classList.add("hidden")
})
.menu-list{
width: 40%;
margin: 0 auto;
border: 1px solid black
}
.menu-list ul{
display: flex;
flex-shrink: 0;
padding: 0;
justify-content: space-evenly;
list-style-type: none;
flex-wrap: wrap;
margin-bottom: 0;
}
.menu-list ul li{
text-align: center;
flex: 1;
border: 1px solid purple
width: 20%
}
.menu-list ul li a{
font-size: 1.2rem;
text-decoration: none;
color: black;
}
.hidden {
display: none;
}
<div class = "menu-list">
<ul>
<li><a>TEMP1</a></li>
<li><a>TEMP2</a></li>
<li class = "activate"><a>TEMP3</a></li>
<li><a>TEMP4</a></li>
<li><a>TEMP5</a></li>
<li id = "hidden-li" class = "hidden"><a>TEMP6</a></li>
</ul>
</div>
I have a menu list. When you look at it, there will be total 5 li in same line. Now when I mouseover the Temp3, the li Temp6 will be shown. However no matter how I tried I cannot get the thing display in new line. The flex container always shrink the size of other li. I have tried to set flex-shrink to zero, make sure flex-wrap is enabled, width: 20%; How else I can try to solve my problem?
As far as i understand, you want to keep the first 5 elements on the same line and the 6th elememt on a new line... In order to do that, you need to set "display" to "inline" instead of "flex" and for the last element you need to set "display" to "block", in that way you can achieve the desired output...
The following is a simplified css example:
ul li {
display:inline;
color:red;
}
ul li:last-child {
display:block;
color:green;
}
So the last element will have a style of either "display:none" or "display:block"
Related
How to set equal padding between elements set with display: flex and justified-content?
ul {
background-color: #ddd;
list-style-type: none;
padding: 0;
display: flex;
justify-content: space-around;
}
li.active a {
background-color: #111;
color: #fff;
}
<ul>
<li>Apples</li>
<li class="active">Bananas</li>
<li>Coconut</li>
<li>Apples</li>
<li>Kale</li>
<li>Coconut</li>
<li>Kale</li>
<li>Kale</li>
<li>Coconut</li>
<li>Kale</li>
</ul>
Bootply example
It is about background-color of active link. I would like to have something like in this image:
STEP 1
Allow for an equal distribution of free space among all list items and center the text (as in the image).
Add this to your CSS:
li { flex: 1; text-align: center; }
STEP 2
Enable the anchor element (a) to extend the full width of its container (so the entire li is clickable).
Add this to your CSS:
li a { display: block; }
Revised Demo
I'm trying to do something like file tree. The structure is like that:
<ul class="tree">
<li class="directory">
dir1
<ul>
<li class="file">file1</li>
<li class="file">file2</li>
</ul>
</li>
<li class="file">file3</li>
<li class="file">file4</li>
</ul>
I also used some CSS:
ul.tree li {
list-style: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
white-space: nowrap;
}
ul.tree a {
color: #111;
text-decoration: none;
display: block;
padding: 0px 2px;
}
.tree li.directory {
background: url(/images/directory.png) left top no-repeat;
}
.tree li.file {
background: url(/images/file.png) left top no-repeat;
}
It gives me fine effect - I need tree more digged in with every inner directory, and <a> with width from given position to the end of line (tree area has specified width, but it can be scrolled if path or filename is longer then tree area's width). Well, it was ok until now.
But now I have to change it a little and put a "delete" option at the end of line. With it, <a> should end before "delete", so
display:block;
is probably no longer correct. I tried
display: inline-block;
but then, the <a> area ends with the end of file name - and I still need it until the "delete", which should be at the end of line.
The new structure should be like this:
<ul class="tree">
<li class="directory">
dir1Delete
<ul>
<li class="file">file1Delete</li>
<li class="file">file2Delete</li>
</ul>
</li>
<li class="file">file3Delete</li>
<li class="file">file4Delete</li>
</ul>
I don't know what styles or what else should I use to do it the way, I want to. So, could you help me, please?
I had to read your post multiple times to try to get what you were looking for. If I'm reading you correctly, what you want is the first <a> tag to act as a display:block so that when you hover over it the entire width is clickable, but you want the second <a> tag to float to the right on the same line.
I believe that this demo will accomplish what you wish. I changed the order of the anchor links to make it as easy as possible. Also added background colors so you could see what's going on.
<li class="file">DeleteLong Link Name
The CSS required would be:
ul.tree li {
list-style: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
white-space: nowrap;
}
ul.tree a {
color: #111;
text-decoration: none;
display: block;
padding: 0px 2px;
background-color: gold; //so you can see what's happening
}
ul.tree .delete {
background-color: lightgreen; //so you can see what's happening
margin: 0 0 0 5px;
display: inline;
float: right;
}
ul.tree a:hover {
background-color: lightblue; //so you can see what's happening
}
.tree li.directory {
background: url(/images/directory.png) left top no-repeat;
}
.tree li.file {
background: url(/images/file.png) left top no-repeat;
}
If changing the order of the anchors is out of the question, I could muck around with some more elaborate CSS, but as the complexity of the CSS increases, so do your chances of it breaking in one browser or the other.
EDIT: Based on your reply, I've created some CSS to add an ellipsis (…) when the link text is too long. It requires setting a width on the main <ul>, but from your initial question it sounds like you're doing that anyway. You can see the updated JSFiddle here, and here's the updated CSS:
ul {
width: 333px;
}
ul ul {
width: inherit;
}
a {
overflow: hidden;
text-overflow: ellipsis;
}
ul.tree li {
list-style: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
white-space: nowrap;
}
ul.tree a {
color: #111;
text-decoration: none;
display: block;
padding: 0px 2px;
background-color: gold; //so you can see what's happening
}
ul.tree .delete {
background-color: lightgreen; //so you can see what's happening
margin: 0 0 0 5px;
display: inline;
float: right;
}
ul.tree a:hover {
background-color: lightblue; //so you can see what's happening
}
.tree li.directory {
background: url(/images/directory.png) left top no-repeat;
}
.tree li.file {
background: url(/images/file.png) left top no-repeat;
}
Original Fiddle | Fiddle with long links
Change the anchor tags to inline block and then float the second one to the right
ul.tree a {
display: inline-block;
}
ul.tree li a:last:child {
float: right;
}
JSfiddle Demo
Have you considered using jQuery Javascript ?
You could use the append() function to add the <a> tags specifically where you need them to appear.
http://www.w3schools.com/jquery/html_append.asp
Adding some float and overflow to css:
ul.tree li {
...
clear: both;
overflow: auto;
}
.delete {
float: right;
}
.tree li a:first-child {
float: left;
}
http://jsfiddle.net/9rxeu/
I've tried different tactics on making my menu fluid but none seem to work. I current have an interactive menu. Sometimes I want 6 items to show and sometimes I want 7 items to show.
When I have 7 items the menu is properly aligned over the entire width but when I have 6 items there's a lot of space on the right side of the menu.
I don't want to change the entire code every time I have deactivated an item and hope to be able to resolve this problem with just CSS.
Is it possible to fill this space up with the items?
I know I can do this with tables but I don't want to use tables.
HTML:
<nav id="menu_container">
<ul id = "menu">
<li class="menu_1 active">Home</li>
<li class="menu_2">test</li>
<li class="menu_3">test 2</li>
<li class="menu_4">bigger-menu-item</li>
<li class="menu_5">another-big-menu-item</li>
<li class="menu_6">Contact</li>
</ul>
</nav>
CSS:
#menu_container {
background: transparent url('/img/menu-bg.png') no-repeat;
float:left;
position:relative;
z-index: 999999;
width: 690px;
height:42px;
margin:29px 0 29px 19px;
}
#menu_container > ul {
padding: 0;
margin: 0;
margin-left:29px;
}
#menu_container > ul > li {
color: #ffffff;
float: left;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
}
When I add a width to the items some show the text on two rows and I don't want that.
I hope I made it clear what I want to do. Thank you.
Update: jsFiddle: http://jsfiddle.net/UDv2A/1/
If you just want to center the contents you could remove the float and display the lis as inline-block:
#menu_container > ul {
padding: 0;
text-align: center;
}
#menu_container > ul > li {
color: #ffffff;
display: inline-block;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
}
See jsFiddle.
If you want to expand the widths of the lis aswell, use display: table;:
#menu_container > ul {
padding: 0;
margin: 0 auto;
display: table;
width: 100%
}
#menu_container > ul > li {
color: #ffffff;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
display: table-cell;
width: auto;
}
See jsFiddle.
And if you want this to be fluid when you resize down... make sure to give #menu_container a width of 100%.
I'd have another solution:
jsfiddle
/* five items */
#menu_container > ul > li:first-child:nth-last-child(5),
#menu_container > ul > li:first-child:nth-last-child(5) ~ li {
width: 20%;
}
/* six items */
#menu_container > ul > li:first-child:nth-last-child(6),
#menu_container > ul > li:first-child:nth-last-child(6) ~ li {
width: 16.66%;
width: calc(100% / 6);
}
Or you can try using 100% insted of fixed width.
#pscheuller just gave the right way to fill the container.
But I think this kind of styles has one problem, just in my point of view, that is the paddings of items are not the same. Items with longer text will have larger paddings. So I prefer to have space in both left and right, put <ul> in the center of container and give each item the same padding.
How to grow the li elements in the way, that all the four li elements consume the complete 900 pixels space and add a little gap between the elements. And why is there already a gap now - I have none defined?
<html><head><title></title></head>
<style type="text/css">
#box { width: 900px; border: solid 1px black; }
#menu {
display: block;
position: relative;
width: 900px;
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
display: inline;
position: relative;
margin: 0;
padding: 0;
}
#menu li a, #menu li a:visited {
display: inline-block;
position: relative;
padding: 10px;
background-color: yellow;
text-decoration: none;
}
#menu li a:hover, #menu li a:active {
background-color: green;
text-decoration: none;
color: white;
}
</style>
<body>
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li>
<li>OpenOffice</li>
<li>Microsoft Office Visio</li>
<li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
</body>
</html>
Inline blocks behave weirdly in the fact that they render whitespace. The gap shown between items is the new line characters in your code. You can either remove the new line characters as I have shown in the code below (or at this fiddle http://jsfiddle.net/UyQEK/). If you want to keep the HTML clean, and not have to do this removal of whitespace, use float left on the elements instead of display: inline-block and do a clearfix on the parent to set the height.
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li><li>OpenOffice</li><li>Microsoft Office Visio</li><li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
EDIT
Made the classic mistake of forgetting to check to ensure I answered the whole question. I have updated the fiddle http://jsfiddle.net/UyQEK/1/ to show the actual answer to utilize the entire bar rather then just get rid of your spaces. The basis of the solution was floating the elements and giving them each a width of 25% and applying a clearfix to the ul element.
Hope that solves the whole thing this time.
I am trying to create a very simple "no-frills" tab using html & css. For this, I have a bunch of li elements and inside each of these, there is a "a href" element. Now, when i look at the output in IE & Firefox (after setting the styles to make the list display horizontally with proper border and everything), I can see that the "a" element overflows the "li" element. How do i make the "li" element resize based on the "a" element?
CSS and html as follows
#tabs ul
{
list-style:none;
padding: 0;
margin: 0;
}
#tabs li
{
display: inline;
border: solid;
border-width: 1px 1px 1px 1px;
margin: 0 0.5em 0 0;
background-color: #3C7FAF;
}
#tabs li a
{
padding: 0 1em;
text-decoration: none;
color:White;
font-family: Calibri;
font-size: 18pt;
height: 40px;
}
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
You forgot the "#" in the CSS declarations. You've an id="tabs" in you html code which needs to be referenced as
#tabs {
....
}
in the CSS. The rest is fine-tuning ;)
And try
#tabs {
display: inline-block;
}
instead of the display: inline;
Try settings the the display on the li element as "inline-block".
http://www.quirksmode.org/css/display.html
give style to anchor as
display:block
I give
display:block
to both the li and a tags. Then float the li. You can add this code to make the li enclose the a completely:
overflow: hidden; zoom: 1; word-wrap: break-word;
This will clear anything inside.
You could also simply give your li's some padding:
#tabs li {
padding: 8px 0 0;
}
Inline-block is a good way to go (as suggested).
But if you want this to be cross-browser, you need to add som CSS-hacking "magic" :)
One very good tutorial on the subject is http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Using the method from that article, you'd end up with the following CSS:
/* cross browser inline-block hack for tabs */
/* adapted from:
/* http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */
#tabs ul,
#tabs li,
#tabs li a {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: bottom;
margin:0; padding:0; /* reset ul and li default settings */
}
/* The rest is "window dressing" (i.e. basically the tab styles from your CSS) */
#tabs li a {
margin: 0 0.5em 0 0;
background-color: #3C7FAF;
padding: 0 1em;
text-decoration: none;
color:white;
font-family: Calibri;
font-size: 18pt;
height: 40px;
}
Simply display:inline-block on both li & a did the trick for me man. Lists stretched to accommodate whatever I did with the links.