Ausklappbare Navigation funktioniert nicht...

Sundream

Hey,

ich bin grade am erstellen einer Website und habe Probleme mit dem responsiven Design und zwar mit der Navigation.
Das ist mein HTML Code:

HTML

<head>
    <title>Zimmerei Kohlhepp</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript">
    $(document).ready(function(){
        $('.menubutton').click(function() {
            $('nav').slideToggle('slow');
    });
    });
    </script>
<meta charset="UTF-8">
</head>


<body>
<div class="oben">
    <section id="menubar">
        <ul>
            <li>
                <a class="menubutton" href="#menu">
                <img src="Bilder/hamburger.png">
                </a>
            </li>


        </ul>


    </section>


    <header>
        <img src="Bilder/Logo.jpg">
        <h1>Zimmerei Kohlhepp</h1>
    </header>


    <nav class="nav">
        <ul>
            <li> 
                <a href="Index.html" class="active">Start</a>
                <a href="Ueber_uns.html" >Über uns</a>
                <a href="Leistungen.html" >Leistungen</a>
                <a href="Kontakt.html" >Kontakt</a>
            </li>
        </ul>
    </nav>


</div>






    <section id="main">


    <div class="braun">




    


        
                <h2>Herzlich Willkommen!</h2><section id= "banner">    
        <img class="Banner" src="Bilder/Banner.jpg">
    </section>


    <article>

                <img src="Bilder/Bild1.jpg"/>
        <div class="Schrift">
                <p > Starke Leistungen brauchen ein starkes Team! </p>
                <p>Vom Dachstuhl bis zum kompletten Haus können wir Ihnen alles im Bereich Holzbau bieten!</p>
                <p>Kontaktieren Sie uns und wir setzen Ihre Wünsche um!</p>
                <p>Wir freuen uns auf Sie! </p>




                


            </div>
        </article>


        <footer>
            <ul>
                <li><a href="Impressum.html" >Impressum</a></li>
            </ul>
        </footer>




    </section>


    </div>


        






</body>


</html>

Alles anzeigen

und das mein CSS dazu:

Code

/*General Style*/




html { background: url(Bilder/Hintergrund.gif) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }


body{font-size: 100%;
        margin: 0em;
        padding: 0em;
    }


.braun {background: rgb(243,218,170);
        margin:auto;
        border-radius: 30px;
        max-width: 1200px;
        margin-top: 2em;
        margin-bottom: 5em; 
        padding-bottom: 2em;}


.oben {background: white;

        width: 100%;

        }


h1 {font-size: 2.75em;
line-height: 1.8em;
font-family: Lobster;
font-weight: 100;
margin: 0em;


display: inline-block;
}


h2 {font-size: 2em;
    line-height: 1.8em;
    font-family: Yanone Kaffeesatz;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0em;
    padding: 0em;
    padding-top: 0.5em;
    padding-left:1em;
    text-align: left;}


p {    
    text-align: center;
    font-size:1.5em;
    font-family: Yanone Kaffeesatz;
    font-weight: normal;
    text-align: left;
    display: inline-block;
    padding-left: 2.0em;
    padding-top: 0em;
}








ul {
    margin:0px;
    padding: 0px;
}


li {list-style: square;
    line-height: 1.25em;
    font-family: Yanone Kaffeesatz;
    font-weight: normal;
    margin: 0.313em 0em 0.313em 0em;
    padding: 0em;
    text-align: justify;}


img {
    width:60%;
    height: auto;
    max-width: 100%;
}


a {text-decoration: none;}


/* On top Bar */


#menubar{
    display: block;
    background: white;
}


#menubar ul {
    display: block;
    width:2em;
    padding: 0em;
    padding-top:0.9em;
}


#menubar ul li {
    display: inline;
    line-height: 0.1em;
}


#menubar ul li a.menubutton {
    display: none;
}


#menubar ul li a img {width:100%;
padding-left: 2em;}






/*header*/




header {
    display: inline-block;
    background: white;
    padding-left: 6em;
    max-width: 40%;

}


header img {max-width: 8%;
            height: auto;
            padding-right: 1em;


        }


/* Navigation */


nav {
    display:block;
    background: white;
    text-align:center;


}


nav ul {
    display: block;
}


nav ul li {
    display: inline;
    margin: 0em 0.188em 0em 0.188em;
}


nav ul li a {
    color: black;
    font-size:1.5em;
    line-height: 2.5em;
    padding: 0.563em 0.938em 0.375em 0.983em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
}


nav ul li a:hover { background: rgb(136,114,103);
                    border-bottom: 0.188em solid #3e322d; 
}


nav ul li a.active {border-bottom: 0.188em solid #3e322d;


}


/*Conten´t Area */


#main {
    display: block;
    width:96%;
    max-width: 1200px;
    margin: 0em auto;
    padding:0em;
}


#main article { display: inline-block;
        width: 100%;
        vertical-align: top;
        margin:0em;
        padding: 0em;
        }


#main article img {
    max-width: 400px;
    margin-top: 2em;
    border: 5px solid rgb(75,69,53);
    display: inline-block;
    text-align: center;
    margin-left: 2em;
}


.Schrift {display: inline-block;
            position: relative;
            max-width: 600px;
            padding-top: -10em;
            }




#banner {
display: block;
    width:100%;
    max-width: 1200px;
    margin: 0em auto;
    padding:0em;


}


#banner img {
    max-width: 1200px;
    width: 100%;
}


/* footer */


footer {
    display: block;
    text-align: right;
margin-top: 1em;
margin-bottom: -0.5em;
}


footer ul li { text-align: right;
                padding-right: 3em;
                list-style-type: none;


                }
footer ul li a { color: black;
padding: 0.2em;
border: 3px solid rgb(75,69,53);}


/* Mobile Ansicht */


@media screen and (max-width: 800px){
body { font-size: 90%;


}
}
@media screen and (max-width: 600px){
    #main article {
        width:100%;        
        display: block;
        margin: 0.625em 0em 0.625em 0em; }


    #main article img {
        margin-left: 1.3em;
        width: 220px;
    }


    .Schrift p {
            text-align: center;

            max-width: 250px;}
    .Schrift {margin-left: -1.9em;}


}




@media screen and (max-width: 550px) {
    nav.nav {display: block !important ;}


    body{font-size: 86%;}
    #menubar ul li a.menubutton {
        display: block;
    }


    nav { display: none;
        height: auto;}


nav ul li {display: block;
        margin: 0.3em 0em 0.3em 0em}
}

Alles anzeigen

Ich würde mich extrem freuen, wenn mir irgendjemand helfen kann !

Danke schonmal!

Ganz Liebe Grüße

Sundream

puste

Was ist denn genau dein Problem ? Was willst du mit der Navigation machen?

Sundream

Ich möchte gerne, dass die Navigation in der Mobilen Ansicht, also auf dem Handy, zu einer sich ausklappenden Navigation wird, wenn man auf das Hamburger Icon oben links klickt... Aber wenn man drauf klickt passiert nichts...

Tags