Navigation einer Webseite mit JavaScript

Isa140 · 23. Februar 2018

Hallo,

ich mache gerade eine Webseite und möchte das diese auch auf dem Handy gut funktioniert. Jetzt will ich das ab einer bestimmten Bildschirmauflösung man auf den Menü Icon klickt und von rechts das Menü kommt. Vielleicht kann mir hier jemand helfen, die Sachen die ich im Internet finde verwirren mich nur.

DER · 23. Februar 2018

Es gibt genau dafür die Media Queries und dafür benötigt man nur CSS und eine Zeile HTML.

Media Queries im Aufbau:

Code

@media only screen and (max-width:500px) {

header { background-color: blue; }
}

<!--Das hier im <head> Bereich von HTML -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Füge diesen Code in dein CSS ein, und verkleinere deinen Browser Bildschirm. Ab einer größe von 500px ist dein Header dann Blau.

Das "only screen" beschreibt, dass die Seite die darauffolgenden Anweisungen nur für den Bildschirm verwenden soll. Man kann auch "only print" angeben, dann folgen Anweisungen für den Drucker, falls man die Seite drucken möchte.

Das "(max-width:500px)" beschreibt, ab welcher Bildschirmgröße diese Query wirken soll.

Ich hoffe, dadurch wird das ganze für dich klarer.

Isa140 · 23. Februar 2018

Das wenn ich es kleiner schiebe die vorherige Navigation weg geht und das Menü Icon kommt habe ich schon, ich muss nur hinbekommen mit JavaScript das wenn ich auf den Icon drauf klicke das von rechts das Menü in den Bildschirm kommt. Das html und css habe ich alles nur der JavaScript Teil damit es funktioniert fehlt mir

basti1012 · 23. Februar 2018

dann zeig mal was du hast dann fummeln wir dir ein javascript zurecht

DER · 23. Februar 2018

Grundsätzlich versucht man natürlich JS aus Funktionen herauszuhalten, welche die Funktionalität der Seite stark beeinträchtigen.

Über die Pseudoklasse :target kann man ganz ohne JS solche Menüs entwerfen.

https://www.html-seminar.de/toggle-menue-ohne-javascript.htm

dabei lässt man "Menü" erstmal durch CSS ausblenden, um es mit :target wieder einblenden zu lassen.

Wenn Du unbedingt die JavaScript Variante willst, empfehle ich dir JQuery zu nutzen:

https://code.jquery.com/jquery-3.3.1.min.js

Herunterladen, einbinden und weiter:

Code

$('#Menü-Knopf-zum-einblenden').click(function(){
        $('#Menü-id').fadeIn();
    })
});

Isa140 · 23. Februar 2018

Es ist eine Webseite einer ausgedachten Schreinerei die ich für die Schule machen muss, also nicht wundern

HTML

<!DOCtYPE 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>
        <section id="menubar">
        <a class="menubutton" href="#menu"><img class="icon" src="icon.png"> </a>
        </section>
        <div class="header">
        <img src="logo.png">
            <ul>
                <li><a class="active" href="">Startseite</a></li>
                <li><a href="">Über uns</a></li>
                <li><a href="">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>
    </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;
}

#menubar {
    position: absolute;
    right:20px;
    top:9px;
} 

#menubar a.menubutton {
    display: none;
}

.header {
    width:100%;
    background-color:#FAEDD6;
    height:70px;
}

.header img {
    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: absolute;
    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;
    }
}

@media screen and (max-width: 850px) {
    #menubar a.menubutton {
    display: block;
}
    .header ul {
        display: none;
    }
}

Alles anzeigen

basti1012 · 23. Februar 2018

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

Das viel mir mal gerade so in der schnelle ein . Falls du es anders haben willst dann sag mal Bescheid, da kann man ja noch dran arbeiten

m.scatello · 23. Februar 2018

Zitat von basti1012

https://codepen.io/basti1012/pen/jZpRJg

Das fiehl mir mal gerade so in der schnelle ein . Fals du es anders haben willst dann sag mal bescheid, da kann man ja noch dran arbeiten

Zitat

Ja dieses Thema noch danach werde ich mich ändern.

Du belügst dich selbst.

Isa140 · 23. Februar 2018

Bei mir funktioniert es nicht obwohl ich den Code kopiert habe

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="index2.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>
        <section id="menubar">
        <a class="menubutton" href="#menu"><img class="icon" src=""> </a>
        </section>
        <div class="header">
        <img id="togg" onclick="openNav()"src="icon.png">
            <ul id="menu"><span id="X">X</span>
 <li><a class="active" href="">Startseite</a></li>
                <li><a href="">Über uns</a></li>
                <li><a href="">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>
            $('#togg').click(function(){
                $('#menu').fadeIn()
            });
            $('#X').click(function(){
                $('#menu').fadeOut();
            })
        </script>
    </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;
}
#menubar {
    position: absolute;
    right:20px;
    top:9px;
} 
#menubar a.menubutton {
    display: none;
}
.header {
    width:100%;
    background-color:#FAEDD6;
    height:70px;
}
.header img {
    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: absolute;
    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) {
    #menubar a.menubutton ,#togg{
    display: block;
}
    .header ul {
        display: none;
    }
    #menu{
      display:none;
      margin-left:-200px;
      width:200px;
      height:500px;
      background:#123456;
    }
#X{
  position:absolute;
  right:180px;
  top:0px;
  cursor:pointer;
  color:white;
}
}
.header img{
  width:40px;
  height:40px;
}

Alles anzeigen

DER · 23. Februar 2018

https://jsfiddle.net/d9L4hk7z/

