Menu
I am trying to get the second (lower) level bullet points in io2012 to animate separately from their parent bullet point, like this:
>* First level animates by itself
>+ Second level then animates by itself
>* Another first level animates by itself
I've tried several workarounds with HTML like using >* in place of >+ while attempting to indent the bullet with <div style="padding-left: 1em">>* Second level animated by itself.
However this just indents the text but not the bullet point. My experimentation with <li style="padding-left: 1em">...</li> similarly failed.
If there is no HTML solution, does the solution involve either of CSS or JavaScript?
202
If you are willing to go with a slightly hacky workaround, I have had success inserting .fragment at the start of paragraphs and bullets that I wanted to animate (some other things with my slides were conflicting with the >- shortcut, though I still have not figured out what).
In any case, this should work, even if it is a bit kludgy.
- .fragment First level animates by itself
- .fragment Second level then animates by itself
- .fragment Another first level animates by itself
(.fragment adds a div class "fragment" to the following paragraph or item)
122
If you want a sub level menu to increment, you could set a counter-increment in the css like demonstrated in the following snippet:
ol {
counter-reset: item
}
li {
display: block;
}
li:before {
content: counters(item, ".")" ";
counter-increment: item
}<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
</li>
<li>four</li>
</ol>However if numerical lists is not what you had in mind, there are a number of ways you can increment a list using various list-style types
h2.title {
font-size: 20px;
font-weight: 800;
margin-left:-20px;
padding: 12px;
counter-increment: ordem;
}
li.heading {
font-size: 16px;
font-weight: bold;
padding: 12px;
list-style-type:none;
}
.bullet {
counter-reset: bullet;
padding-left: 12px;
}
.bullet li {
list-style-type: none;
}
.bullet li:before {
counter-increment: bullet;
content: counter(ordem)"." counter(bullet)" ";
}
ol.none {
list-style:none!important
}
li.s2sub::before {
counter-increment:none!important;
content:none!important;
}
li.s2sub {
list-style:upper-alpha;
}
li.s3sub::before {
counter-increment:none!important;
content:none!important;
}
li.s3sub {
list-style-type:circle;
}
li.roman::before {
counter-increment:none!important;
content:none!important;
}
li.roman {
list-style:lower-roman inside;
}<body>
<ol>
<h2 class="title">Section 1</h2>
<li class="heading">Heading 1</li>
<ol class="bullet">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="heading">Heading 2</li>
<ol class="bullet">
<li class="roman">Item 1</li>
<li class="roman">Item 2</li>
<li class="roman">Item 3</li>
</ol>
<h2 class="title">Section 2</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s2sub">First subitem</li>
<li class="s2sub">Second subitem</li>
</ol>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2 class="title">Section 3</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s3sub">First subitem</li>
<li class="s3sub">Second subitem</li>
</ol>
</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</ol>
</body>Hope this helps
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
