使用CSS3创建淡入淡出的导航栏按钮

要编辑这个，因为我是一个顽固的白痴谁看到了他的方式错误。或多或少都是关于如何在水平导航栏上创建一组下拉链接的相同问题，但这次使用ul和li。使用CSS3创建淡入淡出的导航栏按钮

到目前为止，我做了这么多的进展：

<nav> 
    <ul class="width"> 
     <li><a ...</li> 
     <li><a ... 
      <ul> 
       <li><a ...</li> 
       <li><a ...</li> 
       <li><a ...</li> 
      </ul> 
     </li> 
     <li><a ...</li> 
    </ul> 
</nav>

CSS：

nav ul{width:100%;text-align:justify;font-size:0;} 
nav ul:after{content:"";width:100%;display:inline-block;} 
nav li{list-style:none;display:inline-block;} 
nav a{display:inline-block;padding:10px;} 
nav ul ul{display:none;}

但是，它仍然是不完整的，因为我不知道该如何从这里取得进展。目前，此代码隐藏了将显示在下拉菜单中的内容，但没有任何代码可以使其再次显示。我见过的指南使用浮游物。那些绝对必要吗？

来源

2014-01-15 Hiigaran

您仍然需要将下拉链接与其下级链接包装起来。就像这样：

HTML：

新建CSS：

.dropdown{ 
    padding: 0; 
    position:relative; 
    width: 100px; 
    display:block; 
    float:left; 
} 
.dropdown a { 
    width: 100%; 
} 
.droplinks{ 
    position:absolute; 
    top:100%; 
    left:0; 
    display:none; 
    height:0; 
    transition: height 0.2s linear; 
} 
.dropdown a:hover ~ .droplinks{ 
    display:block; 
    height: 150px; 
} 
.droplinks:hover { 
    display:block; 
    height: 150px; 
}

看到这个fiddle。这只是一个粗略的例子，你需要调整一些对齐和类似的东西，但我认为你可以做到这一点。主要是向你展示下拉式操作的工作方式。

来源

2014-01-15 22:42:01 zsaat14

谢谢。我明天的某个时间会给你一个镜头，让你知道它是怎么回事。我应该也可以完成对齐。 – Hiigaran

好吧，它有点作品。我不得不从.dropdown中删除宽度和浮点数，从.dropdown a开始的宽度以及从.dropdown a：hover〜...开始的高度，因为它没有做任何事情。我还必须将.dropdown显示更改为内联块，以便按照应有的方式将所有内容对齐。但是，下拉式转换不起作用。即便如此，我不认为你知道是否可以使用淡入淡出而不是幻灯片吗？ – Hiigaran

确定您可以淡入。只需制作不透明的动画即可。 – zsaat14

使用CSS3创建淡入淡出的导航栏按钮

回答

相关问题