slide menu pushes away another div! - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts

February 5, 2014 at 6:15 pm #161995

Participant

Hello everyone,

while i was working on my personal website I came accros the following problem. I want to use a slide in navigation. But when i push on the link to let this navigation slide in my content area gets pushed away. And i could not get the problem on my own.

did i make some beginners mistake? here is the code:

   <!DOCTYPE html>
    <html>
        <head>
            <title>Template 02 | Jens de Koning</title>
            <link rel="stylesheet" href="style.css" />
            <link rel="stylesheet" href="jquery/sidr/stylesheets/jquery.sidr.dark.css" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
            <script src="jquery/sidr/jquery.sidr.min.js"></script>

        </head>
        <body>
            <div id="header">
            </div>
                <div id="sidr">
                    <a id="right-menu" href="#right-menu">Navigation</a>


                      <ul>
                        <li><a href="#">Home/blog</a></li>
                        <li class="active"><a href="#">Over</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Overige</a></li>
                      </ul>




                        <!-- SCRIPT FOR THE NAVIGATION --!>
                        <script>
                        $(document).ready(function() {
                            $('#right-menu').sidr({
                              name: 'sidr-right',
                              side: 'right'
                            });
                        });
                        </script>
                </div>
            <div id="wrapper">

                <div id="content">

                </div>          
            </div>
            <!-- THE SCRIPT FOR THE STRETCHED BACKGROUNB --!>
            <script>$.backstretch("images/bg_stretch.jpg");</script>
        </body>
    </html>


And the css:

`/*

Name author: Jens de Koning Website: http://www.jensdekoning.net Version: 0.1 Information: First time working with Jquery plugins and a full screen background

*/ p { color: black; font-family: 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif; }

wrapper {

    width: 60%;


}

content {

    width: 100%;
    height: 300px;
    background-color: #7c7676;
    opacity: 0.9;
    overflow-y: scroll;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px 10px 10px 10px;


}

sidr {

}`

Thanks in advance!!

February 6, 2014 at 3:14 am #162008