logo标签列表

CSS下拉菜单过渡效果

htmlcssdrop-down-menu
4

我是您的助手，将为您翻译以下与IT技术有关的内容。您需要让菜单出现下拉过渡效果，但是似乎不知道哪里出了问题，菜单本身立即出现，忽略了过渡效果。

CSS代码如下：

-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
opacity:0;

据我所知，我应该将其添加到nav ul ul CSS块中，并将opacity:1添加到nav ul li:hover > ul，但是它不起作用。
以下是整个菜单的代码。
HTML
<nav>
    <ul>
        <li><a href="http://www.www.com/">Menu 1</a></li>
        <li><a href="http://www.www.com/">Menu 2</a></li>
        <li><a>Dropdown Here</a>
            <ul>
                <li><a href="http://www.www.com/">Dropdown1</a></li>
                <li><a href="http://www.www.com/">Dropdown2</a></li>
                <li><a href="http://www.www.com/">Dropdown3</a></li>
            </ul>
        </li>
        <li><a href="http://www.www.com/">Menu 4</a></li>
        <li><a href="http://www.www.com/">Menu 5</a></li>
    </ul>
</nav>

我正在使用的CSS样式是：
nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 25px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
    float:right;
    z-index:9999;

}

nav ul ul {
    display: none;
    -webkit-transition: height 0.3s ease-in;
    -moz-transition: height 0.3s ease-in;
    -o-transition: height 0.3s ease-in;
    -ms-transition: height 0.3s ease-in;
    transition: height 0.3s ease-in;
    opacity:0;      
}

nav ul li:hover > ul {
    display: block;
    opacity:1;
}

nav ul:after {
    content: ""; 
    clear: both; 
    display: block;
}

nav ul li {
    float: left;
}

nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

nav ul li:hover a {
    color: #fff;
}

nav ul li a {
    display: block;
    padding: 30px 20px;
    color: #757575; 
    text-decoration: none;
}

nav ul ul {
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
}

nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a; 
    position: relative;
}

nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
}   

nav ul ul li a:hover {
    background: #4b545f;
}

nav ul ul ul {
    position: absolute; left: 100%; top:0;
}
3个回答
10
你的过渡不会触发，因为当鼠标悬停在元素上时，它们的 height 并未改变，只有 display 和 opacity 发生了变化。要让元素淡入 - 你需要将过渡属性更改为 opacity 或 all。
如果你想要过渡高度 - 你需要将元素的 height 设置为 0，然后在 :hover 上更改它。
不过要注意 - 高度过渡仅适用于指定的 height 值，并且对于类似于 height: auto; 的情况无法起作用。有一个解决方法如下：
ul {
    transition: all 0.5s;
    max-height: 0;
}

ul:hover {
    max-height: 200px; //or whatever could be your max-height value - don't overdo it, will be crappy transition.
}
1
你只需转换高度，因此需要在悬停时更改的元素是高度。
transition: height 0.3s ease-in;
            ^^^^^^

现在悬停的CSS正在更改不透明度和显示属性，如下所示：
   nav ul li:hover > ul {
        display: block;
        opacity:1;
   }

所以无论你想要过渡的属性是什么，都需要在过渡语句中引用。你可以使用 "all" 来快速获取所有变化的属性：
transition: all 0.3s ease-in;

