Animate second level bullet points in slidify
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)
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