Simple menu using text links - style question

[Bert Coules]

The menu on my site (http://www.bertcoules.co.uk) is a simple line of words stretched across the screen: each individual item is a link, with no decoration other than a change of colour when hovered over or clicked on.

 

Is there a way of making an item permanently change colour when clicked, only to revert back to the original when a different link is selected? In other words, when the selected page is loaded, the menu entry for it would be a different colour from the rest, even when the mouse was not hovering over it.

 

I can think of a very basic way of achieving it, by having several differently-styled versions of the menu paragraph each with a different word permanently in the highlight colour - but is there a more elegant way?

 

Many thanks.

Edited November 26, 2014 by Bert Coules

[niche]

You'll find lots of options by googling "change color on click".

[Bert Coules]

Thanks. I'll take a look.

 

Edited to add:

 

I found a couple of examples showing what I'm after, but so far at least, my original idea seems to be the most straightforward, if hardly the simplest. But I'll keep looking.

Edited November 26, 2014 by Bert Coules

[niche]

Post your solution as far as you're able to take it and let us know what the specific problem you're having.

[Bert Coules]

Not a problem, just a thought that I might not be doing it the best way. Basically, I have a separate menu file for each page of the site, all saved in php_include_files. This is the one for the home page:

        <div id="menu_bar">            <p class="menu">                            <a href="index.php" title="Bert Coules"><span class="white_text">home</span></a>                                <a href="biog.php" title="Bert Coules">about me</a>                                <a href="appearances.php" title="Appearances">appearances</a>                                <a href="credits.php" title="Credits">credits</a>                                <a href="holmes.php" title="BBC audio complete Sherlock Holmes">                <span class="normal_spacing">Sherlock Holmes</span></a>                                <a href="publications.php" title="Publications">publications</a>                                <a href="contact.php" title="Contact me">contact</a>                            </p>            </div> <!-- menu_bar -->

The class="white text" (with its corresponding entry in the stylesheet) over-rules (on this one particular page) the general colour setting for the menu items, and each page has a similar menu file with its relevant item set to white. This certainly works and is fairly simple, but I just wonder if there's a more elegant way.

Edited November 27, 2014 by Bert Coules

[niche]

http://www.w3schools.com/css/css_link.asp

 

See the second "try it yourself"

[Bert Coules]

Thanks, but unless I'm missing something (which is quite possible) that example wouldn't remain in its hover/active styling after it has been clicked, which is what I need. I do realise that links mostly take you away from the page that they themselves are on, but I need mine to be visible throughout the site.

[dsonesuk]

The way to automate this is using php and create array of links, then loop through these array links and as you do so compare with current page address, if they match apply a class name to identify it as the link to current page, then you would include this one single menu file in all your pages, so that when you amend this single file, it will show the amendment instantly in all pages.

[Bert Coules]

Dsonesuk, thanks very much for that. I'll look into it, but at the moment I have no idea how to do what you're suggesting. I'm not averse to learning, but as I said above, my method seems to work perfectly and has the considerable merit that I can understand it. I do understand though the advantage of only having one basic menu rather than seven separate php files.

Edited November 27, 2014 by Bert Coules

[Count_Zero]

If I'm understanding you correctly Bert, you want the link in the menu highlighted when your on that page for that link, right, so that a glance up at your menu will tell you which of your pages your on. If so there are many ways to go about it, but javascript, or php would be the best way to go. One thing is for sure, and as dsonesuk suggest, you want your menu as an include file, I mean this is just the common sense way to do it. Something else you might want to look into is JQuery tabs, and you can download a easily editable package from their site. I would do something like dsonesuk mentions, but I would put my links in a table and run it from a query, output the menu with php echo, and use a simple if/else conditional to flip the css class for the link that equaled the location. I will see if I can do a simple demo for you when I get the time.

Edited November 29, 2014 by Count_Zero

[techprogram]

good luck

Edited November 29, 2014 by techprogram

[Bert Coules]

Count_Zero, many thanks for that. Yes, that's exactly what I want to do (and what I have in fact achieved, but with a slightly clumsy solution). I am actually already using php, with seven different versions of the menu file, each with a different item highlighted and each inserted into the appropriate page. You can see the effect in action at http://www.bertcoules.co.uk .

 

I'd certainly appreciate a demo of a better approach if you have the time to put one together, so thanks for the offer.

 

Techprogram, have you by any chance responded to the wrong thread? Ah - I see you've now edited your reply. I appreciate the good wishes.

Edited November 29, 2014 by Bert Coules

[Count_Zero]

Well right off the bat, and this is simple and quickly done so there could be a sayntax error or two, but (in theory) should work.

 

First create a table in your database, and name it something like link_table, fitting right, single field, varchar, and lenght at 255 should do. Now to load it with your links, open an blank office spreadsheet and list your links down one colume, and then save as a MSDOS CSV file. Now import this csv file into your link_table and it should be loaded.

 

Next add your two classes to your css file.

 

Create a new text document in a text editor ( I use Notepad++ because it rulz!), but DO NOT use word pad or word, if you don't have something Notepad++ (or similur) then just use Notepad. Else you will get formatting you don't want. Ok now name it menu.php and add the following code;

<div id="menu">	<div id="list">		<ul class="menu">	<?php		include("connect.php"); 		$result = mysql_query("SELECT * FROM link_table");			while($row = mysql_fetch_array($result))			{			$link=$row['link'];			if ($link==$_SERVER['PHP_SELF']){				$class="white";			}else{				$class="standard";				}			echo "<li class='menu'><a class='" . $class . "' href='"  . $link . "'>Link Name</a></li>";			 			$row++; 			}			mysql_close($con);		?>		</ul>	</div></div>

Now right where you want your menu appear add this line;

<?php include("menu.php");?>

Now your index page, or web pages, will need to use an .php extension instead of .html for this to work btw,

 

The query loads the array varable $result with the list of links.

 

The while statement will return true, and runs as long as there is data, or in your case links in the array, and returns false when it reaches the end.

 

The $_Global "$_SERVER['PHP_SELF']" holds the value of the location (link) of the current document (webpage), so the link that matches in the conditional gets the white class applied. To add or remove links just add or delete them from the link_table.

Edited November 29, 2014 by Count_Zero

[Bert Coules]

Thanks so much for that. I'll have a play around with it and see how I get on.

[Count_Zero]

Check it again as I did an edit or two.

[Bert Coules]

OK, thanks.

[Jonathanks]

@ Count_ZeroThat's a clever way to do it using PHP, but CSS does this by default without having PHP's help. Of course, we still fall back to PHP since styling is involved and, in fact, our main aim. Using CSS saves you all the stress of creating new files in another language when you could just have it in one CSS file and it applies everywhere.Something like this:/*this should render the menu link that corresponds to the current page white in color*/ul.menu a:active {color:white;}Just an example to explain my humble opinion.

[Jonathanks]

@ Count_ZeroThat's a clever way to do it using PHP, but CSS does this by default without having PHP's help. Of course, we still fall back to PHP since styling is involved and, in fact, our main aim. Using CSS saves you all the stress of creating new files in another language when you could just have it in one CSS file and it applies everywhere.Something like this:/*this should render the menu link that corresponds to the current page white in color*/ul.menu a:active {color:white;}Just an example to explain my humble opinion.

[Jonathanks]

@ Count_ZeroThat's a clever way to do it using PHP, but CSS does this by default without having PHP's help. Of course, we still fall back to PHP since styling is involved and, in fact, our main aim. Using CSS saves you all the stress of creating new files in another language when you could just have it in one CSS file and it applies everywhere.Something like this:/*this should render the menu link that corresponds to the current page white in color*/ul.menu a:active {color:white;}Just an example to explain my humble opinion.

[Jonathanks]

Ouch! Sorry for the multiple posts. I had poor network coverage so it kept returning errors connecting while it had actually sent my post. Moderators, please delete the excess posts. Thank you.

[Bert Coules]

Jonathanks, thanks for your suggestion. My menu is not formatted as a list so presumably that bit of code won't work, but it's so splendidly simple that it might well be worth redoing my menu in list form so I can include it.

Edited November 29, 2014 by Bert Coules

[Count_Zero]

@Jonathanks

 

I totally agree that using css, and especially the psuedo class - element a:active, would be the propper way to do this, but I have also found that not all browsers, or browser versions that someone might be using support this feature, and as web developers we always seem to be working around some sort of cross browser complience issues or the other, right. But thanks to the many languages we now have at our disposal, and the cleverness of the human mind (well some anyhow, LoL); there is always more than one way to skin a rabbit. That being said I find you a person of interest, and from the content of your post someone that has a good working knowledge of the topic that I want to tap into. I find forums an awesome educational tool because of the ease in which one can share knowledge in an open source way. In other words they can become a virtual classroom. What I came up with for Bert was something I just pulled out of my head from the idea behind dsonesuk's post, but thought mine a more simple and cleanway to do it.

 

@BertCoules

 

You can do the same thing with your menu setup if you wanted to, and I will give you an example in a moment, but first let me say that the UL makes for the best menus, and there is a nice basic css navbar tutorial here; http://www.w3schools.com/css/css_navbar.asp .

 

You would have to have three columes in your table. You will need link, title, and name for each corrsponding link.

 

It would be something like this, but I did this quickly so there could be an error or two.

<div id="menu_bar">    <p class="menu">	<?php		include("connect.php"); 		$result = mysql_query("SELECT * FROM link_table");			while($row = mysql_fetch_array($result))			{			$link=$row['link'];			$title=$row['title'];			$name=$row['name'];			if ($link==$_SERVER['PHP_SELF']){				$class="white";			}else{				$class="standard";				}			echo "<a class='" . $class . "' href='" . $link . "title='" . $title ."'>" . $name . "</a>";			 			$row++; 			}			mysql_close($con);		?>	</p>  </div> <!-- menu_bar -->

Study php echo parameters and the append operators (. and .=) if you need clarification on how the output works.

Edited November 29, 2014 by Count_Zero

[Bert Coules]

Count_Zero, thanks again. I'll give your latest suggestion a try tomorrow.

[Count_Zero]

No problem Bert, and given time perhaps myself and Jonathanks can show you some examples of how you can do this with css along with a cross browser solution if necessary. What you have to get your head around in the above examples is that the browser doesn't see the php, rather php builds the html page on the server and sends the coded html page to the client (you and your browser) with the menu coded in html. I think I said that right.

Edited November 29, 2014 by Count_Zero

[dsonesuk]

If you are going to use unordered list for menu, place active class on list item, not anchor, it is easier to style active list item and anchor that way, it would be impossible to style list item from active class anchor using css only.Also why add active state class OR standard class? The standard class would represent normal state, I.E default styling applied when without the active state class, its not required.