使用CSS实现菜单列表的展开/折叠动画

Question

使用CSS实现菜单列表的展开/折叠动画

javascriptjqueryhtmlcss

7

这是我想要制作的内容：

可视化辅助

点击“PORTFOLIO”；
平滑地将所有内容向下推；
新链接平滑地淡入；
再次点击“PORTFOLIO”，执行相反的操作；

我的当前代码：

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

有没有可能仅使用CSS而无需JS就能实现这一点？我完全不知道如何进行动画部分，我尝试了CSS转换属性，但没有成功。

另外，有关标记和JS的任何技巧？我不认为我正在按“正确的方式”进行操作......如果有任何提示，将不胜感激。

- almostamachine

CSS确实可以将焦点放在像链接或输入框这样的元素上，因此，您可以仅通过CSS切换（显示/隐藏）子菜单并使用:focus和pointer-events来控制光标。 :) - G-Cyrillus

2个回答

0

我已仅使用CSS创建了菜单，请检查以下 Fiddle 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>

- melwyn pawar

请使用TidyUp按钮并遵循其建议。此外，您的菜单没有淡入淡出效果，这是要求的。 - isherwood

我现在已经添加了淡入淡出效果 https://jsfiddle.net/dwgpqncw/1/。什么是“tidyUp”按钮？ - melwyn pawar

它就在主菜单中。将你的CSS移动到CSS面板并点击它。 - isherwood

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- G-Cyrillus · Accepted Answer

只用 CSS，您可以使用 :focus ，如果需要切换效果，还可以使用 pointer-events ：

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

您甚至可以在没有类或ID的情况下执行此非常简单的CSS：

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>