还要注意，display不是一个可以过渡的属性。如果要隐藏你的 ul，你可以给它一个高度为0，然后在悬停时给它一个特定的高度。
谢谢你提醒我关于显示的问题。我使用了visibility，现在它可以正常工作了。 - Andy Andy
1
尝试这个 步骤1. 让我们设置我们的html。我们将把我们的菜单放在一个头部中，并且我们还将在头部下方创建一个“内容”区域。
一点解释： 这个过程的一部分解决了IE的堆叠顺序问题，并确保我们的菜单不会在内容区域后面呈现，这是我经常看到的问题。一个典型的情况是在头部下面有某种图像滚动条，这需要滚动条容器具有相对定位，并导致菜单在IE中呈现在滚动条后面。为了解决这个问题，我们的Header必须具有position:static。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta  charset="UTF-8" />
<title>CSS3 Horizontal sliding menu</title>
<style>
.header{
width: 600px; 
height:50px; 
border:1px dotted grey;
}
.content{
position:relative; 
width: 600px; 
height:500px; 
color:white; 
background-color: #e6056f; 
overflow:hidden;
}
.item{
position:absolute; 
top:50px; 
left:20px; 
width: 600px; 
height:400px; 
background-color: grey;
}
</style>
<body>
<div class="header">
    <div class="navigation">
    </div>
</div>

<div class="content">
    <div class="item">
    </div>
</div>

</body>
</html>

步骤2。 我们将使用无序列表来创建菜单结构，并将其放置在导航div中： （确保您用实际链接替换#，例如：#变成链接）

<ul>
            <li><a href="#">Main - 1</a>
                <ul>
                    <li><a href="#">Level 2 - 1</a></li>
                    <li><a href="#">Level 2 - 2</a></li>
                    <li><a href="#">Level 2 - 3</a></li>
                    <li><a href="#">Level 2 - 4</a></li>
                </ul>
            </li>
            <li><a href="#">Main - 2</a>
                <ul>
                    <li>
                        <ul>
                            <li><a href="#">Level 3 - 1</a></li>
                            <li><a href="#">Level 3 - 2</a></li>
                            <li><a href="#">Level 3 - 3</a></li>
                            <li><a href="#">Level 3 - 4</a></li>
                            <li><a href="#">Level 3 - 5</a></li>
                        </ul>
                        <a href="#">Level 2 - 1</a>
                    </li>
                    <li>
                        <ul>
                            <li><a href="#">Level 3 - 1</a></li>
                            <li><a href="#">Level 3 - 2</a></li>
                            <li><a href="#">Level 3 - 3</a></li>
                            <li><a href="#">Level 3 - 4</a></li>
                            <li><a href="#">Level 3 - 5</a></li>
                        </ul>
                        <a href="#">Level 2 - 2</a></li>
                    <li>
                        <ul>
                            <li><a href="#">Level 3 - 1</a></li>
                            <li><a href="#">Level 3 - 2</a></li>
                            <li><a href="#">Level 3 - 3</a></li>
                            <li><a href="#">Level 3 - 4</a></li>
                            <li><a href="#">Level 3 - 5</a></li>
                        </ul>
                        <a href="#">Level 2 - 3</a></li>
                    <li><a href="#">Level 2 - 4</a></li>
                </ul>
            </li>
            <li><a href="#">Main - 3</a></li>
            <li><a href="#">Main - 4</a></li>
        </ul>

步骤三。为了将菜单水平定位，我们将在菜单项上使用float:left，并使用一些基本样式使其更具可读性：
.navigation {
        width:600px;
    }
    .navigation ul{
    /* positioning */
        position:relative;
        z-index:1000;
    /* remove the dots next to list items: */
        list-style:none; 
    /* get rid of any default or inherited margins and padding: */
        margin:0; 
        padding:0; 

    /* styling: */
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: normal;
        font-size: 15px;
    }

    /* we're using the direct descendant selectors > to ONLY affect the main menu items */
    .navigation > ul > li {
    /* positioning */ 
        position: relative;
        float: left;
    /* styling: */
        margin-right: 10px;
    }
    .navigation > ul > li > a {
    /* positioning */ 
        display:block;
    /* styling: */
        background-color: #2c2c2c; /*  grey */
        padding:8px 14px;
        text-decoration:none;
        color:#aaaaaa; 

    }
    .navigation > ul > li > a:hover{
    /* styling: */
        background-color:#666666; /* grey */
        color:#eeeeee; /* light grey */
    }

第四步。 下拉框。我们将把相同的样式应用于二级和三级下拉框，但您可以选择添加其他样式以区分它们。

