javascriptjqueryhtmlcssposition

How do I make my side menu push other elements on toggle?

I am having trouble making the side menu push other elements out of the way (by the same width of the side menu) on toggle of the side menu. I want the side menu to push the adjacent elements out of the way as it slides in. Thank you so much, here is my code.

$(document).ready(function() {

    $("#hamburger").click(function() {
        $("header nav").animate({width: 'toggle'});
    });
    $("header nav").mouseleave(function() {
        $("header nav").animate({width: 'toggle'});
    });
});
/* Universal Styles */

* {
    box-sizing: border-box;
}
body {
    text-align: center;
}
a {
    text-decoration: none;
    color: inherit;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

/* Cross Styles */

aside,
.navBlock {
    font-family: 'Bungee Inline', cursive;
}

/* Header Styles */

.logo {
    width: 150px; 
    cursor: pointer;
    transition: all .2s;
    float: left;
    margin-bottom: 10px;
}
nav,
header{
    overflow: auto;
    width: 100%;
}

#hamburger {
    float: right;
    transition: all .2s;
    cursor: pointer;
}
/* Navigation Styles */

    header nav {
        position: absolute;
        width: 50%;
        top: 0;
        height: 100%;
        background-color: #354551;
        margin: 0;
        box-shadow: inset 0px 0px 12px 2px rgba(0,0,0,0.75);
        display: none;
        z-index: 100;
    }
    .navBlock {
        background-color: #354551;
        text-transform: uppercase;
        font-size: 2em;
        color: white;
        letter-spacing: 3px;
        border: none;
        cursor: pointer;
        line-height: 175%;
        transition: all .2s;
    }
    header nav ul {
        box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
        margin-top: 50%;
        border-top: 1px dashed lightgrey;
        border-bottom: 1px dashed lightgrey;
    }

/* Profiles Styles */

aside ul,
aside li,
aside {
    overflow: auto;
}
aside {
    background-color: #90afc5;
    box-shadow: inset 0px 20px 9px -22px #000;
    color: #eef3f6;
    font-size: 1.5em;
    letter-spacing: 2px;
    text-shadow: 0px 1px 1px #4d4d4d;
    width: 100%;
}
aside li {
    display: inline;
}
aside img {
    border-radius: 100%;
    transition: all .2s;
}

/* Footer Styles */

footer {
    font-family: 'Oswald', cursive;
    letter-spacing: 1px;
    font-size: .9em;
    height: 25px;
    background-color: #abc3d3;
    color: #2c4354;
}
footer span {
    line-height: 25px;
}

/* Showcase */

main h4 {
    margin-top: 30px;
    color: white;
    font-size: 2em;
    letter-spacing: 2px;
    text-shadow: 0px 1px 1px #4d4d4d;
    font-family: 'Bungee Inline', cursive;
    border: 10x dashed lightgray;
    box-shadow: 0px -20px 9px -22px #000;
}
.webShowcase img,
.logoShowcase img {
    width: 80%;
    margin: 50px auto;
    transition: all .3s;
    border: 1px solid lightgrey;
}
.webShowcase h4 {
    background-color: #ffbb00;
    margin: 0;
}
.webShowcase ul,
.logoShowcase ul {
    margin-top: 30px;
    text-align: center;
}
.webShowcase ul,
.webShowcase li,
.webShowcase,
.logoShowcase,
.logoShowcase li,
.logoShowcase ul {
    overflow: auto;
}
.webShowcase,
.logoShowcase {
    width: 100%;
}
.logoShowcase h4 {
    background-color: #aebd38;
    margin: 0;
}

/* Effects */

aside img:hover,
.logo:hover,
.navBlock:hover,
#hamburger:hover,
main img:hover {
    opacity: .5;
}

/* Tablet View */

@media only screen and (min-width: 767px) {
    aside ul {
        margin-bottom: 10px;
    }
}
/* Computer View */

