Animate second level bullet points in slidify

Asked 9/5, 2016 at 20:33 Answered 1/11, 2016 at 14:16

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?

Predial answered 9/5, 2016 at 20:33 Comment(2)

Have you tried using list-style: inside; in your nested list item element? Something like this: jsFiddle demo. – Platina 28/10, 2016 at 14:21

I have noticed within the HTML that the first order ul has class build incremental. Is there a JS shortcut to append all ul's with this class? – Predial 1/11, 2016 at 19:35

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)

Asbestos answered 26/10, 2016 at 13:44 Comment(0)

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

Jarry answered 1/11, 2016 at 14:16 Comment(1)

jsfiddle.net/RachGal/euq5a7zb Numerical jsfiddle.net/RachGal/jfvvu9f5 other list styles – Jarry 1/11, 2016 at 14:18

Recommended topics

Hot tags