Dillon Posted August 4 Posted August 4 I apologize in advance for the newbie question but I am having a hard time making my menu: I am using the basic-site template. I would like to have a hamburger type menu, with my logo as the homepage link static on the top left of each page. I have searched for “menu logo” “hamburger menu” and nothing came up in the forums so I am a bit stumped but I am hopeful it is a simples solution. what is the best practice for adding a svg file for a homepage link? Also I would like to filter all of my child pages to a hamburger menu on the top right side for the rest of the child pages of home. Thank you in advance for helping this old timer owner…
virtualgadjo Posted August 4 Posted August 4 Hi @Dillon if this is the kind of thing you're looking for https://www.waitandcie.com/ sorry everything is in french but it doesn't change the way it works... first i get the pages like this <?php namespace ProcessWire; $zipages = $pages->find('parent=1, sort=sort'); ?><!DOCTYPE html> and then <nav aria-expanded="false" inert> <a href="#" role="button" class="close_nav" id="close_nav" aria-controls="nav" aria-expanded="true" title="fermer le menu"><img src="/site/assets/img/couverts.svg" alt="fermer le menu" aria-labelledby="fermer le menu" style="width: 40px;" /></a> <ul id="navul"> <li><a href="/"><span data-content="Accueil"><img src="/site/assets/img/back.svg" alt="retour à l'accueil" aria-labelledby="retour à l'accueil" style="width: 50px; margin-inline: auto;" /></span></a></li> <?php foreach($zipages as $zp): ?> <li><a href="<?= $zp->url; ?>" class="navlink<?= $page->id == $zp->id ? ' selected': ''; ?>"><span data-content="<?= $zp->title; ?>"><?= $zp->title; ?></span></a></li> <?php endforeach; ?> </ul> </nav> and of course, alittle lower <a href="#" role="button" class="open_nav" id="open_nav" aria-controls="nav" aria-expanded="false" title="ouvrir le menu"><img src="/site/assets/img/hamburger_wh.svg" alt="ouvrir le menu" aria-labelledby="ouvrir à l'accueil" style="width: 50px;" /></a> done... everything elese is about css and js (toggle the inert and aria expanded attributes, my little fun with the menu items and so on but, as you can see, there are svg files here and there, when they are used all over the website UI i often create an img folder in the assets one to store svg icons (hamburger/map markers and so on) in case it helps a little have a nice day 2
psy Posted August 4 Posted August 4 Also, when using svg's that are saved in your images field, you'll need to install FileValidatorSvgSanitizer and add svg to the allowed files extensions in your images field 1
TomPich Posted August 5 Posted August 5 A thought about the SVG: unless your client would like to change it every now and then, just include it directly in the php template... 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now