css - 响应式设计中的向右滑动菜单[重复]答案

【问题标题】：css - slide right menu in responsive design [duplicate]css - 响应式设计中的向右滑动菜单[重复]
【发布时间】：2014-07-15 03:44:04
【问题描述】：

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

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

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

如何从 css 制作向右滑动的响应式菜单？？？

【问题讨论】：

尝试了left 和right 和transition。但它仍然不起作用。
你能在我的 jsfiddle 里给我看看吗？？？-@maremp
你想要什么：点击打开菜单或悬停时用滑入动画打开菜单？
在悬停时打开带有滑动效果的菜单-@enguerranws
我想实现如example 所示的向左滑动菜单。我尝试为<ul> 和<nav> 设置动画，但没有成功。-@enguerranws

标签： html css

【解决方案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 转换前缀的最新浏览器。记得指定其他浏览器前缀以使其跨浏览器工作

【讨论】：

工作正常。 Word 菜单仅用于演示。实际的 UI 有一个图像。但是我怎样才能像example一样制作左推菜单？？？-@T J
为此，我们必须同时为<ul> 或<nav> 设置动画，而不是为每个<li> 设置动画，为此我们需要在动画结构之外的东西来触发动画（像菜单按钮）..这就是为什么我提到你必须改变HTML结构:)
我尝试为<ul> 和<nav> 制作动画，但没有成功。你能告诉我你的jsfiddle吗？？？-@T J