Tip:
Highlight text to annotate it
X
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. 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.