一行菜单浮动更改答案

【问题标题】：One line menu float change一行菜单浮动更改
【发布时间】：2015-08-15 13:13:44
【问题描述】：

我一直在尝试查找有关如何将此菜单的浮动更改为从右向左的信息，同时让孩子们骑在主菜单下。

在不走运的情况下进行了大量研究后，我想也许你们中的一个人可以帮助我：

请在下面找到 css 和 html 的链接： http://jsfiddle.net/actm/Lzotcbp4/

HTML

<ul id="paneltwo">  
 <li class="mask"><h3>MENU ></h3></li>  
 <li class="linkOne"><a href="#">Link 1</a></li>  
 <li class="linkTwo"><a href="#">Link 2</a></li>  
 <li class="linkThree"><a href="#">Link 3</a></li>  
 <li class="linkFour"><a href="#">Link 4</a></li>  
 <li class="linkFive"><a href="#">Link 5</a></li>  
</ul>

CSS

/* CSS3 TRANSITION ONLY EFFECT */

#paneltwo { 
    width:300px;
    list-style:none; 
    position:relative;
    display:inline;
}

#paneltwo li {  
    border-radius:3px 3px 3px 3px; 
    margin-top:5px;
    width:150px;
    float:left;
    overflow:hidden;
    position:relative;
    background: #000000;
    background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
    background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
    background: -o-linear-gradient(top, #161616 0%,#000000 100%);
    border-left:1px solid #111; 
        border-top:1px solid #111; 
        border-right:1px solid #333; 
        border-bottom:1px solid #333;
}

#paneltwo li.mask { /* It allows us to hide the link behind it */
    z-index:10; 
    overflow:hidden;
}

#paneltwo li a { 
    color:#fff; 
    display:block; 
    padding:10px;
}

#paneltwo li a:hover { 
    color:#00c6ff;
}

#paneltwo li.linkOne, 
#paneltwo li.linkTwo, 
#paneltwo li.linkThree, 
#paneltwo li.linkFour, 
#paneltwo li.linkFive {   
        -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

#paneltwo:hover li.linkOne, 
#paneltwo:hover li.linkTwo, 
#paneltwo:hover li.linkThree, 
#paneltwo:hover li.linkFour, 
#paneltwo:hover li.linkFive {   
        -moz-transform:translateX(0px);
    -moz-transition: all 1s ease-in-out; 
    -webkit-transform:translateX(0px);
    -webkit-transition: all 1s ease-in-out; 
    -o-transform:translateX(0px);
    -o-transition: all 1s ease-in-out; 
}

#paneltwo li.linkOne {
    -moz-transform:translateX(-90%); 
    -moz-transition-delay:0.6s; 

    -webkit-transform:translateX(-90%); 
    -webkit-transition-delay:0.6s; 

    -o-transform:translateX(-90%); 
    -o-transition-delay:0.6s; 

    z-index:5; 
}

#paneltwo li.linkTwo { 
    -moz-transform:translateX(-180%); 
    -moz-transition-delay:0.5s; 

    -webkit-transform:translateX(-180%); 
    -webkit-transition-delay:0.5s; 

    -o-transform:translateX(-180%); 
    -o-transition-delay:0.5s; 

    z-index:4;
}

#paneltwo li.linkThree { 
    -moz-transform:translateX(-270%); 
    -moz-transition-delay:0.4s; 

    -webkit-transform:translateX(-270%); 
    -webkit-transition-delay:0.4s; 

    -o-transform:translateX(-270%); 
    -o-transition-delay:0.4s;

    z-index:3;
}

#paneltwo li.linkFour { 
    -moz-transform:translateX(-360%); 
    -moz-transition-delay:0.3s;

    -webkit-transform:translateX(-360%); 
    -webkit-transition-delay:0.3s;

    -o-transform:translateX(-360%); 
    -o-transition-delay:0.3s; 
    z-index:2;
}

#paneltwo li.linkFive { 
    -moz-transform:translateX(-450%); 
    -moz-transition-delay:0.2s;

    -webkit-transform:translateX(-450%); 
    -webkit-transition-delay:0.2s;

    -o-transform:translateX(-450%); 
    -o-transition-delay:0.2s;

    z-index:1;
}

#paneltwo:hover li.linkOne { 
    -moz-transition-delay:0s; 
    -webkit-transition-delay:0s; 
    -o-transition-delay:0s; 
    z-index:5;
}

#paneltwo:hover li.linkTwo { 
    -moz-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
    -o-transition-delay:0.2s; 
    z-index:4;
}

#paneltwo:hover li.linkThree { 
    -moz-transition-delay:0.4s;
    -webkit-transition-delay:0.4s;
    -o-transition-delay:0.4s; 
    z-index:3;
}

#paneltwo:hover li.linkFour { 
    -moz-transition-delay:0.6s;
    -webkit-transition-delay:0.6s;
    -o-transition-delay:0.6s; 
    z-index:2;
}

#paneltwo:hover li.linkFive { 
    -moz-transition-delay:0.8s;
    -webkit-transition-delay:0.8s;
    -o-transition-delay:0.8s; 
    z-index:1;
}

