Html css-响应式设计中的右滑菜单

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

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

并添加

transition

属性。但它不起作用

---

如何从css中创建幻灯片右键响应菜单？？？

我不会这样做。你必须考虑改变你的HTML和CSS。

例如，单词

菜单

只是用HTML编写的，这在语义上是不正确的，并且在尝试设置元素动画时会成为一个拦截器，因为您必须保持文本可见并处理

的其余部分，这意味着您无法在悬停菜单时轻松设置

的动画。IMHO菜单应该是一个单独的元素

但是，为了帮助您使用当前的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%);
}

.nav-ul{
填充：20px0；
位置：绝对位置；
排名：0；
左：0；
背景：url（../images/icon menu.png）不重复10px 11px；
宽度：74px；
背景色：5B9BD5；
z指数：1000；
高度：0px；
-webkit转换：所有1；
}
李国荣先生{
-webkit转换：-webkit转换1s；
-webkit转换：翻译（-100%）；
/*隐藏所有
项*/
转换：翻译（-100%）；
保证金：0；
宽度：75px；
}
.nav ul:悬停{
高度：自动；
}
.nav ul:悬停李{
显示：块；
保证金：5px0；
-网络工具包转换：翻译（0%）；
转化：转化（0%）；
}

---

旁注：以上适用于webkit浏览器和最新浏览器，这些浏览器不需要css3转换的前缀。请记住指定其他浏览器前缀，使其能够跨浏览器工作

尝试使用

左

和

右

和

转换

。但它仍然不起作用。你能在我的JSFIDLE中给我看一下吗？？？@maremp你想要什么：单击时打开菜单，或者在动画中用幻灯片悬停时打开菜单？悬停时打开具有滑动效果的菜单-@enguerranwsI想实现如下所示的幻灯片左菜单。我试图制作

和

的动画，但没有成功。-@enguerranwsworks很好。Word菜单仅用于演示。实际的UI有一个图像。但是我怎样才能像这样左键按下菜单呢？？？@T对于这一点，我们必须一起为

或
设置动画，而不是为每个
设置动画，为此，我们需要在被设置动画的结构之外的东西来触发动画（如菜单按钮）。。这就是为什么我提到您必须更改HTML结构：）我尝试设置
和
的动画，但没有成功。你能让我看看你的JSFIDLE吗？？——@T J