How to reset ordered list numbering in CSS - html

How can I reset the numbering for nested ordered lists.
Running this snippet, give me an output like this:
List 1
List 2
List 3
List 1
List 2
List 3
List 1
List 2
List 3
3.1. List 1
3.2. List 2
3.3. List 3
3.3.1. List 1
3.3.2. List 2
3.3.3. List 3
3.3.3.1. List 1
3.3.3.2. List 2
3.3.3.3. List 3
I want 3.1 to start with 1. How can I do this?
Do I need to use multiple counters? or a single one will do?
I'm not really used in using css counters.
The code works if it's a series of nested ordered list but when there is an unordered list inside it starts to fail. It still continues the numbering from the previous ordered list.
ol {
counter-reset: item 0;
list-style: none;
}
ul {
counter-reset: item "";
}
ul:first-child>li {
counter-reset: item "";
}
ul>li:before {
content: " ";
margin-right: 1em;
}
ol ul li:last-child {
counter-reset: item "";
}
ol>li:before {
counter-increment: item;
content: counters(item, ".")". ";
}
<ul class="ul">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3<ul class="ul">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
Edit: I wasn't still able to do this, even with multiple reset counter. Is there any hope for this?

You can view my case:
We just need to reset at the first child
.tos ol > li {
counter-increment: listNumbering;
list-style: none;
}
.tos ol > li:before {
content: counter(listNumbering) '. ';
}
.tos ol > li:first-child {
counter-reset: listNumbering;
}

What you want is a new, different, counter to start when the ol is within an ul within an ol:
ol {
counter-reset: item 0;
list-style: none;
}
ol>li:before {
counter-increment: item;
content: counters(item, ".")". ";
}
ol ul ol {
counter-reset: subitem 0;
}
ol ul ol>li:before {
counter-increment: subitem;
content: counters(subitem, ".")". ";
}
<ul class="ul">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3</li>
</ol>
</li>
<li class="li">List 2</li>
<li class="li">List 3
<ul class="ul">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">Sub List 1</li>
<li class="li">List 2
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3</li>
</ol>
</li>
</ol>
</li>
<li class="li">List 3
<ol class="ol">
<li class="li">List 1</li>
<li class="li">List 2</li>
<li class="li">List 3</li>
</ol>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>

According to w3 document, you can directly define value prop to implement it.
<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

Related

One Click on Nav Menu Trigger several actions

