Развернуть/свернуть список меню анимированы и только с помощью CSS

Вот что я пытаюсь сделать:Развернуть/свернуть список меню анимированы и только с помощью CSS

Visual aid

Нажмите на кнопку «ПОРТФОЛИО»;
Толкает все гладко;
Новые ссылки плавные;
Нажмите «ПОРТФОЛИО» еще раз, сделайте все наоборот;

Мой текущий код;

$(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>

Это можно сделать это без JS, только с помощью CSS? Я понятия не имею, как сделать часть анимации, я попробовал CSS Transitions, но не работал.

Кроме того, любые советы по разметке и JS? Я не думаю, что я делаю это «правильно» ... любые советы будут оценены.

источник

2015-03-13 almostamachine

CSS действительно принимает фокус на элементе, такие как ссылка или ввод, так что да , вы можете переключить (показать/скрыть) подменю с помощью: фокуса и указателей-событий только через CSS :) –

Только с помощью CSS вы можете использовать :focus и в конце концов pointer-events если вы хотите переключить эффект:

#list { 
 
    max-height:0; 
 
    overflow:hidden; 
 
    transition:0.5s linear; 
 
    } 
 
a:focus + #list { 
 
    max-height:15em; 
 
    } 
 
a: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>

Вы можете даже сделать это очень мало CSS без класса, ни ID:

ul a +ul { 
 
    max-height:0; 
 
    overflow:hidden; 
 
    transition:0.5s linear; 
 
    } 
 
ul a:focus + ul { 
 
    max-height:15em; 
 
    } 
 
a: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>

источник

2015-03-13 19:00:12

Я создал меню только с помощью CSS, пожалуйста, проверьте следующую скрипка https://jsfiddle.net/dwgpqncw/2/ также код для того же размещен ниже

<!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>

источник

2015-03-13 19:01:25

Пожалуйста, используйте кнопку TidyUp и следуйте ее советам. Кроме того, ваше меню не имеет эффекта затухания, как было запрошено. – isherwood

Я добавил эффект затухания https://jsfiddle.net/dwgpqncw/1/. Какая кнопка tidyUp? –

Это прямо в главном меню. Переместите CSS на панель CSS и щелкните по нему. – isherwood

Развернуть/свернуть список меню анимированы и только с помощью CSS

ответ

Смежные вопросы