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

Frage Menübutton erscheint nicht bei Mobiler ansicht

G

Gabriel Kumar

Neues Mitglied
Hi,
ich habe mir eine One-Page-Website programmiert. Auch Responsiv für Mobiltelefone und Tablets gemacht. Bei einer bestimmten Pixelgröße soll die Navigationsleiste verschwinden und ein Button angezeigt werden. Eigentlich müsste meine Programmierung (auch mit einem kleinem JS) funktionieren. Jedoch tut es das nicht und ich finde den Fehler nicht. :-(
Könnt ihr hier mal drüberschauen und mir helfen? Wäre mir eine große Hilfe! Danke.

HTML:
HTML: 
<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
       
    <title>Gabriel Kumar | Wilkommen</title>
   
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
       
    <link rel="stylesheet" type="text/css" href="css/fontawesome-all.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
       
    <link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

    </head>
   
    <body>
       
    <!-- HEADER ---->
      
        <header>
            <div id="logo">
                <a href="#">
                    <img src="images/logo.png" alt="Logo">
                </a>
            </div>
           
            <nav id="main-nav">
               
                <i class="fas fa-bars"></i>
               
                <ul>
                    <a href="#home"><li>Home</li></a>
                    <a href="#about"><li>Über</li></a>
                    <a href="#it"><li>IT</li></a>
                    <a href="#grafikdesign"><li>Grafikdesign</li></a>
                    <a href="#more"><li>More</li></a>
                    <a href="#kontakt"><li>Kontakt</li></a>
                   
                </ul>
            </nav>
            </header>

    <!-- HOME ---->
       
        <section id="home">
            <hr>
            <h1>Gabriel Kumar</h1>
            <h2>IT, Grafikdesign &amp; More</h2>
           
            <a href="#about">
                <img src="images/pfeil.png" alt="Pfeil">
            </a>
        </section>
       
    <!-- ABOUT ----------->
       
        <section id="about">
        <h3>Über</h3>
        <hr>
        <img src="images/avatar.png" alt="Avatar">
        <h4>Gabriel Kumar</h4>
            <p>blalblabla</p>
        </section>

    <!-- IT --------------->
       
        <section id="it">
        <h3>IT</h3>
        <hr>
           
            <div id="projects">
                <ul>
                    <li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
                    <li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
                    <li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
                    <li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
                    <li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
                    <li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
                </ul>
            </div>
        </section>

    <!-- GRAFIKDESIGN ------------->
       
        <section id="grafikdesign">
        <h3>Grafikdesign</h3>
        <hr>
        <p>blablabla</p>
        </section>
       
    <!-- MORE ------------------->
       
        <section id="more">
        <h3>More</h3>
        <hr>
        <p>blablabla</p>
        </section>
   
    <!-- KONTAKT -------------->
       
        <section id="kontakt">
            <h3>Kontakt</h3>
            <hr>
           
            <form>
                <input type="email" tabindex="1" placeholder="E-Mail"><br>
                <input type="text" tabindex="2" placeholder="Betreff"><br>
                <textarea tabindex="3" placeholder="Nachricht"></textarea><br>
                <input class="button" type="submit">
            </form>
        </section>

    <!-- FOOTER --------->
       
        <footer>
            <p>
                &copy; 2018 Gabriel Kumar &nbsp; &nbsp; &nbsp; | &nbsp; &nbsp; &nbsp; Made with &#9829; by Gabriel Kumar
            </p>
        </footer>
       
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script src="js/mobile-menu.js"></script>

    </body>
</html>
CSS:

Code: 
html, body {margin: 0; padding: 0; height: 100%; text-align: center;}
section {min-height: 100%}
a {text-decoration: none}
li {list-style-type: none;}

h1, h2, h3, a {font-family: 'Roboto', sans-serif; font-weight: 500; color: #494949; text-transform: uppercase;}
h2 {color: #5d7177;}
h3 {font-size: 40px; padding-top: 8%; margin-bottom: 5px;}
h4, p {font-family: 'Roboto Slab', serif; color: #494949;}

hr {width: 30px; height: 3px; background: #494949; border: 0; margin: 0 auto 40px auto;}
#logo, li, img, .button, .fa-bars {transition: all 300ms; -webkit-transistation: all 300ms; -moz-transition: all 300ms; -o-transistation: all 300ms;}
.fa-bars {display: none;}

/* HEADER *************/
header {
    width: 100%;
    height: 65px;
    position: fixed;
    top: 0;
    left: 0;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 1;
}
#logo {
    width: 140px;
    float: left;
    margin: 10px 0 0 50px;
}
#logo:hover {
    opacity: 0.5;
}
#logo img {
    width: 100%;
}
header nav {
    float: right;
    margin: 10px 50px 0 0;
}
header nav ul li {
    float: left;
    margin-left: 25px;
}
header nav ul li a {
    font-size: 16px;
}
header nav ul li:hover {
    padding-top: 5px;
}
/* HOME ***********/


/*x
x
x
x
[Hier steht noch mehr aber sonst würde das Limit hier überschritten werden]
x
x
x
x*/

/* MEDIA QUERIES ******/
/* TABLETS ***********/
@media screen and (max-width: 1024px) {
    header {
        height: auto;
    }
    #logo {
        width: 100px;
        margin-top: 5px;
    }
    header nav {
        margin-top: 0;
    }
    header nav ul li {
        font-size: 12px;
    }
    #home h1 {
        font-size: 90px;
        margin-top: 200px;
    }
    #home h2 {
        font-size: 22px;
    }
    h3 {
        padding-top: 12%;
    }   
    p {
        width: 80%
   }
    #projects {
        width: auto;
    }
    #projects ul li {
        width: 100%;
        float: none;
    }
    #projects ul li:last-child {
        padding-bottom: 20%;
    }
    #projects img {
        width: 55%;
        height: auto;
    }
    form input, form textarea {
        width: 60%;      
    }
    .button {
        width: 62%;
    }
}
/* MOBILES ********/
@media screen and (max-width: 480px) {
    #logo {
        width: 90px;
        margin-left: 30px;
    }
    header nav {
        margin: 0;
        float: none;
    }
    .fa-bars {
        font-size: 17px;
        display: inline-block;
        width: 100%;
        cursor: pointer;
        text-align: right;
        float: right;
        margin: -25px 30px 0 0;
        color: white;
    }
    .fa-bars:hover {
        opacity: 0.5;
    }
    header nav ul {
        height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    header nav ul.open {
        height: auto;
    }
    header nav ul li {
        width: 100%;
        padding: 5px 0;
        margin: 0;
        font-size: 11px;
        border-top: 1px solid #dddddd;
    }
    header nav ul li:hover {
        background-color: #eeeeee;
    }
    #home h1 {
        font-size: 60px;
        margin-top: 200px;
    }
    #home h2 {
        width: 70%;
        height: auto;
    }
    #projects img {
        width: 70%;
        height: auto;
    }
    form input, form textarea {
        width: 70%;
    }
    .button {
        width: 72%;
    }
}

JavaScript:
Code: 
$(document).ready(funktion() {
    $(".fa-bars").on("click", funktion() {
        $("header nav ul").toggleClass("open");
     };
};
 
dein Javascript ist etwas daneben.
Versuche das mal so
Code: 
$(document).ready(function(){
    $(".fa-bars").click(function() {
        $("header nav ul").toggleClass("open");
     });
});

Ungetestet weil kann gerade nicht testen
 
basti1012 schrieb:
dein Javascript ist etwas daneben.
Versuche das mal so
Code: 
$(document).ready(function(){
    $(".fa-bars").click(function() {
        $("header nav ul").toggleClass("open");
     });
});

Ungetestet weil kann gerade nicht testen
Zum Vergrößern anklicken....

Danke für deine Antwort! Jedoch funktioniert es immer noch nicht, vielleicht ist in CSS ganz unten ein Fehler
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben