PDA

View Full Version : Menu item clicked and colour remains



alex57
Apr 18th, 2009, 12:48 AM
Hello,

I wonder if anyone can help me. I have a menu on my website and I use css a:hover to change the color of the menu item when the cursor is over it. Ideally when the item is clicked I would like this color to remain on the new page which loads so it indicates which page has been chosen. The menu is consistent throughout the site.

How is this possible please?

Many thanks

Camron467
Apr 18th, 2009, 01:23 AM
I am going to assume you are using CSS and XHTML to achieve this, your going to want to create a id which I will name a#selected then you put the color you want it it be, so it might look like this:


a#selected {
background-color: #000;
color: #FFF;
}

then add id="selected" to the <a href= code you are using. Then, look! that's the only one with a different color.

alex57
Apr 18th, 2009, 01:50 AM
Hello,

I don't think that is what i am looking for. Imagine I have a web page with a menu. When i click on a menu item I want the new page to load and the menu item i selected to become a colour.

What you suggested would just change the colour of the item but not when it is used to click onto a new page.

Camron467
Apr 18th, 2009, 02:18 AM
some code or a link to the page you are looking at would be needed.
Thanks,
Camron

Fisher
Apr 18th, 2009, 02:25 AM
What Camron467 posted is what you want to use.

Here's an example with the navigation from what would be 4 different pages:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.nav ul, .nav li {
display:inline;
}
.nav a {
color:#ffF;
background:#396;
}
.nav a:hover {
color:#FF0;
background:#C36;
}
.selected a {
color:#FF0;
background:#C36;
}
</style>
</head>
<body>
<ul class="nav">
<li class="selected"><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
</ul>
<ul class="nav">
<li><a href="page1.html">Page1</a></li>
<li class="selected"><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
</ul>
<ul class="nav">
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li class="selected"><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
</ul>
<ul class="nav">
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li class="selected"><a href="page4.html">Page4</a></li>
</ul>
</body>
</html>

venegal
Apr 18th, 2009, 04:16 AM
You will probably want to automate the above code server side, so you don't have to customize the navigation for each and every page and just include it.

alex57
Apr 18th, 2009, 11:39 AM
Hello,

Camron467 I understand what you were saying now, that would have worked but unfortunately I use a php include for the menu on every page.

A link to a sample page is here: http://www.thinkbackpacking.com/Site2/index.php

I havent uploaded some of the graphics yet but you can see the menu. As I said there is only one menu which is called in by a php include call.

I think what Venegal about automating the code server side was the answer but I cannot see how i could do this.

Thanks

venegal
Apr 18th, 2009, 02:07 PM
Well the php you include will have to know which menu item the page that's including it wants selected. You could put that information in a variable before the include call, e.g. $page = "page_photography";.

Inside your menu php, you set $$page = ' class="selected"', so now there is a variable called $page_photography holding the string ' class="selected"'.

Instead of
<li class="selected"><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
in Fisher's example you can now use

<li<?php echo $page_home ?>><a href="page1.html">Page1</a></li>
<li<?php echo $page_photography ?>><a href="page2.html">Page2</a></li>
<li<?php echo $page_travelblog ?>><a href="page3.html">Page3</a></li>
<li<?php echo $page_bookhostels ?>><a href="page4.html">Page4</a></li>
and so on.

abduraooft
Apr 18th, 2009, 02:10 PM
Have a look at http://www.codingforums.com/showpost.php?p=605564&postcount=3

alex57
Apr 19th, 2009, 08:49 PM
thanks guys. got it sorted using the php $_GET method and several if statements. Not ideal but does the job.

t_schwarz
Oct 2nd, 2009, 04:12 AM
I am definitely an ajax novice, but I do know some sql, vb.net and actionscript 3.

I have set up a page div'd into 2 sections. The left section has a menu and the right has the content. I am updating a content object with html via javascript and it is working fine, but since the menu(left) side div never refreshes I cannot figure out how to show a selected state for the menu selection chosen.

Any advice is more than welcome.

Thanks,

T

<script type="text/javascript">

function updateObjectIframe(which,nm){
document.getElementById('stuff').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';

document.getElementById("content").style.backgroundImage = "url("+nm+")";

}
</script>


#menu {
width: 125px;
border-style: solid solid none solid;
border-color: #94AA74;
border-width: 0px;
position: relative;
top:0px;
}

#menu ul{
list-style:none;
padding:0px;
margin:0px;
}

#menu li a {
height: 32px;
height: 24px;
text-decoration: none;
font-weight:normal;
}

#menu li a:link, #menu li a:visited {
color: #333333;
display: block;
background: url(images/menu1.gif);
background-repeat:no-repeat;
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #26370A;
text-decoration: underline;
font-weight:bold;
background: url(images/menu1.gif) 0 -32px;
background-repeat:no-repeat;
padding: 8px 0 0 10px;
}

#menu li a:active {
color: #333333;
text-decoration: underline;
font-weight:bold;
background: url(images/menu1.gif) 0 -64px;
background-repeat:no-repeat;
padding: 8px 0 0 10px;
}

#menu li a:selected {
color: #868686;
text-decoration: underline;
font-weight:bold;
background: url(images/menu1.gif) 0 -50px;
background-repeat:no-repeat;
padding: 8px 0 0 10px;
}

<div id="menu">
<ul id="menus">

<li class="home"><a href="ashome.html" onClick="var nm = 'images/brndHome.jpg'; updateObjectIframe(this,nm);return false;">Home</a></li>

<li class="apps"><a href="asapps.html" onClick="var nm = 'images/brndApps.jpg'; updateObjectIframe(this,nm);return false;">Applications</a></li>

<li class="patterns"><a href="aspatterns.html" onClick="var nm = 'images/brndPatterns.jpg'; updateObjectIframe(this,nm);return false;">Patterns</a></li>

<li class="tech"><a href="astech.html" onClick="var nm = 'images/brndTech.jpg'; updateObjectIframe(this,nm);return false;">Technical</a></li>

<li class="contact"><a href="ascontact.html" onClick="var nm = 'images/brndContact.jpg'; updateObjectIframe(this,nm);return false;">Contact</a></li>

</ul>
</div>