Frage Menübutton erscheint nicht bei Mobiler ansicht

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

Gabriel Kumar

Neues Mitglied
16 September 2017
10
0
1
18
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");
     };
};
 

basti1012

Senior HTML'ler
26 November 2017
1.687
177
63
Minden
basti1012.de
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
 
  • Like
Reaktionen: Gabriel Kumar

Gabriel Kumar

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

Danke für deine Antwort! Jedoch funktioniert es immer noch nicht, vielleicht ist in CSS ganz unten ein Fehler
 
Werbung: