Onkelmann09
New member
Hallo
Ich selber kann leider kein JavaScript, habe aber diesbezüglich ein kleines Anliegen.
Vielleicht kann mir hier ja jemand von Euch helfen.
Darüber würde ich mich wirklich riesig freuen.
Ich bin gerade dabei, meine Webseite auf ein Responsive Design umzustellen, bzw. neu zu machen.
Für die Darstellung meiner Seite auf großen Viewports, befindet sich meine Navigation links (also ganz klassisch).
Für die Darstellung auf kleinen Fiewports, geht die Navigation nach oben.
Ich habe das mit CSS und Media Queries realisiert.
Nun möchte ich, dass auf den kleinen Viewports die Navi mit einem "Button" ein und ausgeklappt werden kann.
Dafür habe ich ein kleines Javascript im Einsatz.
Das Script habe ich nicht selber geschrieben, weil ich das leider nicht kann.
Das Sript macht im Grunde schon, was es soll, nur leider funktioniert es anscheinend nicht auf dem Stock Android Browser.
Und ich finde nicht heraus, wo der Fehler ist.
Gruß
Ingo
Hier ein Link, wo man sich das angucken kann:
http://spaceart.de/_xxxx_test-1.php
Und hier poste ich auch nochmal den Code der Test-Seite:
Ich selber kann leider kein JavaScript, habe aber diesbezüglich ein kleines Anliegen.
Vielleicht kann mir hier ja jemand von Euch helfen.
Darüber würde ich mich wirklich riesig freuen.
Ich bin gerade dabei, meine Webseite auf ein Responsive Design umzustellen, bzw. neu zu machen.
Für die Darstellung meiner Seite auf großen Viewports, befindet sich meine Navigation links (also ganz klassisch).
Für die Darstellung auf kleinen Fiewports, geht die Navigation nach oben.
Ich habe das mit CSS und Media Queries realisiert.
Nun möchte ich, dass auf den kleinen Viewports die Navi mit einem "Button" ein und ausgeklappt werden kann.
Dafür habe ich ein kleines Javascript im Einsatz.
Das Script habe ich nicht selber geschrieben, weil ich das leider nicht kann.
Das Sript macht im Grunde schon, was es soll, nur leider funktioniert es anscheinend nicht auf dem Stock Android Browser.
Und ich finde nicht heraus, wo der Fehler ist.
Gruß
Ingo
Hier ein Link, wo man sich das angucken kann:
http://spaceart.de/_xxxx_test-1.php
Und hier poste ich auch nochmal den Code der Test-Seite:
HTML:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<style>
nav ul {
padding-left: 0;
}
nav li {
list-style: none;
}
.menu-klappen {
display: none;
}
@media screen and (max-width: 46.5rem) {
/* Button zum Anzeigen des Menüs */
.js .menu-klappen {
display: block;
cursor: pointer;
color: #fff;
background-color: #313131;
width: 2.5rem;
height: 2.5rem;
text-align: center;
line-height: 2.5rem;
font-weight: normal;
}
.js nav ul {
display: none;
}
nav ul.klappen-on {
display: block;
}
nav ul.klappen-on li, .no-js nav li {
display: block;
}
[data-icon]:before {
content: attr(data-icon);
speak: none;
display: inline-block;
font-size: 200%;
}
.screen-reader-text {
position: absolute;
top: -9999px;
left: -9999px;
}
}
</style>
</head>
<body>
<nav id="navigation">
<h3 class="menu-klappen">
<span data-icon="≡" aria-hidden="true"></span>
<span class="screen-reader-text">Menü</span>
</h3>
<ul>
<li><a href="#.php">Kategorie 1</a></li>
<li><a href="#.php">Kategorie 2</a></li>
<li><a href="#.php">Kategorie 3</a></li>
<li><a href="#.php">Kategorie 4</a></li>
</ul>
</nav>
<script>
( function() {
//Klasse zu html hinzufügen lassen, die kennzeichnet, dass JavaScript aktiviert ist
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
function naviklapp(navid) {
//Elemente definieren: Navigationselement, Button, Menü
var nav = document.getElementById( navid );
var button;
var menu;
//Wenn keine Navigation, dann nichts tun
if ( ! nav )
return;
//der Button ist das erste h3-Element innerhalb der Navigation
button = nav.getElementsByTagName( 'h3' )[0];
// die erste ungeordnete Liste in der Navigation ist das Menü
menu = nav.getElementsByTagName( 'ul' )[0];
if ( ! button )
return;
if ( ! menu || ! menu.childNodes.length ) {
button.style.display = 'none';
return;
}
button.onclick = function() {
if ( -1 != button.className.indexOf( 'klappen-on' ) ) {
button.className = button.className.replace( ' klappen-on', '' );
menu.className = menu.className.replace( ' klappen-on', '' );
} else {
button.className += ' klappen-on';
menu.className += ' klappen-on';
}
};
}
naviklapp('navigation');
} )();;
</script>
</body>
</html>
Zuletzt bearbeitet von einem Moderator:
