Navigation einer Webseite mit JavaScript

Isa140 · 25. Februar 2018

Ist zwar nicht ganz wie ich es mir vorgestellt habe aber es ist in Ordnung

Bekommt man es irgendwie hin das wenn man die Seite in der Größe für Handy neu lädt das dann nicht direkt schon die Navigation offen ist sondern sie sich erst öffnet wenn man drauf klickt?

basti1012 · 25. Februar 2018

Also bei codepen ist das nicht so.Oder habe ich da was falsch verstanden? Kannst du mal bei Codepen kucken ob das da auch so ist? Fals da alles ok ist müsstest du mir mal deinen Code zeigen .Vieleicht ist da irgendwas anderes

Isa140 · 25. Februar 2018

Bei codepen ist es bei mir auch nicht so

HTML

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0"/>
        <title>Schreinerei Brettner | Startseite</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
    </head>
    <body>
        <div class="header">
        <img class="logo" src="logo.png">
        <img id="togg" src="icon.png">
            <ul id="menu"><span id="X">X</span>
                <li><a class="active" href="index2.html">Startseite</a></li>
                <li><a href="ueberUns.html">Über uns</a></li>
                <li><a href="Leistungen.html">Leistungen</a></li>
                <li><a href="">Kontakt</a></li>
            </ul>
        </div>
        <footer>
            <span class="footer"> <a class="copyright">&copy;</a> Copyright 2018 - Schreinerei Brettner <a class="strich"> | </a>   <a class="impressum" href="impressum.html">Impressum</a> </span>
        </footer>
        
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
       
 <script>
 $('#togg').click(function(){
 
        $('#menu').fadeIn()
    
});
$('#X').click(function(){
 $('#menu').fadeOut();
})

$('#X').click(function(){
$('#dunkel').css('display','none');
 $('#menu').fadeOut();
})

$('#togg').click(function(){
  
 $('#dunkel').css('display','block');
})
 </script>
        <div id="dunkel"></div>
    </body>
</html>

Alles anzeigen

CSS

body {
    margin:0;
    padding:0;
    width:100%;
    height: auto;
    background-size: cover;
    background-image: url(hintergrund.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
.header img#togg {
    display: none;
    position: absolute;
    right:20px;
    top:9px;
}
.header {
    width:100%;
    background-color:#FAEDD6;
    height:70px;
}
.header img.logo {
    width: 192px;
    height: auto;
    position: absolute;
    margin-left: 1%;
}
.header ul {
    margin: auto;
    width: 79%;
    padding:17px 0 23px 0;
    text-align: center;
    float: right;
}
.header ul li {
    display: inline;
    font-family: 'Jura', sans-serif;
    font-size: 152%;
    padding: 0 27px;
}
.header ul li a {
    text-decoration: none;
    color: black;
}
.header ul li a:hover {
    border-bottom: 4px solid #78342f;
}
.header ul li a.active {
    border-bottom: 4px solid #78342f;
}
footer {
    background-color: #FAEDD6;
    height: 42px;
    width: 100%;
    position: fixed;
    bottom: 0px;
}
footer span.footer {
    position: absolute;
    top:8px;
    color: #151515;
    font-family: 'Roboto', sans-serif;
    margin:auto auto auto 2%;
    letter-spacing: 0.5px;
}
footer span a {
    text-decoration: none;
    color:black;
}
footer span a.copyright {
    font-family:  'Roboto: 300', sans-serif;
    font-size: 20px;
}
footer span a.strich {
    margin: 0 5px;
}
footer span a.impressum:hover {
    text-decoration-line: underline;
}
@media screen and (min-width:850px) {
    .header ul {
        display: block !important;
    }
    #X,#togg{
        display:none;
    }
}
@media screen and (max-width: 850px) {
    .header img#togg{
        display: block;
}
    #menu{
        display:block;
        margin-left:-200px;   
        width:200px;
        height:500px;
        background-color:black;
        padding-top: 34px;
        position: relative;
        z-index: 10;
        height: 88vh;
        
}
 
    .header ul li a, .header ul li a.active {
        color: white;
    }
 
 
    #X{
        position:absolute;
        right:173px;
        top:6px;
        cursor:pointer;
        color:white;
        font-family: 'Jura', sans-serif;
        font-size: 24px;
        font-weight: bold;
    }
    
    .header ul li {
        display:block;
        margin-top: 19px;
        list-style: none;
    }
    
    #dunkel{
  width:100vw;
  height:100vh;
  position:fixed;
  top:0;
  left:0;
  z-index:3;
  background:black;
  opacity:0.6;
  display:none;
}
}

Alles anzeigen

basti1012 · 25. Februar 2018

Zitat von Isa140

Bei codepen ist es bei mir auch nicht so

He wie bitte?

Ist bei Codepen alles in Ordnung ? Ja oder nein ?

Dein Code kucke ich mir mal an ,ein moment.

EDIT habe gesehen das es in dein Code so ist ,aber bei codepen ist es nicht so .Mal kucken

basti1012 · 25. Februar 2018

Code

#menu{
        display:none;
        margin-left:-200px;   
        width:200px;
        height:500px;
        background-color:black;
        padding-top: 34px;
        position: relative;
        z-index: 10;
        height: 88vh;
        
}

Alles anzeigen

Das muß so sein. Du hattest display auf block gesetzt.

https://basti1012.bplaced.net/…rdner=html-seminar&id=787

Isa140 · 25. Februar 2018

Vielen Dank!!

Isa140 · 1. März 2018

Brauche nochmal dringend Hilfe

Ich muss den CSS Code kommentieren was was macht, aber ich weiß nicht wie ich hier erlären soll was das Position: relative macht. Und was das vh bei höhe definiert weiß ich auch nicht so ganz.

Code

#menu{
        display:none;
        margin-left:-200px;   
        width:200px;
        height:500px;
        background-color:black;
        padding-top: 34px;
        position: relative;
        z-index: 10;
        height: 88vh;
    }

Alles anzeigen

m.scatello · 1. März 2018

Das kann man alles hier nachlesen: https://www.w3schools.com/css/

basti1012 · 1. März 2018

Kannst du hier abschreiben .steht weiter unten

positoionen

https://www.mediaevent.de/tuto…on-absolute-relative.html

vh und andere höhen angaben

https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen,_Maße_und_Maßeinheiten

Brauchst du nochwas?

Navigation einer Webseite mit JavaScript

Jetzt mitmachen!

Teilen