Menu met iconen

Hallo

Ik zou graag voor een nieuwe site een menubalk willen maken die op dezelfde manier werkt als die van facebook maar met mijn eigen pictogrammen. Ik heb maar een paar pagina's of menulinken (hoofdpagina, agenda, nieuws, foto's).
Is er een bestaand thema die ik zou kunnen aanpassen (niet direct gevonden)?
Hoe zou ik dit kunnen oplossen door zelf een menu te maken? Dit lijkt me nog haalbaar alleen weet ik niet hoe het swipen werkt. Als je naar links swipt of rechts zou de menu moeten verspringen. Omhoog of omlaag doet de pagina opschuiven.
Kan iemand me hiermee op weg helpen?

Alvast bedankt

Drupalversie:

9.x

Auteur:

Steven Vandewalle

Datum van inzending:

maandag 24 oktober 2022 - 20:36

Door belba op 27 oktober, 2022 - 07:45

Steven

Heb je een voorbeeld of ontwerp wat je juist bedoeld? Zelf werk ik haast niet met FB, maar heb even een pagina bekeken, Wil je die tabfunctie die bovenaan staat? Dit kan met JS gerealiseerd worden.
Je iconen kan je invoeren in de menu twig template. Er is wat basis code nodig om dit te realiseren.

Succes, Jan

Door Steven Vandewalle op 27 oktober, 2022 - 08:38

Dat is inderdaad wat ik bedoel
Voorbeeld

Door belba op 31 oktober, 2022 - 12:23

Er zijn verschillende methodes om iconen te gebruiken ipv text of combinatie icon/text op deze tutorial leggen ze een paar mogelijkheden uit. Mijn bovenstaande methode kan ook gebruikt worden. Voor de link kan je werken met de drupal menu api, waar je een menu bouwt, bv met social media icons. Wat ik veel toepas is een JS tab systheem met onClick functies. Hier een mooie W3-tutorial, over dit topic. Dit laatste kan je oa gebruiken om verschillende delen van een lange node op te roepen( de body, media deel, contactgegevens...).

Succes, Jan

Door Steven Vandewalle op 1 december, 2022 - 22:28

Hallo

Ik ben al een klein stapje dichter maar ik heb te weinig kennis van javascript of jquery. Het lukt me niet om van een bepaalde class="list active" de active te verwijderen en de active toevoegen op de link die net geklikt is. Kan iemand uitleggen wat ik verkeerd doe?

Dit is mijn website waar je de testmenu kan vinden: https://www.fun-divers.be/test
Dit is mijn scriptje:
function testmenu(){ // Get the container element var btnContainer = document.getElementById("navigation");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("list");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
}

De html ziet er zo uit:

Alvast bedankt

Door belba op 3 december, 2022 - 15:56

Het eerste wat me opvalt is dat je in je functie geen argumenten gebruikt. De link naar W3, hierboven, over hoe je tabs aanmaakt kan je zien dat zij twee argumenten gebruiken een voor de event, de andere die de id aanroept, daar cityNames. De HTML code met class en id namen heb je niet gepost, enkel het resultaat van je HTML. Jij werkt met een eventListener, dit kan natuurlijk ook en dan kan je het eerste argument weglaten. Feitelijk kan je gwoon de JS, HTML en CSS kopieren van daar.

Succes, Jan

Door bramvandenbulcke op 6 december, 2022 - 14:14

Je kan dat ook proberen met wat CSS. Je verbergt de tekst en toont in plaats van de tekst een icoon.

Hier een voorbeeld van een implementatie waarbij ik Search vervang door een zoeken icoon:

.c-navigation ul.menu a.replace-text {
margin-right: 8px;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-image: url(/themes/custom/mytheme/img/search.svg);
background-repeat: no-repeat;
background-size: 14px 14px;
width: 14px;
height: 100%;
background-position: 50% 50%;
}

Zie ook https://nicolasgallagher.com/another-css-image-replacement-technique/.

***
http://bram.io
http://webwerk.be