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>
Related
Is there any way to remove these nested divs which contain the content and does it matter? Would there be any better tags to use than div? I am quite new to HTML so I'm not sure how important this is. I've heard a bit about the importance of semantic HTML but I've seen a lot of divs on many sites.
#media screen and(max-width: 400px) {
li {
flex-wrap: wrap;
justify-content: center;
}
}
ul {
display: flex;
width: 90%;
flex-wrap: wrap;
}
li {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex: 40%;
padding: 30px 80px 30px 80px;
width: 200px;
}
li>div {
padding: 10px;
white-space: nowrap;
font-size: 14px;
}
<section>
<ul aria-label="Pork">
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
</ul>
<ul aria-label="Beef">
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
</ul>
</section>
I would say there is nothing wrong with using them as you have done although maybe a <p> or a <span> would be better used semantically, as they are better suited for this type of content. <div> are primarily for separating blocks of content, whereas this is more spacing text.
However, there is no 100% right or 100% wrong.
The HTML and CSS code is as follows;
I am using li ul as selectors to make my subjects hidden but it's not working
and I don't know why. Can some one please help (I am new to programming)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
<li> Chemistry Of Biomolecules </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
</ul>
</div>
li ul {
visibility: hidden;
position: absolute;
width: 150px;
}
li:hover ul {
visibility: visible;
}
I think that is what you want
Edit
Also you have error in your HTTML. Your HTML should be like bellow. (Modifying your HTML according your CSS. But this not means that you must write HTML in this way)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
<li> Chemistry Of Biomolecules
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
</ul>
</div>
CSS
li ul{
display:none;
position:absolute;
width:150px;
}
li:hover ul{
display: block;
}
You're selecting al ul tags in li tags, but your HTML is the other way around.
If you change your CSS to ul li { css_here } it should work.
Also when position: absolute; is set to the li items, the ul item doesn't wrap the items anymore, because they are removed from the document layout flow. So you might want to remove the position: absolute;.
I have this list in HTML
<div id="sideMenu">
<li class="current_page_parent">
Category 1
<ul class="children">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li></li>
<li></li>
</div>
I want to put a background-color to my first link : 'Category 1' without affecting others links
Here's my CSS
.current_page_parent li:not(.children) a {
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
You can use first-of-type combined with a > combinator selector
The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.
The > combinator separates two selectors and matches only those
elements matched by the second selector that are direct children of
elements matched by the first.
li.current_page_parent:first-of-type > a{
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
li.current_page_parent:first-of-type > a {
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
<div id="sideMenu">
<li class="current_page_parent">
Category 1
<ul class="children">
<li>Sub
</li>
<li>Sub
</li>
<li>Sub
</li>
<li>Sub
</li>
</ul>
</li>
<li></li>
<li></li>
</div>
You can add class propery to the particular <a> and directly select the particular attribute by their class name
Here's example:
HTML:
<div id="sideMenu">
<li class="current_page_parent">
<a class="notInULChildren" href="#">Category 1</a>
<ul class="children">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li></li>
<li></li>
</div>
CSS:
.notInULChildren{
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
FIDDLE
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>
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...