Hast Du auch JQuery ordnungsgemäß eingebunden?

Ich empfehle nach wie vor :target:

https://jsfiddle.net/d9L4hk7z/13/

basti1012 · 23. Februar 2018

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

Habe jetzt jQuery mit in den HTML reingemacht .Kopier das jetzt nochmal ,jetzt sollte es gehen. Falls nicht ,welchen Browser hast du den?

Zitat von m.scatello

Du belügst dich selbst.

Ich weiß

Ich kann es nicht sehen wenn Leute nicht weiter kommen.

Aber er hier hat wenigstens schon Eigeninitiative gezeigt. Bei den anderen, der hatte ja gar nix gemacht.

basti1012 · 23. Februar 2018

Zitat von DER

https://jsfiddle.net/d9L4hk7z/

Hast Du auch JQuery ordnungsgemäß eingebunden?

Ich empfehle nach wie vor :target:

https://jsfiddle.net/d9L4hk7z/13/

Alles anzeigen

Ja ohne Js wäre immer besser .Aber ich glaube heut zu tage ohne Javascript? Wird man kaum noch Seiten finden die das anbieten

DER · 23. Februar 2018

Zitat

Wird man kaum noch Seiten finden die das anbieten

Richtig, trotzdem sollte man drauf achten, das wesentliche Funktionen, wie das aufrufen eines Menüs auch ohne JS möglich ist.

Achten nur leider die wenigsten Entwickler drauf. Wenn man bedenkt, dass es sogar noch Websiten von IT-Firmen gibt, welche rein auf den Flashplayer basieren...

Isa140 · 23. Februar 2018

Ich habe den Code kopiert und nur den JavaScript Teil mit <script> in den head eingefügt und es geht immer noch nicht. Habe es als erstes mit Firefox ausprobiert und jetzt Chrome runter geladen aber es geht bei beiden nicht

basti1012 · 23. Februar 2018

Dann kopier das mal so in deiner html datei rein. Da wahr noch ein Fehler drinne den die Fehlerkonsole anzeigen müsste.Wundert mich das fiddle da kein problem gemacht hat .Solte jetzt gehen

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">


<style>
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;
}
#menubar {
    position: absolute;
    right:20px;
    top:9px;
} 
#menubar a.menubutton {
    display: none;
}
.header {
    width:100%;
    background-color:#FAEDD6;
    height:70px;
}
.header img {
    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: absolute;
    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;
    }
    #menu,#X{
      display:none;
    }
}
@media screen and (max-width: 850px) {
    #menubar a.menubutton {
    display: block;
}
    .header ul {
        display: none;
    }
    #menu{
      display:none;
   
     margin-left:-200px;
      width:200px;
      height:500px;
      background:#123456;
 
    }
 

 
 
#X{
  position:absolute;
  right:180px;
  top:0px;
  cursor:pointer;
  color:white;
}
}



.header img{
  width:20px;
  height:20px;
}

 
</style>
</head>

 
    <body>
        <section id="menubar">
        <a class="menubutton" href="#menu"><img class="icon" src=""> </a>
        </section>
        <div class="header">
        <img id="togg" src="https://www.gravatar.com/avatar/90edc3b12944d0017b29a998fd6a4766/?default=&s=120">
            <ul id="menu"><span id="X">X</span>
 <li><a class="active" href="">Startseite</a></li>
                <li><a href="">Über uns</a></li>
                <li><a href="">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();
});
 </script>
</body>
</html>

Alles anzeigen

Isa140 · 25. Februar 2018

Erstmal vielen Dank!!

Ich habe es jetzt soweit hinbekommen, es gibt nur drei Sachen die ich noch gerne ändern würde aber keine Ahnung habe wie.

Erstmal das das Logo wie auf dem Bild im Hintergrund ist und sich nicht überschneidet, dann das der schwarze Bereich immer so hoch ist wie der verwendete Bildschirm und das der Hintergrund wenn die Navigation offen ist so abgedunkelt ist wie man es oft kennt von mobilen Seiten.

html-seminar.de/woltlab/attachment/1428/

DER · 25. Februar 2018

Das ist ne ganze Menge für ein einfaches Schulprojekt.

mit "z-index" kannst Du bestimmen, ob Elemente andere überdecken sollen, wobei die höhe der Zahl bestimmt, wie weit das Element im Vordergrund steht.

Die höhe eines Elements kannst Du in CSS mit "height" bestimmen,

Mit "rgba()" kannst Du bestimmen wie stark eine Farbe auf einem Element liegen soll. Mittels Javascript könntest Du diese CSS Eigenschaft dann für den gesamten body, außer deiner Navi aktivieren. Dafür empfehle ich wieder JQuery:

Code

$('#navi-knopf').click(function() {
 $('body').addClass('abdunkeln');
});

/*CSS:*/

.abdunkeln > #navigation { background-color: rgba(0, 0, 0, 0.5); }

PS: Code wurde nicht getestet.

basti1012 · 25. Februar 2018

So guck mal, ob ich nichts vergessen habe

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

Isa140 · 25. Februar 2018

Das mit dem das der schwarze Bereich immer so hoch wie der verwendete Bildschirm ist klappt nicht so ganz, man muss immer noch ein bisschen runter scrollen, geht das auch anderster oder nur so?

basti1012 · 25. Februar 2018

In der Css steht ja

Code

#dunkel{
width:100vw;
height:100vh;
}

Versuche es ml mit Prozenten. Oder setz die Zahl etwas höher an zb 110vw und 110vh

Ich hoffe das ist das was du meinst

Navigation einer Webseite mit JavaScript

Jetzt mitmachen!

Teilen