Ergebnis 1 bis 3 von 3

Thema: Ausklappbare Navigation funktioniert nicht...

  1. #1
    Azubi(ne)
    Registriert seit
    15.03.2015
    Beiträge
    80
    Danke
    38
    Bekam 0 mal "Danke" in 0 Postings

    Standard Ausklappbare Navigation funktioniert nicht...

    Hey,

    ich bin grade am erstellen einer Website und habe Probleme mit dem responsiven Design und zwar mit der Navigation.
    Das ist mein HTML Code:
    HTML-Code:
    <head>
        <title>Zimmerei Kohlhepp</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script type="text/javascript">
        $(document).ready(function(){
            $('.menubutton').click(function() {
                $('nav').slideToggle('slow');
        });
        });
        </script>
    <meta charset="UTF-8">
    </head>
    
    <body>
    <div class="oben">
        <section id="menubar">
            <ul>
                <li>
                    <a class="menubutton" href="#menu">
                    <img src="Bilder/hamburger.png">
                    </a>
                </li>
    
            </ul>
    
        </section>
    
        <header>
            <img src="Bilder/Logo.jpg">
            <h1>Zimmerei Kohlhepp</h1>
        </header>
    
        <nav class="nav">
            <ul>
                <li> 
                    <a href="Index.html" class="active">Start</a>
                    <a href="Ueber_uns.html" >Über uns</a>
                    <a href="Leistungen.html" >Leistungen</a>
                    <a href="Kontakt.html" >Kontakt</a>
                </li>
            </ul>
        </nav>
    
    </div>
    
    
    
        <section id="main">
    
        <div class="braun">
    
    
        
    
            
                    <h2>Herzlich Willkommen!</h2><section id= "banner">    
            <img class="Banner" src="Bilder/Banner.jpg">
        </section>
    
        <article>
                    
                    <img src="Bilder/Bild1.jpg"/>
            <div class="Schrift">
                    <p > Starke Leistungen brauchen ein starkes Team! </p>
                    <p>Vom Dachstuhl bis zum kompletten Haus können wir Ihnen alles im Bereich Holzbau bieten!</p>
                    <p>Kontaktieren Sie uns und wir setzen Ihre Wünsche um!</p>
                    <p>Wir freuen uns auf Sie! </p>
    
    
                    
    
                </div>
            </article>
    
            <footer>
                <ul>
                    <li><a href="Impressum.html" >Impressum</a></li>
                </ul>
            </footer>
    
    
        </section>
    
        </div>
    
            
    
    
    
    </body>
    
    </html>
    und das mein CSS dazu:

    Code:
    /*General Style*/
    
    
    html { background: url(Bilder/Hintergrund.gif) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            }
    
    body{font-size: 100%;
            margin: 0em;
            padding: 0em;
        }
    
    .braun {background: rgb(243,218,170);
            margin:auto;
            border-radius: 30px;
            max-width: 1200px;
            margin-top: 2em;
            margin-bottom: 5em; 
            padding-bottom: 2em;}
    
    .oben {background: white;
            
            width: 100%;
            
            }
    
    h1 {font-size: 2.75em;
    line-height: 1.8em;
    font-family: Lobster;
    font-weight: 100;
    margin: 0em;
    
    display: inline-block;
    }
    
    h2 {font-size: 2em;
        line-height: 1.8em;
        font-family: Yanone Kaffeesatz;
        font-weight: bold;
        letter-spacing: 0.1em;
        margin: 0em;
        padding: 0em;
        padding-top: 0.5em;
        padding-left:1em;
        text-align: left;}
    
    p {    
        text-align: center;
        font-size:1.5em;
        font-family: Yanone Kaffeesatz;
        font-weight: normal;
        text-align: left;
        display: inline-block;
        padding-left: 2.0em;
        padding-top: 0em;
    }
    
    
    
    
    ul {
        margin:0px;
        padding: 0px;
    }
    
    li {list-style: square;
        line-height: 1.25em;
        font-family: Yanone Kaffeesatz;
        font-weight: normal;
        margin: 0.313em 0em 0.313em 0em;
        padding: 0em;
        text-align: justify;}
    
    img {
        width:60%;
        height: auto;
        max-width: 100%;
    }
    
    a {text-decoration: none;}
    
    /* On top Bar */
    
    #menubar{
        display: block;
        background: white;
    }
    
    #menubar ul {
        display: block;
        width:2em;
        padding: 0em;
        padding-top:0.9em;
    }
    
    #menubar ul li {
        display: inline;
        line-height: 0.1em;
    }
    
    #menubar ul li a.menubutton {
        display: none;
    }
    
    #menubar ul li a img {width:100%;
    padding-left: 2em;}
    
    
    
    /*header*/
    
    
    header {
        display: inline-block;
        background: white;
        padding-left: 6em;
        max-width: 40%;
        
    }
    
    header img {max-width: 8%;
                height: auto;
                padding-right: 1em;
    
            }
    
    /* Navigation */
    
    nav {
        display:block;
        background: white;
        text-align:center;
    
    }
    
    nav ul {
        display: block;
    }
    
    nav ul li {
        display: inline;
        margin: 0em 0.188em 0em 0.188em;
    }
    
    nav ul li a {
        color: black;
        font-size:1.5em;
        line-height: 2.5em;
        padding: 0.563em 0.938em 0.375em 0.983em;
        transition:background 0.2s;
        -webkit-transition:background 0.2s;
    }
    
    nav ul li a:hover { background: rgb(136,114,103);
                        border-bottom: 0.188em solid #3e322d; 
    }
    
    nav ul li a.active {border-bottom: 0.188em solid #3e322d;
    
    }
    
    /*Conten´t Area */
    
    #main {
        display: block;
        width:96%;
        max-width: 1200px;
        margin: 0em auto;
        padding:0em;
    }
    
    #main article { display: inline-block;
            width: 100%;
            vertical-align: top;
            margin:0em;
            padding: 0em;
            }
    
    #main article img {
        max-width: 400px;
        margin-top: 2em;
        border: 5px solid rgb(75,69,53);
        display: inline-block;
        text-align: center;
        margin-left: 2em;
    }
    
    .Schrift {display: inline-block;
                position: relative;
                max-width: 600px;
                padding-top: -10em;
                }
    
    
    #banner {
    display: block;
        width:100%;
        max-width: 1200px;
        margin: 0em auto;
        padding:0em;
    
    }
    
    #banner img {
        max-width: 1200px;
        width: 100%;
    }
    
    /* footer */
    
    footer {
        display: block;
        text-align: right;
    margin-top: 1em;
    margin-bottom: -0.5em;
    }
    
    footer ul li { text-align: right;
                    padding-right: 3em;
                    list-style-type: none;
    
                    }
    footer ul li a { color: black;
    padding: 0.2em;
    border: 3px solid rgb(75,69,53);}
    
    /* Mobile Ansicht */
    
    @media screen and (max-width: 800px){
    body { font-size: 90%;
    
    }
    }
    @media screen and (max-width: 600px){
        #main article {
            width:100%;        
            display: block;
            margin: 0.625em 0em 0.625em 0em; }
    
        #main article img {
            margin-left: 1.3em;
            width: 220px;
        }
    
        .Schrift p {
                text-align: center;
                
                max-width: 250px;}
        .Schrift {margin-left: -1.9em;}
    
    }
    
    
    @media screen and (max-width: 550px) {
        nav.nav {display: block !important ;}
    
        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}
    }
    Ich würde mich extrem freuen, wenn mir irgendjemand helfen kann !

    Danke schonmal!

    Ganz Liebe Grüße

    Sundream
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    HTML Newbie
    Registriert seit
    31.01.2015
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Ausklappbare Navigation funktioniert nicht...

    Was ist denn genau dein Problem ? Was willst du mit der Navigation machen?

  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    15.03.2015
    Beiträge
    80
    Danke
    38
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Ausklappbare Navigation funktioniert nicht...

    Ich möchte gerne, dass die Navigation in der Mobilen Ansicht, also auf dem Handy, zu einer sich ausklappenden Navigation wird, wenn man auf das Hamburger Icon oben links klickt... Aber wenn man drauf klickt passiert nichts...

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 14.10.2010, 20:38
  2. Seite funktioniert und funktioniert nicht
    Von parcifal83 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 24.05.2010, 15:24
  3. Antworten: 6
    Letzter Beitrag: 12.09.2009, 21:02
  4. Navigation per php-Include einbinden funktioniert nicht
    Von zaunbauer im Forum HTML & CSS Forum
    Antworten: 45
    Letzter Beitrag: 10.04.2009, 02:06

Stichworte

Berechtigungen

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