css - slide right menu in responsive design

Question

Please find this jsfiddle jsfiddle . When the screen size is less than 600px, the top menu bar is converted into responsive menu. When user hovers on "Menu" text (this text is used only for the demo), the menu appears. This works well on desktop and smartphones. Now I tried to implement slide right transition when user clicks on "Menu" text. I modified below css class

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

and add transition property. But it didn't work.

How do I make slide right responsive menu from css ???

tried with both `left` and `right` with `transition`. but still it doesn't work. — Valay, May 26 '14 at 11:36
What do you want : open the menu on click or open it on hover with a slide-in animation ? — enguerranws, May 26 '14 at 12:16
I would like to implement slide left menu as shown in this [example](http://tympanus.net/Blueprints/SlidePushMenus/). I tried to animate `
` and `
` but it didn't work.-@enguerranws — Valay, May 27 '14 at 08:07

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

This is not how i'd do it. You've to consider altering your HTML and CSS.

for example, the word menu is simply written in HTML, which is semantically incorrect and becomes a blocker while trying to animate the element, because you've to keep the text visible and deal with the rest of <li>, meaning this prevents you from being able to easily animate the <ul> altogether upon hovering menu. IMHO Menu should be a separate element.

However, to help you out with your current HTML and css, you can try something like this

.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

side note: above works in webkit browsers and latest browsers that doesn't require prefix for css3 transitions. remember to specify other browser prefixes to make it work cross browser

works fine. Word menu is just for demo. Actual UI has an image. But how can I make to left push menu like in this [example](http://tympanus.net/Blueprints/SlidePushMenus/) ???- @T J — Valay, May 26 '14 at 16:48
I tried to animate `
` and `
` but didn't work. Could you please show me in your jsfiddle ???- @T J — Valay, May 27 '14 at 07:26

css - slide right menu in responsive design

1 Answers1