Question

24

Expand/collapse a menu list animated and only with CSS

rated 0 times [ 25] [ 1] / answers: 1 / hits: 25067 / 9 Years ago, fri, march 13, 2015, 12:00:00

Here's what I'm trying to make:

Visual

Click on PORTFOLIO;

Pushes everything down smoothly;

New links fade-in smoothly;

Click on PORTFOLIO again, do everything in reverse;

My current code;

$(function () {

    $('[data-toggle]').on('click', function () {

        var id = $(this).data(toggle),

            $object = $(id),

            className = open;



        if ($object) {

            if ($object.hasClass(className)) {

                $object.removeClass(className)

            } else {

                $object.addClass(className)

            }

        }

    });

});

#list {

    display: none;

}

#list.open {

    display: block;

}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>



<nav>

    <ul>

        <li><a href=#>Home</a> </li>

        <li><a href=#>A Empresa</a> </li>

        <li><a href=# class=hide data-toggle=#list>Portfolio</a>

            <ul id=list>

                <li><a href=#>Comerciais</a> </li>

                <li><a href=#>Residenciais</a> </li>

                <li><a href=#>Institucionais</a> </li>

                <li><a href=#>Edifícios</a> </li>

            </ul>

        </li>

        <li><a href=#>Contato</a> </li>

    </ul>

</nav>

It's possible to accomplish this without JS, only with CSS? I have no clue whatsoever how to do the animation part, I tried CSS Transitions propriety, but didn't work.

Also, any tips for the markup and JS? I don't thinks I'm doing it the right way... any tips would be appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaia

Add To Favorites

Follow

Total Points: 574

Total Questions: 109

Total Answers: 110

Location: Malaysia

Member since Wed, May 11, 2022

2 Years ago

answered 9 Years ago tayaw · Accepted Answer

With only CSS you may use :focus and eventually pointer-events if you want a toggle effect :

#list {

  max-height: 0;

  overflow: hidden;

  transition: 0.5s linear;

}



a:focus+#list {

  max-height: 15em;

}

/* only select that link , here using the href attribute */

a[href=nowhere]:focus {

  pointer-events: none;

}

<nav>

  <ul>

    <li><a href=#>Home</a> </li>

    <li><a href=#>A Empresa</a> </li>

    <li><a href=#nowhere>Portfolio</a>

      <ul id=list>

        <li><a href=#>Comerciais</a> </li>

        <li><a href=#>Residenciais</a> </li>

        <li><a href=#>Institucionais</a> </li>

        <li><a href=#>Edifícios</a> </li>

      </ul>

    </li>

    <li><a href=#>Contato</a> </li>

  </ul>

</nav>

You can even do this very little CSS without class nor id :

ul a +ul {

  max-height:0;

  overflow:hidden;

  transition:0.5s linear;

  }

ul a:focus + ul {

  max-height:15em;

  }

/* only select that link , here using the href attribute */

a[href=nowhere]:focus {

  pointer-events: none;

}

<nav>

    <ul>

        <li><a href=#nowhere>Home</a>

            <ul>

              <li>item</li>

              <li>item</li>

              <li>item</li>

              <li>item</li>

              <li>item</li>

            </ul>

        </li>

        <li><a href=#nowhere>A Empresa</a>

            <ul>

              <li>item</li>

              <li>item</li>

            </ul>

        </li>

        <li><a href=#nowhere >Portfolio</a>

            <ul>

                <li><a href=#>Comerciais</a> </li>

                <li><a href=#>Residenciais</a> </li>

                <li><a href=#>Institucionais</a> </li>

                <li><a href=#>Edifícios</a> </li>

            </ul>

        </li>

        <li><a href=#>Contato</a>

            <ul>

              <li>item</li>

              <li>item</li>

              <li>item</li>

            </ul>

        </li>

    </ul>

</nav>