请帮忙！

【问题讨论】：

链接和代码在哪里？
你好 Micho，我刚刚发布了。抱歉，我对此很陌生。
jsfiddle.net/Lzotcbp4/1
嗨，瑞秋，非常感谢您的帮助。虽然它有很多隐藏在菜单后面的特点。在原始菜单上，所有子菜单都位于主菜单后面。您有什么建议让它“正确”浮动并带有子菜单吗？提前谢谢你！！！
@actm 请使用@符号来称呼某人，否则它不会进入我的收件箱。我现在刚好看到这个味精。您的原始代码中没有子菜单？您可以发布相关代码吗？你的意思是隐藏，而不是骑车

标签： css menu css-float submenu right-to-left

【解决方案1】：

如果您希望它来自右侧，您需要将所有“translateX”设为正数而不是负数。您还需要制作“float:right”


/* CSS3 TRANSITION ONLY EFFECT */
#paneltwo { 
    width:300px;
    list-style:none; 
    position:relative;
    display:inline;
}

#paneltwo li {  
    border-radius:3px 3px 3px 3px; 
    margin-top:5px;
    width:150px;
    float:right;
    overflow:hidden;
    position:relative;
    background: #000000;
    background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
    background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
    background: -o-linear-gradient(top, #161616 0%,#000000 100%);
    border-left:1px solid #111; 
        border-top:1px solid #111; 
        border-right:1px solid #333; 
        border-bottom:1px solid #333;
}

#paneltwo li.mask { /* It allows us to hide the link behind it */
    z-index:10; 
    overflow:hidden;
}

#paneltwo li a { 
    color:#fff; 
    display:block; 
    padding:10px;
}

#paneltwo li a:hover { 
    color:#00c6ff;
}

#paneltwo li.linkOne, 
#paneltwo li.linkTwo, 
#paneltwo li.linkThree, 
#paneltwo li.linkFour, 
#paneltwo li.linkFive {   
        -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

#paneltwo:hover li.linkOne, 
#paneltwo:hover li.linkTwo, 
#paneltwo:hover li.linkThree, 
#paneltwo:hover li.linkFour, 
#paneltwo:hover li.linkFive {   
        -moz-transform:translateX(0px);
    -moz-transition: all 1s ease-in-out; 
    -webkit-transform:translateX(0px);
    -webkit-transition: all 1s ease-in-out; 
    -o-transform:translateX(0px);
    -o-transition: all 1s ease-in-out; 
}

#paneltwo li.linkOne {
    -moz-transform:translateX(+90%); 
    -moz-transition-delay:0.6s; 

    -webkit-transform:translateX(+90%); 
    -webkit-transition-delay:0.6s; 

    -o-transform:translateX(+90%); 
    -o-transition-delay:0.6s; 

    z-index:5; 
}

#paneltwo li.linkTwo { 
    -moz-transform:translateX(+180%); 
    -moz-transition-delay:0.5s; 

    -webkit-transform:translateX(+180%); 
    -webkit-transition-delay:0.5s; 

    -o-transform:translateX(+180%); 
    -o-transition-delay:0.5s; 

    z-index:4;
}

#paneltwo li.linkThree { 
    -moz-transform:translateX(+270%); 
    -moz-transition-delay:0.4s; 

    -webkit-transform:translateX(+270%); 
    -webkit-transition-delay:0.4s; 

    -o-transform:translateX(+270%); 
    -o-transition-delay:0.4s;

    z-index:3;
}

#paneltwo li.linkFour { 
    -moz-transform:translateX(+360%); 
    -moz-transition-delay:0.3s;

    -webkit-transform:translateX(+360%); 
    -webkit-transition-delay:0.3s;

    -o-transform:translateX(+360%); 
    -o-transition-delay:0.3s; 
    z-index:2;
}

#paneltwo li.linkFive { 
    -moz-transform:translateX(+450%); 
    -moz-transition-delay:0.2s;

    -webkit-transform:translateX(+450%); 
    -webkit-transition-delay:0.2s;

    -o-transform:translateX(+450%); 
    -o-transition-delay:0.2s;

    z-index:1;
}

#paneltwo:hover li.linkOne { 
    -moz-transition-delay:0s; 
    -webkit-transition-delay:0s; 
    -o-transition-delay:0s; 
    z-index:5;
}

#paneltwo:hover li.linkTwo { 
    -moz-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
    -o-transition-delay:0.2s; 
    z-index:4;
}

#paneltwo:hover li.linkThree { 
    -moz-transition-delay:0.4s;
    -webkit-transition-delay:0.4s;
    -o-transition-delay:0.4s; 
    z-index:3;
}

#paneltwo:hover li.linkFour { 
    -moz-transition-delay:0.6s;
    -webkit-transition-delay:0.6s;
    -o-transition-delay:0.6s; 
    z-index:2;
}

#paneltwo:hover li.linkFive { 
    -moz-transition-delay:0.8s;
    -webkit-transition-delay:0.8s;
    -o-transition-delay:0.8s; 
    z-index:1;
}

我不知道你想隐藏多少孩子，但你可以调整 translateX 以使它们或多或少隐藏。

【讨论】：