I have 3 menus in a nav and each menu has a submenu. I need to do 2 acts when clicking on a menu, or plus/minus sign.
First Act: When I click:
show this submenu
change this plus sign to minus sign
Close other submenus
Change other submenus signs from minus to plus
Second Act: When I click on an element which has an open submenu, again
submenu will be closed.
minus sign change to plus sign
My JQuery is working as expected on the First Act, but somehow it doesn't work on the Second Act
Please give me a hand. Thanks
$(function(showHidesubMenu) {
$('.parent-list').click(function() {
$(this)
.toggleClass('open').next().toggleClass('icon-minus icon-plus')
.add($('.parent-list.open').not(this).removeClass('open').next().toggleClass('icon-minus icon-plus'))
.parent().next('.child-layer').toggleClass('show')
})
})
$(function() {
$('.plus-minus').click(function() {
$(this)
.prev().toggleClass('open')
.next().toggleClass('icon-minus icon-plus')
.add($('.parent-list.open').not(this).removeClass('open'))
.parent().next('.child-layer').toggleClass("show");
})
})
li {
display: flex
}
.icon-plus:before {
content: "\2795";
}
.icon-minus:before {
content: "\2212";
}
.parent-list {
padding-right: 50px;
cursor: pointer;
}
.collapse {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
<li class="non-active">
<a class="non-active parent-list" href="#level1">level 1</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 1</li>
<li>Sub Child 1</li>
<li>Sub Child 1</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level2">level 2</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 2</li>
<li>Sub Child 2</li>
<li>Sub Child 2</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level3">level 3</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 3</li>
<li>Sub Child 3</li>
<li>Sub Child 3</li>
</ul>
</ul>
$(function(showHidesubMenu) {
$('.parent-list').click(function() {
$(this)
.toggleClass('opening') // add class mark this opening
.next()
.toggleClass('icon-minus icon-plus')
.add(
$('.parent-list.opening')
.not(this)
.removeClass('opening')
.next()
.toggleClass('icon-minus icon-plus')
)
// to parent toogle ul
.parent()
.next('.child-layer')
.toggleClass('show')
})
})
li {
display: flex
}
.icon-plus:before {
content: "\2795";
}
.icon-minus:before {
content: "\2212";
}
.parent-list {
padding-right: 50px;
cursor: pointer;
}
.collapse {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
<li class="non-active">
<a class="non-active parent-list" href="#level1">level 1</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 1</li>
<li>Sub Child 1</li>
<li>Sub Child 1</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level2">level 2</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 2</li>
<li>Sub Child 2</li>
<li>Sub Child 2</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level3">level 3</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 3</li>
<li>Sub Child 3</li>
<li>Sub Child 3</li>
</ul>
</ul>

Changing the color of a div - HTML

I have a dropdown menu with a sub-menu, made up of lists:
<ul>
<li class="list_item">Item 1</li>
<li class="list_item">Item 2</li>
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
<li class="list_item">Item 3</li>
</ul>
My CSS changes the background-color of these items when hovered on.
What I want to do is keep Item 2's background color changed whilst hovering over any give Sub Item
Any simple way to do this?
CSS:
.list_item:hover {
background-color:green;
}
.sub_list_item:hover {
background-color:yellow;
}
Wrap item 2 around its <ul> tag
<ul>
<li class="list_item">Item 1</li>
<li class="list_item">Item 2
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
</li>
<li class="list_item">Item 3</li>
</ul>
You could use the direct child selector > to target a specific li as opposed any given li or ul.
jsFiddle here - menu I made a few weeks ago
Usage example:
#menu > ul > li:hover {
background: #2580a2;
}
Change the code and css
<ul class="item">
<li class="list_item">Item 1</li>
<li class="list_item">Item 2</li>
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
<li class="list_item">Item 3</li>
</ul>
CSS is
.item
{
color: #000000;
list-style-type: disc;
}
.item li:hover
{
color: #FFFFFF;
background-color: #336600;
}
.item ul li:hover
{
color: #FFFFFF;
background-color: #FF0000;
}
Enjoy ... and choose your color whatever you like
for more detail visit ..
http://www.mr-sudhir.com/blog/what-is-css.aspx

Change CSS menu heading hover attribute to orange while hovering

How can I make the menu-category color attribute change to orange when hovered and NOT remain orange while hovering other child items? Is this too tricky or am I not being clear enough? Please let me know. Thank you for help.
jsFiddle: http://jsfiddle.net/LmWk2/
<nav class="main-nav">
<ul>
<li class="menu-category">Title 1
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
</ul>
</li>
<li class="menu-category">Title 2
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
<li class="menu-item">Item 5</li>
</ul>
</li>
<li class="menu-category">Title 3
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
<li class="menu-item">Item 5</li>
</ul>
</li>
<li class="menu-category">Title 4
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
</ul>
</li>
</ul>
</nav>
The simplest way would be to add another element that wraps only the title:
<li class="menu-category"><span class="menu-category-title">Title 1</span>
.menu-category-title:hover {
color: orange;
}
http://jsfiddle.net/ExplosionPIlls/LmWk2/1/ (for TITLE1)
My answer addresses the color-change-on-hover issue and the related issue of making the links behave like buttons (block like) instead of text links.
As pointed out by a previous post, it is a good idea to wrap the title tag in a container, I chose h4 but almost anything will do. Also, for semantic reasons, but the link tags inside the list-item tags:
<nav class="main-nav">
<ul>
<li class="menu-category"><h4>Title 1</h4>
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
</ul>
</li>
...
...
...
</ul>
</nav>
The essential changes to the CSS are as follows.
For the title text:
.main-nav ul li.menu-category h4 {
margin: 0;
display: inline-block;
padding:5px 15px 8px 15px;
font-weight: normal;
}
.main-nav ul li.menu-category h4:hover {
color:#FB8521;
}
The trick here is to set display: inline-block to the element wrapping the title text. Because I chose to use h4, I needed to zero out the margin and set the font-weight to normal to keep with your previous styling. Also, add padding to make the text area large so you can trigger the hover effect without actually mousing over the text.
For the sub-menu items, set the a tags to have display: block, that way the link's active area fills up the width of the sub-menu panel. Add padding as needed.
.menu-category .menu-item a {
display: block;
padding: 5px 15px;
}
.menu-category .menu-item a:hover {
color:#FB8521;
}
You can see the working demo at: http://jsfiddle.net/audetwebdesign/jvgkG/
PS
There is flexibility in this layout with regards to how the hover works. I assumed that the title text reverts to white when you mouse onto the secondary menu items, but I could set it up so that the title remains orange as you move over the secondary menu.
Also, you can style the default link color as you see fit.

How do I properly use display:block on this menu?

Code:
<div class="menu">
<ul class="top_thing">
<li class="one_one">Services</li>
<ul class="the_one">
<li class="second">Language 1</li>
<li class="second">Language 2</li>
<li class="second">Language 3</li>
<li class="second">Language 4</li>
<li class="second">Language 5</li>
</ul>
<li class="one_one">About Us</li>
<li class="one_one">Contact</li>
</ul>
</div>
For CSS: I am using display:none on .the_one. Now once the services tab is hovered I want to then display .the_one. How can I do this? I tried doing:
li.the_one:hover {
display:block;
}
But that doesn't work either.
Your HTML is not valid. <ul> must have only <li> as children (and that includes other <ul>. Once you fix that, add these rules:
.the_one {
display: none;
}
.one_one:hover .the_one {
display: block;
}
http://jsfiddle.net/xvEvj/
You need to target the the inner list in your css to make it appear.
Change your css as below:
li.the_one:hover ul.the_one
{
display:block
}
the "li.the_one:hover" states that this will occur when the li with the class "the_one" is hovered over, then it applies a display:block to the ul with the class "the_one" inside the list item with the class "the_one".
Hope this helps.
Cheers.
Your HTML is not valid.
<div class="menu">
<ul class="top_thing">
<li class="one_one">Services
<ul class="the_one">
<li class="second">Language 1</li>
<li class="second">Language 2</li>
<li class="second">Language 3</li>
<li class="second">Language 4</li>
<li class="second">Language 5</li>
</ul>
</li>
<li class="one_one">About Us</li>
<li class="one_one">Contact</li>
</ul>
The second unordered list should rest within a list item of the first unordered list.

Three level CSS menu with first layer in horizontal layout

What I'm after is to have the top level ul lis laid out horizontally, and then subsequent levels laid out vertically, preferably indented slightly as levels go down, under their parent li.
Not after any hover functionality, just a nice layout, something like this:
Top Item 1 Top Item 2 Top Item 3
sub item 1 sub item 1 sub item 1
sub item 2 sub item 2 sub item 2
sub sub item 1 sub item 3 sub item 3
sub sub item 2 sub item 4 sub item 4
sub item 5 sub item 5 sub item 5
How about this:
Live Demo
CSS:
#footer {
overflow: auto;
background: #ddd
}
.outer {
list-style: none;
width: 33%;
float: left;
margin: 0;
padding: 0
}
.first {
font-weight: bold
}
.outer ul {
list-style: none;
margin: 0;
padding: 0 0 0 18px
}
HTML:
<div id="footer">
<ul class="outer">
<li class="first">Top Item 1</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
<ul class="outer">
<li class="first">Top Item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
<ul class="outer">
<li class="first">Top Item 3</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
</div>
here is a copy-paste stuff to play with:
<html>
<head>
<style>
li.level1 { float: left; display: inline; margin-right: 20px }
ul.level2 { display: inline }
li.level2 { display: block; padding-left: 20px }
ul.level3 { display: inline }
li.level3 { display: block; padding-left: 20px }
</style>
</head>
<body>
<ul class="level1">
<li class="level1">apple</li>
<li class="level1">banana
<ul class="level2">
<li class="level2">banana 1
<ul class="level3">
<li class="level3">banana 1 A</li>
<li class="level3">banana 1 B</li>
</ul>
</li>
<li class="level2">banana 2</li>
</ul>
</li>
<li class="level1">cherry
<ul class="level2">
<li class="level2">cherry 1</li>
<li class="level2">cherry 2</li>
</ul>
</li>
<li class="level1">dddd</li>
</ul>
</body>
</html>
Or if you want something pure css then how about something like this:
http://jsfiddle.net/pLFqd/2/
Edit: Missed the bit about not wanting hover functionality, try simple example attached