Forum Moderators: open
Please could anybody tell me what is the correct code to use to create ONE navigational menu that will appear on all my pages, but that will not create an underlined Link on the 'current page'?. For ease of maintenance, I want to create one menu page and then use it as a 'PageInclude' on many pages.
Currently I am using the following html
<p>
<a href="index.htm">Homepage</a><br>
<a href="../folder1/villa.htm">Villa</a><br>
<a href="../folder1/price.htm">Price</a><br>
<a href="../folder2/flights.htm">Cheap Flights</a><br>
<a href="../folder2/sports.htm">Sports</a><br>
<a href="../folder1/phone-numbers.htm">Phone Numbers</a><br>
<a href="../folder3/tips.htm">Tips</a><br>
<a href="../folder3/news.htm">News</a><br>
<a href="../folder1/weather.htm">Weather</a><br>
<a href="../folder4/links.htm">Useful Links</a><br>
<a href="../folder5/contactus.htm">Contact Us</a>
</p>
I want to use a similar code when a visitor gets to (eg) my Folder1 directory but I can't find out what html to use so that the 'current page' does not appear as a Link. What I am trying to avoid is having to insert a menu on every page because this will make future maintenance a nightmare as my site gets bigger.
Any pointers would be appreciated.
NB - I am changing because FP2000 includes <nobr> tags that make my site non-validating html 4.01 transitional.
Thanks.
But I think this is not a real issue, and that you're quite safe and OK by leaving it a link.
This will also please visitors, as they still can click the link if they want to, they might get a little annoyed when they can't click something they expect to be able to click.
It will also safe you some trouble making it ;)
This will also please visitors, as they still can click the link if they want to, they might get a little annoyed when they can't click something they expect to be able to click.
Sorry, DoppyNL, here I disagree with you - users will get upset (and possibly confused) if they can click on a live "link" that really only reloads the current page. In fact, for many years, usability maven Jakob Nielsen has included this on his annual list of the Top Ten Web Design Mistakes [useit.com].
And Jakob's not just flappiong his gums on this point -- his "opinions" are the result of a large number of usability studies that his firm does every year.
You can use CSS to achieve this.
First modify your menu to give each link a unique id..
<p>
<a id="m_home" href="index.htm">Homepage</a><br>
<a id="m_villa" href="../folder1/villa.htm">Villa</a><br>
<a id="m_price" href="../folder1/price.htm">Price</a><br>
<a id="m_flight" href="../folder2/flights.htm">Cheap Flights</a><br>
<a id="m_sport" href="../folder2/sports.htm">Sports</a><br>
...etc..
</p>
Now give the <body> tag of each page an id that reflects it's section.
(e.g. <body id="villa">, <body id="price">, <body id="flight"> etc)
Then finally use some CSS to style the tags..
/* normal link */
a {
color: #00f;
background-color: transparent;
font-weight: bold;
}
/* current link */
#home #m_home, #villa #m_villa, #price #m_price, #flight #m_flight, #sport #m_sport {
color: #005;
background-color: transparent;
font-weight: normal;
}
Hope that helps.
All you need to change to this code:
<p>
<a href="index.htm">Homepage</a><br>
<a href="../folder1/villa.htm">Villa</a><br>
<a href="../folder1/price.htm">Price</a><br>
<a href="../folder2/flights.htm">Cheap Flights</a><br>
...
is to delete a single 'a'.
ie. If you are on the villa page, the menu code reads:
<p>
<a href="index.htm">Homepage</a><br>
<href="../folder1/villa.htm">Villa</a><br>
<a href="../folder1/price.htm">Price</a><br>
<a href="../folder2/flights.htm">Cheap Flights</a><br>
and if you are on the price page, the menu code reads:
<p>
<a href="index.htm">Homepage</a><br>
<a href="../folder1/villa.htm">Villa</a><br>
<href="../folder1/price.htm">Price</a><br>
<a href="../folder2/flights.htm">Cheap Flights</a><br>
Quite honestly though, if you're going to take the quarter second that it takes to do this, you might as well just spend an extra two seconds and have this:
<p>
<a href="index.htm">Homepage</a><br>
<a href="../folder1/villa.htm">Villa</a><br>
Price<br>
<a href="../folder2/flights.htm">Cheap Flights</a><br>
instead. (Which will be valid...)
ronin: he can't just delete the link because he wants to use SSI to include the same menu on every page, which is a perfectly sensible thing to do.
All your further suggestions are welcome
If the page is called "Price" and there is a link to the "Price" most normal people will realize they are on the "Price" page and won't get upset.
KISS is always the first rule.
Umm.. slightly bizarre suggestion from ronin that one
It was slightly bizarre, wasn't it?! >;->
I'm just displaying my dislike for server side includes which are, in my opinion, ugly and wrong >;->
I guess I'm with Tedster, when he writes:
I prefer to code menus flat
Otherwise it's like using a sledgehammer to open a walnut.
Also, I agree with the KISS principle. I think it's a lot simpler for most internet users that there aren't any on-page links that reload the same page. Most internet users are not very good at figuring out why the same page has just loaded: they think they have made a mistake, because they "know" that links always take you to a different page.
Since in this case the link is actually still a link, on mouseover it will still change to whatever the browser uses in such cases (typically, a hand or pointer), which may be confusing.
So, you might tell it not to change, by adding to the current-link style:
cursor:default;
