Question

我试图在CSS中创建一个菜单，其中只有图标作为按钮可见，但当您将鼠标悬停在它们上方时，必须显示图标旁边的文字。问题是我想要使用slideDown（）效果显示文本的效果，然后向右移动。

HTML（包括图标的fontawesome）：

<body>
<nav>
    <ul>
        <li><a href="#"><i class="fa fa-home"></i><span>Home</span></a>
        </li>
        <li><a href="#"><i class="fa fa-users"></i><span>Team</span></a>
        </li>
        <li><a href="#"><i class="fa fa-comments"></i><span>Management</span></a>
        </li>
        <li><a href="#"><i class="fa fa-cog"></i><span>Settings</span></a>
        </li>
        <li><a href="#"><i class="fa fa-envelope"></i><span>Mail Jobs</span></a>
        </li>
    </ul>
</nav>
</body>

CSS：

nav {
    position:fixed;
    top:20px;
    background:#701313;
    border-radius:0 30px 30px 0;
    font-family:'Open Sans', sans-serif;
}
nav ul {
    margin:0px;
    padding:0px 20px;
    width:56px;
}
nav ul li {
    font-size:23px;
    display:block;
    width:3000px;
    margin:40px 0;
}
nav ul li a {
    background:#2e2e2e;
    border-radius: 30px;
    padding:15px 17px;
    color:#FFF;
    text-decoration: none;
}
nav ul li a:hover span {
    display:inline;
}
nav ul li i {
    font-size:28px !important;
}
nav ul li span {
    display:none;
    padding:0 20px;
}

我还加了JSFiddle。

理想的解决方案是纯CSS，但我不确定这是否可行。因此，如果不可能，使用jQuery的解决方案将是一个很好的结果。

Answer 1

您可以使用CSS3动画执行此操作，但必须为a元素指定固定宽度。这将使其不那么活跃。

jQuery可用于更新宽度值，CSS3动画将由此触发。我修改了你的CSS并添加了简单的JS函数来更新宽度值。

    nav ul li a {
        background:#2e2e2e;
        border-radius: 30px;
        padding:15px 0;
        color:#FFF;
        text-decoration: none;
        overflow:hidden;
        width:60px;
        display:inline-block;
        -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
        transition: width 0.5s; 
    }
    nav ul li a:hover {
    }

    nav ul li a:hover span {
        opacity: 1;
    }
    nav ul li i {
        margin-left:16px;
        font-size:28px !important;
    }
    nav ul li span {
       position:absolute;
        padding:0 20px;
        opacity: 0;
        -webkit-transition: opacity 0.9s; /* For Safari 3.1 to 6.0 */
        transition: opacity 0.9s;
    }

和Javascript代码：

$(function(){
    $("nav ul li a").hover(function(){
        $(this).css("width", $(this).find("span").innerWidth() + 50);
    }, function(){
        $(this).css("width", 60);
    });
});

您需要包含jQuery lib。
您可以在CSS中更改动画。

让display：none elem slideRight（）;

1 个答案: