• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Menübar über Button funktioniert nach einklappen nicht mehr

Gabriel Kumar

Neues Mitglied
Hey Leute,
ich bin gerade dabei meine Website zu erstellen.
Habe oben in der Navigationsleiste in einer Zeile die Links zu den einzelnen Seiten eingefügt. Das funktioniert alles top. Da ich für meine Website auch für Mobilgeräte optimiert habe, habe ich programmiert, dass bei einer bestimmten Breite, sich die Navigationsleiste einklappt und ein Button erscheint, bei dem, wenn man draufklickt sich die Navigationsleiste in einem Slide-Effekt öffnen sollte. Leider erscheint nur der Button, aber wenn man daurauf klickt, öffnet sich die Leiste leider nicht.

Mein HTML:
HTML:
<!DOCTYPE html>

<html>
    <head>
        <title>G. Kumar | Home</title>
        <meta charset ="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.menubutton').click(function() {
                    $('nav').slideToggle('slow');
                });
        </script>
    
    </head>
    <body>
        <section id="menubar">
            <ul>
                <li><a class="menubutton" href="#menu"><img src="images/menu.png"/></a></li>
            </ul>
        </section>
        <header>
            <h1><img src="images/logo.png" alt="Logo"</h1>
        </header>
        <nav class="nav">
            <ul>
                <li><a href="index.html" class="active">Home</a></li>
                <li><a href="IT.html">IT</a></li>
                <li><a href="Grafikdesign.html">Grafikdesign</a></li>
                <li><a href="More.html">More</a></li>
                <li><a href="Kontakt.html">Kontakt</a></li>
            </ul>
        </nav>
        <section id="main">
            <article>
                <img src="images/headbild.png" alt="BILD"</br>
                            
                
            </article>
            <aside>
                <section>
                    <p><img src="images/Profil Kumar.png" alt="BILD"</p>
                </section>
                <section>
                    <h2>NEWS:</h2>
                    <p>Neue Website!</p>
                </section>
                <section>
                    <h2>Kontakt</h2>
                    
                    <ul>
                        <li><a href="Kontakt.html" class="active">Klicken Sie hier</a></li>
                    </ul>
                    
                
                </section>
        </section>
        <footer>
                <ul>
                    <li><a href="Kontakt.html" class="active">Kontakt</a></li>
                    <li><a href="Datenschutz.html">Datenschutz</a></li>
                    <li><a href="Impressum.html">Impressum</a></li>
                    <li><a>&copy; 2017, Gabriel Kumar</a></li>
                </ul>

        </footer>
    </body>
</html>

Mein CSS
Code:
body {
    background:#DCDCDC;
    font-size:100%;
    margin:0em;
    padding:0em;
}

h1 {
    font-size:1.5em;
    line-height:1.8em;
    font-family:Helvetica;
    font-weight:100;
    color:#7bb94e;
    margin:0em;
}

h2 {
    font-size:1.563em;
    line-height:1.8em;
    font-family:Helvetica;
    font-weight:100;
    color:#2F2D2C;
    margin:0em;
    padding:0.25em;
    text-align:center;
}

p {
    line-height:1.25em;
    font-family:Helvetica;
    font-weight:100;
    color:#2F2D2C;
    margin:0em;
    padding:1.25em;
    text-align:center;
}

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

li {
    list-style:square;
    font-family: Helvetica;
    font-weight:100;
    color:#2F2D2C;
    line-height:1.25em;
    margin:0em;
    padding:0em;
    margin:0.313em 0em 0.313em 0em;
}

img {
    width:90%;
    height: auto;
    max-width:700px;
}

a {
    text-decoration: none;
}

#menubar {
    display:block;
    background:#FFFFFF;
    
}
#menubar ul {
    display:block;
    width:2em;
    padding:0.9em;
}
#menubar ul li {
    display:inline;
}

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

header {
    display: block;
    background:#2F2C2C;
    text-align:center;
}

nav {
    display:block;
    height:2.5em;
    background:#FFFFFF;
    text-align:center;
}

nav ul {
    display:block;
}
nav ul li {
    display: inline;
    margin:0.5em 0.118em 0em 0.188em;
}
nav ul li a:hover {
    background:#DBD9D8;
    border-bottom:0.188em solid #E7590B
}

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

#main article {
    display:inline-block;
    width:64.3%;
    background:#FFFFFF;
    vertical-align: top;
    margin:0em;
    padding:0em;
    text-align:center;
}

#main aside {
    display:inline-block;
    width:30.6%;
    margin-left:3%;
    padding:0em;
    vertical-align:top;
}

#main aside section {
    margin-bottom:1.563em;
    background:#FFFFFF;
    border-bottom: 0.188em solid #E7590B;
}   

#main aside section ul {
    padding:0em 1.875em 1.25em 2.5em;
}

footer {
    display:block;
    background: #2F2C2C;
    text-align:center;
}

footer ul {
    display:block;
    width:100%;
    max-width:980px;
    text-align:left;
    margin:0px auto;
}

footer ul li {
    display:inline;
    font-size:0.8em;
    line-height:2.8em;
    color: #E2DBDB;
    padding:0em 0.625em 0em 0.625em;
}
footer ul li a {
    color: #E2DBDB;
    display:inline;
}

@media screen and (max-width:800px) {
    body {
        font-size:90%;
    }
}
@media screen and (max-width:600px) {   
        #main aside, #main article {
        width:100%;
        display:block;
        margin:0.625em 0em 0.625em 0em;
        }
}
@media screen and (min-width:550px) {
    nav.nav {
        display:block !important;
    }
}
@media screen and (max-width:550px) {
        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;

Hoffe Ihr könnt mir helfen. Danke im Vorraus
 
Werbung:
Zurück
Oben