Question

请找到这个jsfiddle jsfiddle 。当屏幕尺寸小于600px时，顶部菜单栏将转换为响应式菜单。当用户将鼠标悬停在“菜单”文本上时（此文本仅用于演示），将显示菜单。这适用于台式机和智能手机。现在，当用户点击“菜单”文本时，我尝试实现幻灯片右转换。我修改了下面的css类

.nav ul:hover li{
        display: block;     
        margin: 5px 0 0 0;      
    }

并添加transition属性。但它没有用。

如何从css ???

制作幻灯片右侧响应式菜单

Answer 1

这不是我怎么做的。您可以考虑更改HTML和CSS。

例如，单词menu简单地用HTML编写，这在语义上是不正确的，并且在尝试为元素设置动画时成为阻止程序，因为您必须保持文本可见并处理使用<li>的其余部分，这意味着这可以防止您在悬停菜单时完全轻松地为<ul>设置动画。恕我直言菜单应该是一个单独的元素。

但是，为了帮助您使用当前的HTML和CSS，您可以尝试这样的

.nav ul {
    padding: 20px 0;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/icon-menu.png) no-repeat 10px 11px;
    width: 74px;
    background-color: #5B9BD5;
    z-index: 1000;
    height:0px;
    -webkit-transition:all 1s;
}
.nav li {
    -webkit-transition:-webkit-transform 1s;
    -webkit-transform:translate(-100%);
    /* hide all <li> items*/
    transform:translate(-100%);
    margin: 0;
    width:75px;
}
.nav ul:hover {
    height:auto;
}
.nav ul:hover li {
    display: block;
    margin: 5px 0 0 0;
    -webkit-transform:translate(0%);
    transform:translate(0%);
}

JSFiddle

旁注：上述内容适用于webkit浏览器和不需要css3过渡前缀的最新浏览器。记得指定其他浏览器前缀以使其跨浏览器工作

css - 在响应式设计中滑动右侧菜单

1 个答案: