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

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

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

Gabriel Kumar

Neues Mitglied
16 September 2017
10
0
1
16
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.467
294
83
66
Da fehlen schließende Klammern im jQuery. So ist es richtig:
Code:
    <script type="text/javascript">
            $(document).ready(function() {
                $('.menubutton').click(function() {
                    $('nav').slideToggle('slow');
                });
            });
    </script>
 
Reactions: Gabriel Kumar
Werbung: