Hallo liebes Forum,
Ich bin neu hier und habe direkt mal eine Frage.
Und zwar bin ich derzeit dabei, eine eigene Webseite zu machen, um in dem Thema CSS&HTML fit zu bleiben. Javascript ist aber ziemliches Neuland, daher würde ich mich über Erklärung zur Lösung auch freuen. 
Zur Frage:
Ich habe eine Navigation, die man über ein Hamburger Menü ein und ausblenden kann. Soweit bin ich also schon 
Jetzt möchte ich aber, dass wenn ich auf einen Link klicke, dass die Navigation dann auch wieder zu geht. Bisher muss man sie leider "per Hand" schließen.
Zudem habe ich in der gesamten Seite, eine "shrink" Funktion eingebaut, weil es ein Onepager werden soll, damit sich header/footer beim scrollen verändern, also nicht wundern.
Vielleicht hat ja jemand eine Idee, anbei mein Code:
HTML-Navi:
<div id="header">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
<a href="#top"><img id="logo" src="src/logo.png" alt="Logo"/></a>
<a href="#top"><h1>Ratneck</h1></a>
<div class="navi">
<div class="menu">
<table class="nav" style="width:100%">
<tr><td><a href="#top"><p>Home</p></a></td></tr>
<tr><td><a href="#top2"><p>Über uns</p></a></td></tr>
<tr><td><a href="#top3"><p>Test</p></a></td></tr>
<tr><td><a href="#top4"><p>Blaa</p></a></td></tr>
<tr><td><a href="#top5"><p>Lorem</p></a></td></tr>
<tr><td><a href="#top6"><p>Ipsum</p></a></td></tr>
</table>
</div>
</div>
</div>
Alles anzeigen
CSS:
.hamburger{
background:none;
position:absolute;
top: 5px;
right:0;
line-height:45px;
padding:5px 15px 0px 15px;
color: #848484;
border:0;
font-size:1.8em;
font-weight:bold;
cursor:pointer;
outline:none;
z-index:10000000000000;
}
.cross{
background:none;
position:absolute;
top:0px;
right:0;
padding:5px 15px 0px 15px;
color: #848484;
border:0;
font-size:3em;
line-height:45px;
font-weight:bold;
cursor:pointer;
outline:none;
z-index:10000000000000;
}
.nav {width: 100%}
.menu{z-index:1000000; font-weight:bold; font-size:12pt; width:100%; background-color: #848484; position:fixed; text-align:center; line-height: 5px;}
.menu tr {width: 100%; }
.menu td {display: block; height: 40px; width: 100%}
.menu td:hover{width: 100%; background-color: hsla(100, 100%, 100%, 0.8);height: 40px; }
.menu tr td a { text-decoration:none; margin: 0px; color: #848484;;}
.menu tr td a:hover {color: #848484; text-decoration:none;}
.menu a{text-decoration:none; color:#848484;}
.menu a:hover{text-decoration:none; color:#848484;}
.navi {
left: 0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out ;
width: 100%;
margin-top: 30px;
}
.navi.shrink {
margin-top: 10px;
}
Alles anzeigen
und mein Javascript:
$( document ).ready(function() {
$( ".cross" ).hide();
$( ".menu" ).hide();
$( ".hamburger" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});
$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
});
$(document).on("scroll", function(){
if
($(document).scrollTop() > 200){
$(".navi").addClass("shrink");
}
else
{
$(".navi").removeClass("shrink");
}
});
Alles anzeigen
