Der Kommentar sollte dazu dienen, damit man weiß was das Javascript macht, das ich nicht beigefügt hatte. Und zwar dass das Menü zu einem Reiter-Menü wird ab einer bestimmten Größe (unter 700px) und dann das Icon sichtbar wird was in dieser Zeile definiert ist:
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
Javascript:
<script>
function myFunction() {
var x = document.getElementById("mymenue");
if (x.className === "menue") {
x.className += " responsive";
} else {
x.className = "menue";
}
}
</script>
CSS Code fürs komplette Menü:
[CODE].menue
{
overflow: hidden;
background-image:
url(„menubg1.png“),
url(„menubg3.png“),
url(„menubg2.png“);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: top left, top right;
}
.menue a
{
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin-left: 15px;
}
.menue a:hover
{
color: #008eff;
}
.menue .icon
{
display: none;
}
@media screen and (max-width: 700px)
{
.menue a:not(:first-child) {display: none;}
.menue a.icon
{
float: right;
display: block;
}
}
@media screen and (max-width: 700px) {
.menue.responsive {position: relative;}
.menue.responsive .icon
{
position: absolute;
right: 0;
top: 0;
}
.menue.responsive a {
float: none;
display: block;
text-align: left;
}
#secendBG {
background-image:
url(„menubg1.png“),
url(„menubg3.png“),
url(„menubg2.png“);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: top left, top right;
max-width: 150px;
}
}[/CODE]
Mit der Doppelung meinte ich nur den Hintergrund. Da ich diesen in der CSS zuerst ohne ID Zuweisung einfach im CSS unter {.menue.responsive a} rein geschrieben hatte und da kam es dann zu einer Hintergrund-Doppelung auf der Navbar. Welche ich dann per ID Zuweisung wieder richtig stellen konnte. Deswegen hatte ich extra die Bilder in dem Post beigefügt, vorher / nachher.
Aktuell das Menü mit ID:
<a href="index.html">Home</a>
<a id="secendBG" href="sides/tauchen.html">Tauchen</a>
<a id="secendBG" href="sides/ocean.html">Ocean</a>
<a id="secendBG" href="sides/aboutme.html">About me</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
Gruß