.navigation ul ul{

        background-color:#e6056f; /* remove. this is for illustration purposes only */
        width:340px; /* you need a width to accommodate tertiary menus */

        position:absolute;
        z-index:100;

        height: 0;
        overflow: hidden;
    }


    /* don't display tertiary box yet */
    .navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
        height:0;

    }
    /* tertiary drop-down box */
    .navigation ul ul ul{
        left:170px;
        width:170px;
    }

    .navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
    .navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
        height:220px; /* need a height to accommodate any tertiary menus */
    }

    /* drop-down item styles */
    /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */

    .navigation ul ul li{
        background-color:#eaeaea; /* grey */
        width:170px;
    }

    .navigation ul ul li:hover {
        background-color:#999; /* grey */
    }

    .navigation ul ul li a {
        display:block;
        text-decoration:none;
        margin:0 12px;
        padding:5px 0;
        color:#4c4c4c; /* grey */
    }
    .navigation ul ul li a:hover, .navigation ul ul li:hover > a {
        color:#ffffff; /* white */
    }

第五步 - 可选 我喜欢在菜单项之间有分隔线，但只是在菜单项之间。而且我也不想让它们一直延伸到下拉框的边缘，这意味着需要进行更多的CSS调整，但我认为这样看起来更好。通常我们可以使用:last-child来删除列表中的最后一条线，但由于IE不识别:last-child，所以我们将使用+选择器。以下规则在每个菜单项之间插入线，并确保我们没有任何多余的不需要的线条。一开始可能有点困难，但它可以在各个浏览器上正常工作。而且由于这些线条不一直延伸到边缘，当您悬停在一个项目上时，它还可以确保没有奇怪的间隙。
.navigation ul ul ul li a{
        border:0 !important;
    }
    .navigation ul ul ul li + li a{
        border-top:1px dotted #999 !important;
    }
    .navigation ul ul li + li a{
        border-top:1px dotted #999;
    }
    .navigation ul ul li:hover + li a{
        border-top:1px solid #eaeaea;
    }
    .navigation ul ul ul li:hover + li a{
        border: 0 !important;
    }
    .navigation ul ul ul li:hover + li{
        border-top:1px solid #999 !important;
    }

第六步。 魔法

到现在为止，您应该有一个普通的CSS下拉菜单。让我们加入魔法。 实际上，这将非常容易。

将以下属性添加到.navigation ul ul规则中：

        -webkit-transition: height 0.3s ease-in;
        -moz-transition: height 0.3s ease-in;
        -o-transition: height 0.3s ease-in;
        -ms-transition: height 0.3s ease-in;
        transition: height 0.3s ease-in;

而这些则是针对 .navigation ul ul li 规则的。
        -webkit-transition: background-color 0.3s ease;
        -moz-transition: background-color 0.3s ease;
        -o-transition: background-color 0.3s ease;
        -ms-transition: background-color 0.3s ease;
        transition: background-color 0.3s ease;

步骤7。 如果您关心IE 7，还有一件事情要做。
为了消除IE 7中菜单项之间的间隙，我将在文件顶部添加一些条件语句：
替换这两行代码。
<!DOCTYPE HTML>
<html lang="en">

在你的文件顶部插入以下内容：
<!DOCTYPE HTML>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

并将此规则添加到 CSS 中：
    /* unfortunate ie7 gap fix */
    .ie7 .navigation ul ul li{
        margin-bottom:-3px;
    }

就是这样！

可选增强功能： 我要在具有第三层菜单的项目上添加一个小箭头：

制作一个arrow.png图像，并将此规则添加到您的CSS中：

.arrow{background:url(arrow.png) right center no-repeat;}

为具有三级菜单的链接添加箭头类： 例如：二级 - 1

请不要发布仅包含链接的答案，因为如果外部链接消失，它们将毫无用处。 - Blazemonger
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接