One line menu float change

Question

I have been trying to find information to how to change the float of this menu to right to left while keeping the childs ridden under the main menu.

After doing a lot of research with not lucky I thought maybe one of you guys could hep me with it:

Please find link for css and httml below: 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;
}

PLEASE HELP!

Hello Micho, I have just posted. Sorry, I am quite new on this. — actm, Aug 15 '15 at 13:19
Hi Rachel, thank you so much for your help. Although it has lot it's characteristics of hiding behind the menu. On the original one all the sub menus are ridden behind the main menu. Is there anything you suggest to make it floating "right" and with ridden sub-menus? Thank you so much in advance!!! — actm, Aug 15 '15 at 13:40
@actm please use the @ sign to address somebody or else it doesn;t go in my inbox. i just happened to see this msg now. there were no sub menus in your original code? can you post the relevant code? and do you mean hidden, not ridden — Rachel Gallen, Aug 16 '15 at 14:32

score 0 · Answer 1 · answered Aug 16 '15 at 20:27

You need to make all your "translateX"s positive instead of negative if you want it coming from the right. You also need to make the "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;
}

I don't know how much you want to hide the children, but you can adjust the translateX to make them more or less hidden.

One line menu float change

1 Answers1