Ergebnis 1 bis 2 von 2

Thema: Navigation mit CSS und jquery/ js funktioniert nicht!!!

  1. #1
    Neuer Benutzer
    Registriert seit
    12.07.2014
    Beiträge
    2

    Navigation mit CSS und jquery/ js funktioniert nicht!!!

    https://www.youtube.com/watch?v=nQK0kz65wpo

    HTML-Code:
    Hallo, ich habe das  Beispiel -aus dem Video 1 zu 1 übernommen, css wird genau so dargestellt wie im Video, irgend etwas stimmt da mit dem script nicht, die Navigation bleibt in der mobilen Ansicht (über iphone) aufgeklappt, könnte mir da jemand weiter helfen, ich hab von js keine Ahnung.
    
    
    Bin für jede Hilfe Dankbar!!!
    
    ---------------------------------------HTML--------------------------------------------------
    
    <!doctype html>
    <html>
    
    <head>
    <meta charset="utf-8">
    <title>Navigation</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0;" /> 
    <link rel="stylesheet" type="text/css" href="css/desktop.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!--hab aktuellen script eingebunden-->
    
    
    </head>
    
    <body>
    <header>
    <h1>Navigation</h1>
    </header>
    
    <nav>
    <div class="handle">Menu</div>
    <ul class="showing">
    <li>Startseite</li>
    <li><a href="ueberuns.html">ÜberUns</a></li>
    <li><a href="aktuell.html">Aktuell</a></li>
    <li><a href="sonstiges.html">Sonstiges</a></li>
    <li><a href="praesentation.html">Präsentation</a></li>
    <li><a href="fotogalerie.html">FotoGalerie</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
    
    </nav>
    
    <section>
    
    <h2>WIllkommen</h2>
    <p>hallo, seit herzlich willkommen!
    Die Seite befindet sich momentan im Aufbau, wir bitten sie um Verständniss! </p>
    
    </section>
    
    
    <script>	 <!--hab dieses script 1 zu 1 übernommen,jedoch keine reaktion,was ist falsch-->
    $('.handle').on('click', function(){
    $('nav ul').toggleClass('.showing');
    });
    </script>
    
    </body>
    
    </html>
    Code:
    /*css*/
    body {
    background-image: linear-gradient(#CCC, #666, #999, #FFF);
    margin: 0;
    paddin: 0;
    font-family: Verdana, Geneva, sans-serif;	
    }
    
    /*header*/
    header {
    background: #00795f;
    width:100%;
    padding: 40px 0;
    color: #FFF;
    text-align: center;	
    }
    
    /*nav*/
    a{
    text-decoration: none;
    color: inherit;	
    }
    
    nav ul {
    background-color: #43a286;
    overflow: hidden;	
    color: #FFF;
    padding: 0;
    margin: 0;
    text-align: center;
    
    -webkit-transition: max-height 0.4s;
    -ms-transition: max-height 0.4s;
    -moz-: max-height 0.4s;
    -o-transition: max-height 0.4s;
    transition: max-height 0.4s;
    }
    
    nav ul li {
    display: inline-block;
    padding: 20px;
    }
    
    nav ul li:hover {
    background-color: #399077;
    }
    
    .handle {
    background-color: #005c48;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    padding: 15px 10px; 
    cursor: pointer;
    color: #FFF;
    display: none;
    }
    
    /*section*/
    
    section {
    line-height: 1.5em;	
    font-size: 0.9em;
    padding: 40px;
    margin: 0 auto;
    width: 75%;
    }
    
    @media screen and (max-width: 580px) {
    /*header*/
    
    /*nav*/
    nav ul {
    max-height: 0px;
    }
    .showing {
    max-height: 40em;
    }
    
    nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    text-align: left;
    }	
    
    .handle {
    display: block;
    }
    
    
    }

  2. #2
    Neuer Benutzer
    Registriert seit
    12.07.2014
    Beiträge
    2
    Danke, hat sich erledigt ich musste nur http:// im Script einfügen.

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •