Fork me on GitHub

Sliding Menu Plugin

A mobile-first example of using CSS and Javascript to make a decent multi-level responsive sliding navigation menu.
Inspired on jquery-sliding-menu.

Options

className "" String Adicional class for menu element.
transitionDuration 250 Number Default slide animation speed.
dataJSON false Boolean A JSON object to build the menu from. Check our JSON example.
initHref false String The link to the selected panel. Set to false (boolean) to use the root panel.
backLabel 'Back' String Label for the back button. Set to true (boolean) to use the link's own label.

Makeup

                        .sliding-menu {
                            position: relative;
                            overflow: hidden;
                            background-color: rgba(255, 255, 255, 0.5);
                            text-align: left;
                            font-size: 21px;
                        }
                        .sliding-menu__panel {
                            position: absolute;
                            top: 0;
                            left: 100%;
                            width: 100%;
                        }
                        .sliding-menu li {
                            padding: 0;
                            margin: 0;
                            list-style: none;
                        }
                        .sliding-menu li a,
                        .sliding-menu li .sliding-menu__nav {
                            display: block;
                            padding: .8em 1em;
                            text-align: left;
                            font-size: 21px;
                            line-height: 1.4em;
                            color: #333;
                            text-decoration: none;
                            border-width: 0;
                            width: 100%;
                            background-color: transparent;
                            -webkit-transition: color 250ms ease, background-color 250ms ease;
                               -moz-transition: color 250ms ease, background-color 250ms ease;
                                 -o-transition: color 250ms ease, background-color 250ms ease;
                                    transition: color 250ms ease, background-color 250ms ease;
                        }
                        .sliding-menu li a:hover,
                        .sliding-menu li .sliding-menu__nav:hover {
                            color: #fff;
                            background-color: #333;
                        }
                        .sliding-menu .active a {
                            color: #fff;
                            background-color: #333;
                        }
                        .sliding-menu .sliding-menu__nav:before {
                            float: right;
                            margin-left: 1em;
                            content: "\3009";
                        }
                        .sliding-menu .sliding-menu__back {
                            color: #fff;
                            background-color: #555;
                            font-weight: bold;
                        }
                        .sliding-menu .sliding-menu__back:before {
                            float: left;
                            margin-right: 1em;
                            content: "\3008";
                        }
                        .sliding-menu .sliding-menu__icon {
                            margin-right: .4em;
                        }
                        .sliding-menu .sliding-menu__separator {
                            margin: .4em 1em;
                            border-top: 2px solid #555;
                        }
                    

Example HTML

Javascript


                    

HTML


                

Example HTML with Icons

Javascript


                    

HTML


                

Example JSON

Javascript


                    

HTML