Web Design: Menus to see in the dark
Your support helps us to tell the story
From reproductive rights to climate change to Big Tech, The Independent is on the ground when the story is developing. Whether it's investigating the financials of Elon Musk's pro-Trump PAC or producing our latest documentary, 'The A Word', which shines a light on the American women fighting for reproductive rights, we know how important it is to parse out the facts from the messaging.
At such a critical moment in US history, we need reporters on the ground. Your donation allows us to keep sending journalists to speak to both sides of the story.
The Independent is trusted by Americans across the entire political spectrum. And unlike many other quality news outlets, we choose not to lock Americans out of our reporting and analysis with paywalls. We believe quality journalism should be available to everyone, paid for by those who can afford it.
Your support makes all the difference.GRAPHIC BUTTONS are often unhelpful because, unlike text links, they do not change to reflect the content that has been selected. Visitors have no visual way of determining where they are or where they are about to go. This week, we will learn how to rectify that by creating a graphic menu that will change as the user navigates through the site. Last week, we learned how to toggle between two different graphics (http://www.independent.co.uk/net/ 981116 ne/story5.html). We will be applying that technique here with some slight modification. If you have trouble with this code visit:http://www.webbedenvironments. com/ 45b.html
Create the graphics
First off, create three version of each graphic button, one for each "state" that the button can have:
off - used when the button is not selected.
rdy - used when the mouse pointer is over the button and it is ready to be selected.
on - used when the button is the currently selected option.
Each of these three versions is used at different times depending on what is happening on the screen. For this example I have created nine different graphic (three states for three different options) and used different drop shadows and tabs for the different states. You could use whatever graphics you wanted, just make sure each state looks different.
Set up the Frames
Now set up two frames: one for the menu and one to hold the content.
Join our commenting forum
Join thought-provoking conversations, follow other Independent readers and see their replies
Comments