I'm trying to create a mega-menu. I'm using a list element and some elements have divs inside.
This is what my HTML looks like:
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
The li with .list-item class has position:relative; and the .sub-menu-wrapper has position:absolute; and width:100%;
i need the .sub-menu-wrap to have a full screen width but it's only taking the li.list-item width (screenshot below).
I also tried left:0;right:0; for .sub-menu-wrap but nothing changed..
When recreating your code, the element positioned absolute does in fact take up 100% width when the width is set to 100%. Double check your syntax. See my snippet below, the element positioned absolute is taking up the full width.
.list-item{
position: relative;
background: lightcoral;
width: 100px;
}
.sub-menu-wrap{
position:absolute;
background-color: lightblue;
width: 100vw;
}
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
Related
I have a web page that displays a list of item with variable length. There are two panels at the top of the page that display information about the selected item from the list. Both or just one can be hidden by the user to see more items in the list. If the panels are displayed, I need them to be fixed - even when scrolling through the list, they are always visible. If the user hides some panels, I want the list of items to move to the area where the fixed panel was.
The situation is shown in the picture. The green and yellow panels must always be seen until the user hides it. The list must move according to space above.
Is there a possibility to do this with HTML and CSS?
Yes. You can put your list inside a div and set the div to have a fixed height as well, then the items below will be scrollable.
See this example (jsfiddle):
.panel-1, .panel-2{
height: 100px;
}
.panel-1{
background: red;
}
.panel-2{
background: blue;
}
.list{
height: 200px;
overflow-y: auto;
}
.list-group{
background: rgba(0, 0, 0, 0.1);
list-style: none;
padding-left: 0;
}
.list-item{
margin: 5px 0;
padding: 5px 0;
background-color: yellow;
}
<div>
<div class="panel-1">Information</div>
<div class="panel-2">More information</div>
<div class="list">
<ul class="list-group">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
<li class="list-item">Item 5</li>
<li class="list-item">Item 6</li>
<li class="list-item">Item 7</li>
<li class="list-item">Item 8</li>
<li class="list-item">Item 9</li>
<li class="list-item">Item 10</li>
</ul>
</div>
</div>
looking for some code to wrap a li items in a div with a set height.
When list items dont fit the height it will spill over to the right.
also looking to align them to the left of that div with bullet point still visible.
would also be nice if you would be able to control the "space" in between so it doesn't look squished.
I wrote the code how i would like it displayed knowing it wont. hopefully it helps to explain what i am after.
<div>
<ul>
<li> 1</li> (space) <li> 4</li> (space) <li> 7</li>
<li> 2</li> (space) <li> 5</li> (space) <li> 8</li>
<li> 3</li> (space) <li> 6</li> (space) <li> 9</li>
</ul>
</div>
You can use column-count for this. Check snippet below..
for detail you can take reference from https://www.w3schools.com/css/css3_multiple_columns.asp
ul {
list-style: none;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
}
ul li {
display: block;
padding: 10px 0;
}
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
<li> 6</li>
<li> 7</li>
<li> 8</li>
<li> 9</li>
</ul>
I'm having some issues with using columns in CSS. I wanted to set column-count: 6; but it result only in 5 columns. It seems to be working fine for values <=5 but when I try to set something higher it produces weird results. Column-count doesn't match.
.columns {
column-count: 6;
}
.columns__item {
display: inline-block;
background: #fff;
width: 100%;
padding: 5px;
margin-bottom: 10px;
}
<ul class="columns">
<li class="columns__item">Item 1</li>
<li class="columns__item">Item 2</li>
<li class="columns__item">Item 3</li>
<li class="columns__item">Item 4</li>
<li class="columns__item">Item 5</li>
<li class="columns__item">Item 6</li>
<li class="columns__item">Item 7</li>
<li class="columns__item">Item 8</li>
<li class="columns__item">Item 9</li>
<li class="columns__item">Item 10</li>
<li class="columns__item">Item 11</li>
<li class="columns__item">Item 12</li>
<li class="columns__item">Item 13</li>
<li class="columns__item">Item 14</li>
</ul>
Here is the fiddle: https://jsfiddle.net/btqxd20r/1/. I'm testing it in Chrome.
It might be the display: inline-block; issue, Increase your items to 40 or 50 and then check, it works correctly.. here is the updated fiddle https://jsfiddle.net/btqxd20r/2/
UPDATE:
Use float: left set width in pixels to display your items in a rows and if you want to make it responsive for devices. Keep in mind that you should use clear:both css after ending of float divs...
Code seems to be correct, but simply doesn't work.
html of it
<div class="logo5">
<a class="underlogolink" id="expandlogonav" href="whatever.com" >
<div class="underlogotext alcenter">{{settings.underlogotext}}</div>
</a>
</div>
<div class="logo6" id="underlogonav">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
</ul>
</div>
and the css
#underlogonav {
height:0px;
overflow-y:hidden;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
#expandlogonav:hover ~ #underlogonav {
height:auto;
}
Could you please point me to where i went wrong.
#underlogonav is not a sibling of #expandlogonav.
You need to have a selector that actually matches the element.
You could hover over the div containing #expandlogonav instead.
NB: If you fix that, the transition still won't work because you can't transition to auto heights.
I have a menu element like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
The element is positioned absolutely. How can I center it without knowing its width (number of parent elements might change).
Regards,
Dave
I think what you're after is possible if you have a parent element to the ul:
<div class="example">
<ul>
<!-- lots of li's -->
</ul>
</div>
Then use the old school text-align trick that was used to center layouts:
.example {
text-align: center;
}
.example ul {
text-align: left;
display: inline-block;
}
See: http://jsfiddle.net/chippper/WK5Z4/