Hi and welcome to this week’s web design video blog. This week we are going to show you how to create a simple, dynamic menu that uses PHP to highlight to the user, which page they are on. This can obviously be achieved by dropping a class onto each page’s navigation, but in this tutorial, the PHP applies the class automatically, allowing you to source your navigation from a single PHP include file.
So to demonstrate our dynamic PHP menu, we’ve prepared this small micro website that’s available to see online, it’s got four pages and as you can see as you click through the navigation, the link is removed for the page that you are currently browsing. And also the background of the navigation is changed to white so it’s obvious to see for the user which page of the website that they are currently on. Like Nick mentioned, this is sourced from all pages using a single navigation include file. So if you download the supporting files, and we open those up in Dreamweaver.
Supporting files from the video
- Example Microsite (Online Example from the video).
- Supporting ZIP File (Files require uploading to view the working PHP).
You’ll see that the index page and all other three pages all acquire the same navigation include. So if we open up nav.php you’ll see that this is a simple list of bullet points and what the php is doing is identifying the page that you are currently browsing.
These are all declared as you can see here: index.php, page two, three and four. So if it identifies that you are browsing one of those pages it loads a different class. So if we were on page four for example, the fourth bullet point would load using this HTML here, if you were on a different page, it would load using this HTML here that also includes the link and a different class for that bullet point.
So to use this on your website or if you are building a new website I’d recommend downloading it; and just having a bit of a play-round with it to see what effects you can achieve. Thank you for watching this week, don’t forget you can download the ZIP file from our supporting blog post at crearedesign.co.uk/blog/videos. Next week we will be looking at HTML Access Keys and their impact on accessibility.
I used this template on my website. It’s really great looking and quick loading. Keep it up boys.
Amazing – after hours of searching your page seemingly saved my life! I am new at php and managed to get everything working on my test site http://www.fijicafe.com with one hickup – my other newly acquired knowledge of css drop down menus (which worked great before) is not working with this current system.
Is it possible to ask for help?
Many thanks,
Natasha
Hi, I am loving this script. However, I cannot seem to get the PHP code to work when it comes to having a subdirectory (e.g. /blog/). The other pages work fine, but it’s the subdirectory pages I’m stuck on.
Any help would be highly appreciated,
Craig Riches.