Expand/collapse a menu list animated and only with CSS

Question

Here's what I'm trying to make:

视觉辅助

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.

Answer 1

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>

Answer 2

I have created the menu only using css please check the following fiddle https://jsfiddle.net/dwgpqncw/2/ also the code for the same is posted below

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>css menu</title>
<style>
*{margin:0; padding:0;}
ul{font-family:Arial, Helvetica, sans-serif;}
ul li ul{height:0px; transition:500ms all;-webkit-transition:500ms all;-moz-transition:500ms all;-o-transition:500ms all;overflow:hidden;}
ul li ul li{ transition:1300ms all;-webkit-transition:1300ms all;-moz-transition:1300ms all;-o-transition:1300ms all;opacity:0}
a{color:#000; text-transform:uppercase;}
ul li ul li a{color:red;}
/*set the height to 0 and on focus set the height to pixels calculation based on the line height*/
ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1){height:0px;overflow:hidden;}
ul li ul li{line-height:30px;font-size:16px;}
ul li .expandable{font-size:20px; line-height:35px; text-decoration:none; padding-left:20px; }
ul li .expandable:hover{text-decoration:underline;}
ul li ul li:before{padding-left:20px; content:"-"; font-size:16px; margin-left:20px}
ul li .expandable:focus{color:red;}
ul li .expandable:focus +ul:nth-child(1){height:90px;}
ul li .expandable:focus +ul:nth-child(2){height:120px;}
ul li .expandable:focus +ul:nth-child(3){height:60px;}
ul li .expandable:focus +ul:nth-child(4){height:120px;}
ul li .expandable:focus +ul:nth-child(1) li,ul li .expandable:focus +ul:nth-child(2) li,ul li .expandable:focus +ul:nth-child(3) li,ul li .expandable:focus +ul:nth-child(4) li{opacity:1;}    
</style>
</head>

<body>

<ul>
    <li>
        <a href="#" class="expandable">Home</a>
        <ul>
            <li><a href="#">Home link 1</a></li>
            <li><a href="#">Home link 2</a></li>
            <li><a href="#">Home link 3 </a></li>
        </ul>

    </li>


    <li>
        <a href="#" class="expandable">A Empressa</a>
        <ul>
            <li><a href="#">Empressa link 1</a></li>
            <li><a href="#">Empressa link 2</a></li>
            <li><a href="#">Empressa link 3 </a></li>
            <li><a href="#">Empressa link 4 </a></li>
        </ul>

    </li>

    <li>
        <a href="#" class="expandable">Protfolio</a>
        <ul>
            <li><a href="#">Protfolio link 1</a></li>
            <li><a href="#">Protfolio link 2</a></li>
        </ul>

    </li>


    <li>
        <a href="#" class="expandable">Contato</a>
        <ul>
            <li><a href="#">Contato link 1</a></li>
            <li><a href="#">Contato link 2</a></li>
            <li><a href="#">Contato link 3 </a></li>
            <li><a href="#">Contato link 4 </a></li>
        </ul>

    </li>


</ul>
</body>
</html>

Expand/collapse a menu list animated and only with CSS

Question

2 answers

solution1
14 ACCPTED 2015-03-13 19:00:12

solution2
0 2015-03-13 19:01:25

Expand/collapse a menu list animated and only with CSS

Question

2 answers

solution1 14 ACCPTED 2015-03-13 19:00:12

solution2 0 2015-03-13 19:01:25

solution1
14 ACCPTED 2015-03-13 19:00:12

solution2
0 2015-03-13 19:01:25