Hier ein Beispiel mit Menü-Buttons, die durch einen aktiven Pfeil die Seite anzeigen. Es fehlt noch ein Hamburger-Menü für das Handy.
Tutorial nach:
https://codepen.io/svmatthews/pen/FbgaK
Hier habe ich einen einfachen Textblock verwendet und den Beispieltext mit den Buttons (Quellcode unten) ersetzt. Dabei erhält der jeweils aktive Button die class="current"
<ul>
<a href="index.html"><li class="current">Home</li></a>
<a href="Active-Menu_Page1.html"><li>Seite 1</li></a>
<a href="Active-Menu_Page2.html"><li>Seite 2</li></a>
</ul>
CSS im "Code Editor" im Bereich "CSS Editor":
ul {
li {
display: inline;
background-color: #e5e5e5;
padding: 20px 30px;
position: relative;
@media (max-width: 768px) {
display: inline-block;
margin-top: 20px;
}
&:hover {
background-color: #c0c0c0;
cursor: pointer;
&:after {
border-top: #c0c0c0;
}
}
&.current {
&:after {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #e5e5e5;
content: " ";
position: absolute;
bottom: -15px;
left: 35%;
}
}
}
}
.mbr-text UL {
text-align: center;
}
Dieses JavaScript gehört in die "Seiteneinstellungen" in den Bereich "End of <body> code":
<script>
$('ul li').click(function() {
$('.current').removeClass('current');
$(this).addClass('current');
});
</script>