@media only screen and (min-width: 1200px) {
    .logo {
        width: 250px;
    }
    #hamburger {
        content: url("../media/img/hamburgerResized.png");
    }
    header nav {
        width: 25%;
    }
    .webShowcase img,
    .logoShowcase img {
        width: 30%;
        display: inline-block;
    }
    .webShowcase li,
    .webShowcase,
    .webShowcase ul,
    .logoShowcase,
    .logoShowcase li,
    .logoShowcase ul {
        overflow: auto;
    }
    .webShowcase li,
    .logoShowcase li {
        display: inline;
        margin: 0 10px;
        padding: 0;
    }
    .webShowcase ul,
    .logoShowcase ul {
        margin: 0;
        padding: 0;
    }
    .webShowcase ul:nth-child(odd) {
        background-color: #ffcf4d;
    }
    .webShowcase ul:nth-child(even) {
        background-color: white;
    }
    .logoShowcase ul:nth-child(odd) {
        background-color: #c3d062;
    }
    .logoShowcase ul:nth-child(even) {
        background-color: white;
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Name | Portfolio</title>
        <link href='https://fonts.googleapis.com/css?family=Sigmar+One|Seymour+One|Monofett|Faster+One|Rye|Eczar|Bungee+Inline|Miltonian+Tattoo|Oswald' rel='stylesheet' type='text/css'>
        <link href="../../css/normalize.css" rel="stylesheet" type="text/css">
        <link href="../../css/main.css" rel="stylesheet" type="text/css">
        <meta content="index, follow" name="robots">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta charset="utf-8">
        <meta content="An awesome portfolio. Nuff said." name="Description">
        <meta content="portfolio, freelance, freelancer, web design, web development, name, firstname pw" name="Keywords">
    </head>
    <body>
        <header>
            <a href="../../index.html"><img class="logo" src="../../media/img/logo.png" alt="name's logo"></a>
            <img id="hamburger" src="../../media/img/hamburger.png" alt="three line navigation">
            <nav>
                <ul>
                    <li class="navBlock navHome"><a href="../../index.html">home</a></li>
                    <li class="navBlock navAbout"><a href="../pages/about/index.html">about</a></li>
                    <li class="navBlock navContact"><a href="../pages/contact/index.html">contact</a></li>
                    <li class="navBlock navResume"><a href="../pages/resume/index.html">resume</a></li>
                </ul>
            </nav>

            <main>
                <section class="webShowcase">
                    <h4>Websites</h4>
                    <ul>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                    </ul>
                    <ul>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                    </ul>
                    <ul>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                    </ul>
                </section>
                <section class="logoShowcase">
                    <h4>Logos</h4>
                    <ul>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                    </ul>
                    <ul>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                    </ul>
                    <ul>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                        <li><a href=""><img src="../../media/img/web-showcase01.png"></a></li>
                    </ul>
                </section>
            </main>

            <aside>
                <h4>Check me out on─</h4
                <ul>
                    <li><a href="#"><img class="profiles"  src="../../media/img/github.png" alt="Name's GitHub profile link"></a></li>
                    </div>
                    <li><a href="#"><img class="profiles"  src="../../media/img/codepen.png" alt="Name's CodePen profile link"></a></li>
                    </div>
                    <li><a href="#"><img class="profiles" src="../../media/img/linkedin.png" alt="Name's LinkedIn profile link"></a></li>
                    </div>
                    <li><a href="#"><img class="profiles" src="../../media/img/dribble.png" alt="Name's Dribble profile link"></a></li>
                    </div>
                    <li><a href="#"><img class="profiles" src="../../media/img/upwork.png" alt="Name's Upwork profile link"></a></li>
                    </div>
                    <li><a href="#"><img class="profiles" src="../../media/img/fiverr.png" alt="Name's Elance profile link"></a></li>
                    </div>
                </ul>
                </div>
            </aside>
        </header>
        <footer>
            <span>&copy;Name</span>
        </footer>
    <script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
    <script src="../../js/main.js"></script>
    </body>
</html>

Solution

  • Add this JQuery:

    $(document).ready(function() {
 $("#hamburger").click(function() {
 $(".fixed").toggleClass('show');
 $('main').toggleClass('fixed-active');
 $('header').toggleClass('fixed-active');
 });
});

    This CSS:

    .fixed {
 position: fixed;
 width: 300px;
 top: 0;
 left: 0;
 height: 100%;
 background-color: #354551;
 margin: 0;
 box-shadow: inset 0px 0px 12px 2px rgba(0,0,0,0.75);
 z-index: 100;
 left: -100%;
 transition: all .3s ease-in;
}
.fixed.show{
  left:0;
}
main, header {
  transition: all .3s ease-in;
}
main.fixed-active, header.fixed-active {
 padding-left: 300px;
 position: relative;
}

    Look at the fiddle
    Hope this helps!