0

I want to make a sliding menu using solely CSS. The menu will reveal a list of items and a close button inside it. I currently have an anchor tag on my homepage that is styled correctly, but it does not do anything when clicked.

HTML:

<body class="homepage body-push">

    <!-- Menu -->
<nav class="menu" id="theMenu">
    <div class="menu-wrap">
        <h1 class="logo"><a href="#home">Focus</a></h1>
        <i class="icon-remove menu-close"></i>
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#process">Process</a>
        <a href="#portfolio">Portfolio</a>
        <a href="#about-us">About</a>
        <a href="#contact">Contact</a>
        <a href="#"><i class="icon-facebook"></i></a>
        <a href="#"><i class="icon-twitter"></i></a>
        <a href="#"><i class="icon-dribbble"></i></a>
        <a href="#"><i class="icon-envelope"></i></a>
    </div>

    <!-- Menu button -->
    <div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
</body>

CSS:

.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;

}
.menu.menu-open {
    right: 0px;
}

.menu-wrap {
    position: absolute;
    top: 0;
    left: 60px;
    background: #1a1a1a;
    width: 200px;
    height: 100%;
}

.menu a {
    margin-left: 20px;
    color: #808080;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.menu a:hover {
    color: #ffffff;
}

.menu a:active {
    color: #ffffff;
}

.menu a > i {
    float: left;
    display: inline-block;
    vertical-align: middle; 
    text-align: left;
    width: 25px;
    font-size: 14px;
    line-height: 40px;
    margin: 25px 2px;
}

.menu-close {
    cursor: pointer;
    display: block;
    position: absolute;
    font-size: 14px;
    color: #808080;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 20px;
    right: 5px;
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

.menu-close:hover {
    color: #ffffff;
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

/* Push the body after clicking the menu button */
.body-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.body-push-toright {
    left: 200px;
}

.body-push-toleft {
    left: -200px;
}

.menu,
.body-push {
    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
}

#menuToggle {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 11;
    display: block;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    background: rgba(0,0,0,0.25);
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

#menuToggle:hover {
    color: #ffffff;
    background: rgba(0,0,0,0.2);
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

UPDATE: I finally found a way to get it working.

HTML:

<!-- Menu -->
    <nav class="menu" id="theMenu">
        <div class="menu-wrap">
            <h1 class="logo"><a href="#">Menu</a></h1>
            <i class="icon-remove menu-close"></i>
            <a href="#home">Home</a>
            <a href="#services">Services</a>
            <a href="#process">Process</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#about-us">About</a>
            <a href="#contact">Contact</a>
            <a href="www.facebook.com"><i class="icon-facebook"></i></a>
            <a href="www.twitter.com"><i class="icon-twitter"></i></a>
            <a href="www.dribbble.com"><i class="icon-dribbble"></i></a>
            <a href="mailto:[email protected]"><i class="icon-envelope"></i></a>
        </div>

        <!-- Menu button -->
        <div id="menuToggle"><i class="icon-reorder"></i></div>
    </nav>

CSS:

.menu {
    position: fixed;
    right: -200px;
    width: 260px;
    height: 100%;
    top: 0;
    z-index: 10;
    text-align: left;
}

.menu.menu-open {
    right: 0px;
}

.menu-wrap {
    position: absolute;
    top: 0;
    left: 60px;
    background: #1a1a1a;
    width: 200px;
    height: 100%;
}

.menu h1.logo a {
    font-family: 'Raleway', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 40px;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: 20px;
}

.menu h1.logo a:hover {
    color: #f85c37;
}

.menu img.logo {
    margin: 20px 0;
    max-width: 160px;
}

.menu a {
    margin-left: 20px;
    color: #808080;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.menu a:hover {
    color: #ffffff;
}

.menu a:active {
    color: #ffffff;
}

.menu a > i {
    float: left;
    display: inline-block;
    vertical-align: middle; 
    text-align: left;
    width: 25px;
    font-size: 14px;
    line-height: 40px;
    margin: 25px 2px;
}

.menu-close {
    cursor: pointer;
    display: block;
    position: absolute;
    font-size: 14px;
    color: #808080;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 20px;
    right: 5px;
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

.menu-close:hover {
    color: #ffffff;
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

/* Push the body after clicking the menu button */
.body-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.body-push-toright {
    left: 200px;
}

.body-push-toleft {
    left: -200px;
}

.menu,
.body-push {
    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
}

#menuToggle {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 11;
    display: block;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    background: rgba(0,0,0,0.25);
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

#menuToggle:hover {
    color: #ffffff;
    background: rgba(0,0,0,0.2);
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

Javascript:

    // Menu settings
    $('#menuToggle, .menu-close').on('click', function(){
        $('#menuToggle').toggleClass('active');
        $('body').toggleClass('body-push-toleft');
        $('#theMenu').toggleClass('menu-open');
    });

    // Scrollable menu on small devices
    $(window).bind("load resize", function(){
        if($(window).height() < 400){
            $(".menu").css("overflow-y","scroll");
        }
        else {
            $(".menu").css("overflow-y","hidden");
        }
    });

1 Answer 1

1

I would recommend reading this: http://www.sitepoint.com/css3-sliding-menu/

If the article is TL;DR then use

/* Revealing 3D Menu CSS */
body
{
    font-family: sans-serif;
    font-size: 100%;
    padding: 0;
    margin: 0;
    color: #333;
    background-color: #221;
}

/* main page */
article
{
    position: fixed;
    width: 70%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 30px 15%;
    background-color: #fff;
    overflow: auto;
    z-index: 0;
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
}


article:after
{
    position: absolute;
    content: ' ';
    left: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    pointer-events: none;
}

/* navigation */
nav
{
    position: fixed;
    left: -16em;
    top: 0;
    bottom: 0;
    background-color: #654;
    border-right: 50px solid #765;
    box-shadow: 4px 0 5px rgba(0,0,0,0.2);
    z-index: 1;
    cursor: pointer;
}

nav:after
{
    position: absolute;
    content: ' ';
    width: 0;
    height: 0;
    right: -70px;
    top: 50%;
    border-width: 15px 10px;
    border-style: solid;
    border-color: transparent transparent transparent #765;
}

nav ul
{
    width: 14em;
    list-style-type: none;
    margin: 0;
    padding: 1em;
}

nav a:link, nav a:visited
{
    display: block;
    width: 100%;
    font-weight: bold;
    line-height: 2.5em;
    text-indent: 10px;
    text-decoration: none;
    color: #ffc;
    border-radius: 4px;
    outline: 0 none;
}

nav a:hover, nav a:focus
{
    color: #fff;
    background-color: #543;
    text-shadow: 0 0 4px #fff;
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}

/* hovering */
article, article:after, nav, nav *
{
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

nav:hover
{
    left: 0;
}

nav:hover ~ article
{
    -webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
    -moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
    -ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
    -o-transform: translateX(16em) perspective(600px) rotateY(10deg);
    transform: translateX(16em) perspective(600px) rotateY(10deg);
}

nav:hover ~ article:after
{
    left: 60%;
}

This can be used to create a 3d sliding menu as seen here

4
  • I'm looking more for the menu used on sites such as squarespace.com Sep 29, 2013 at 5:51
  • IDK, maybe you could edit the CSS I provided so it doesn't travel on the Z axis and then just add it then. That'd be a bit cool, adding a menu on the side when you hover over it. But that's just my opinion.
    – Domecraft
    Sep 29, 2013 at 6:00
  • Interesting.. I'll look at what I can do. Sep 29, 2013 at 6:01
  • Yes, I was, I am going to update the OP now, in case anyone else wants to know. Sep 29, 2013 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.