I've been using CSS3 multi-column for a few Wordpress sites now and one thing that I find excepteble but still something I want to know how to fix is that if I put a list(with sub items) in the collumns that it won't keep the structure of the list
To make myself clear this is the HTML:
<div>
<ul>
<li>
List-item
<ul>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
</ul>
</li>
<li>
List-item
<ul>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
</ul
</li>
</ul>
</div>
And the CSS would be:
div{
-webkit-column-count:3;
-moz-column-count:3;
-ms-column-count:3;
-o-column-count:3;
column-count:3;
-webkit-column-gap:15px;
-moz-column-gap:15px;
-ms-column-gap:15px;
-o-column-gap:15px;
column-gap:15px;
columns:3;
}
And this is what you get:
This is nice because it makes it possible in Wordpress to show menu's like this.
But one thing that bugs me is that it places the Sub-list-items in the next column while the parent of that item is in the previous column.
Is this fixable?
Before anyone says: why don't you just make multiple lists and make your own columns(this was the suggestion when I asked the question how to do this) this is for a dynamic Wordpress menu so I have no controll over how many items are in the menu.
Making your parent <li> display: inline-block; seems to "fix" this:
Here is a demo http://jsfiddle.net/DczVL/1/
ul {
list-style: none;
margin:0;
padding:0;
}
ul > li {
display: inline-block;
width: 100%;
}
ul > li > ul >li {
color: red;
}
div {
-webkit-column-count:3;
-moz-column-count:3;
-ms-column-count:3;
-o-column-count:3;
column-count:3;
-webkit-column-gap:15px;
-moz-column-gap:15px;
-ms-column-gap:15px;
-o-column-gap:15px;
column-gap:15px;
columns:3;
}
<div>
<ul>
<li>List-item
<ul>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
</ul>
</li>
<li>List-item
<ul>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
</ul>
</li>
<li>List-item
<ul>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
</ul>
</li>
</ul>
</div>
Related
Using wp_nav_menu, currently it's in three columns, what I need is two li's wrapped in a DIV and third wrapped in another DIV. If it can be done via CSS then that would be great, rather than custom wrapper class for the menu.
Not sure how to do this, so would appreciate some assistance. Thanks.
Edit: Added stylesheet, which is using flex.
==== ==== ====
to
==== ====
====
ul {
display: flex;
flex-wrap: wrap;
}
ul li {
flex-grow: 1;
width: 33%;
}
<ul>
<li>
One
<ul>
<li>1a</li>
<li>1b</li>
<li>1c</li>
</ul>
</li>
<li>
Two
<ul>
<li>2a</li>
<li>2b</li>
</ul>
</li>
<li>
Three
<ul>
<li>3a</li>
<li>3b</li>
<li>3c</li>
</ul>
</li>
</ul>
to
<ul>
<div class="col-2">
<li>
One
<ul>
<li>1a</li>
<li>1b</li>
<li>1c</li>
</ul>
</li>
<li>
Two
<ul>
<li>2a</li>
<li>2b</li>
</ul>
</li>
</div>
<div class="col-4">
<li>
Three
<ul>
<li>3a</li>
<li>3b</li>
<li>3c</li>
</ul>
</li>
</div>
</ul>
If you aren't looking to change the HTML and just use CSS, then using CSS grid rather than flexbox might be what you are looking for.
ul {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 200px;
padding: 0;
list-style: none;
}
ul > li:last-of-type {
grid-column: 1 / 3;
}
ul ul,
ul ul li {
display: flex;
}
<html>
<ul>
<li>
One
<ul>
<li>1a</li>
<li>1b</li>
<li>1c</li>
</ul>
</li>
<li>
Two
<ul>
<li>2a</li>
<li>2b</li>
</ul>
</li>
<li>
Three
<ul>
<li>3a</li>
<li>3b</li>
<li>3c</li>
</ul>
</li>
</ul>
</html>
I Want to select last Element of div.container <ul> inside last <li> with css.
The ul of nested will goes n level so please suggest to me if it possible with jquery also.
ul {
list-style: none;
margin: 0;
padding: 0;
}
<div class="container">
<ul>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>Want to select list with css</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
view the image that i want to select with css
You can use some tricks to make it.
If you are looking for last element then you can use of :nth-last-child(n) selector, this matches on every element in the nth child and it doesn't look for type or its parent.
This is achieved as it counts from the last child.
.container ul li:nth-last-child(1)
{
color: red;
font-size:22px;
}
.container li li {
color: green;
font-size:12px;
}
Look at here:
MyFiddel
I'm struggling with this, I'd like my first li to have a round bullet and then the nested li's to have an indented square bullet. My CSS trying to do this is below, default styling of my page is not putting any bullets in place.
Can someone help?
<ul>
<li>Simplification of a complex purchase category
<ul>
<li>Meet local regulatory compliance </li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
CSS
ul:first-child {
list-style-type:circle;
}
li:first-child {
list-style-type:square;
}
li:nth-child(2) {
list-style-type:square;
}
try this:
li {
list-style-type:circle;
}
li li {
list-style-type:square;
}
you could use classes on your tags to set the list-style-type.
HTML
<ul class="round">
<li>Simplification of a complex purchase category
<ul class="square">
<li>Meet local regulatory compliance </li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
CSS:
.round {
list-style-type:bullet;
}
.square {
list-style-type:square;
}
http://jsfiddle.net/8H9JA/
List:
<ul>
<li>
Item 1
<ul>
<li>
Item 1-1
<ul>
<li>Item 1-1-1</li>
<li>
Item 1-1-2
<ul>
<li><a href="#">Item 1-1-2-1</li>
</ul>
</li>
</ul>
</li>
<li>Item 1-2</li>
<li>Item 1-2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
Here's some relevant CSS
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
The first one will hide every drop down item. The second will match any ul that is a children of the parent #nav ul li:hover, if so display:block and the drop down is visible.
Now because when hovering a item, the items within will simply be listed below, this is not what I am looking to achieve. I want to move the Item 1-1-1 and Item 1-1-2 to be on the right of Item 1-1, the Item 1-1-1 needs to be on the right, Item 1-1-2 will be below it (acting as a drop-down list). I am not sure how I select that element.
Example: http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html
Here's what I got so far:
http://jsfiddle.net/Gq8C2/
I tried with first-child, such as:
#nav ul li:hover > ul li:first-child {
display: block;
}
I also tried using position absolute and relative, It almost gave me the result I wanted, but I wasn't able to grab the first item...
There must be a better way of doing this...
How do I select it? And how do I make a similar behavior to that I've been describing above?
Why don't you just use the css/html of the page you linked to instead of trying to reinvent it?
HTML:
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</nav>
CSS
Review this Fiddle http://jsfiddle.net/Gq8C2/10/
I use position:absolute for the sub-sub menu :
#nav ul li ul li ul {
position:absolute;
top:0;
left:100%;
}
In order to upgrade your code you can assign a class for each level of the menu like
<ul class="Third_level">
this is my html code:-
<div id="load">
<ul>
<li>Activities
<div>
<ul>
<li>Physical1
<div>
<ul>
<li>Cricket
<div>
<ul>
<li>One Day</li>
</ul>
</li>
</ul>
</li>
<li>Test1
<div>
<ul>
<li>Test At Abc</li>
</ul>
</li>
<li>Test2
<div>
<ul>
<li>Test At Xyz</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
this is my css:-
li{
color:red;
border-left:1px solid green;
}
li{
list-style:none;
}
ul > li > div > ul {
display: none; // hide all submenus
}
li:hover > div > ul {
display: block; // show sub menu when parent li is hovered
}
now i want to something this type of my list:-
i think using proper position css style its done.
or with float i think its possible.
any kind help well come...
thanks...