PDA

Click to See Complete Forum and Search --> : Advantage of using <ul> for menus?

tiki16
03-21-2008, 02:59 PM
Hello I was just wondering what the advantage is to use unordered lists for menus as opposed to just setting up a menu in containers for each menu item?

Also, is there a way I can have a text link change colour depending on which page it is on? Let's say i click on a contact page and I want the contact link text to appear a different colour than the text on the rest of the menu. I have seen it done with images and the <body> tag.
cheers
Steve
jeremu
03-21-2008, 04:18 PM
I like using <ul> for menus because in reality a menu is just a list of links.

Also, is there a way I can have a text link change colour depending on which page it is on? Let's say i click on a contact page and I want the contact link text to appear a different colour than the text on the rest of the menu.

There are many ways to do that.
The way I do it is ... if I code a static page (No server-side programming) I use css.

I just add a style called selected ... like:
.selected { font-weight:bold; text-decoration:none; }

then I add that class to my link:
<li><a href="#" class="selected">Link</a></li>
WebJoel
03-21-2008, 05:24 PM
User-agents for the handicapped (the blind) recognize "ul" as a "list" of whatevers... and it 'speaks' that fact to the listener. Without this, the series of 'links' would be, essentially, random (found by the user via random mouse-movements or TAB-clicks...)...
.. like, you, buying a book with the pages not attached to the binding ('loose-leaf'), and not numbered either. -The story *is there*, -you just don't get the benefit of any linear progression... it's a hodgepodge of 'pages' not organized into anything truly meaningful. The "ul" like like a chapter with the pages 'numbered'.:)
jeremu
03-21-2008, 05:54 PM
Thanks WebJoel. I should know that. I guess I failed that one on the quiz.
tiki16
03-22-2008, 08:28 AM
Thanks guys, jeremu I wanted the text to change to a different colour than the rest of the menu when you are on the page of the link you clicked, not when you click the link.
Thnx
jeremu
03-22-2008, 11:56 AM
Ok.... this might be a lot of code, but I don't think I can explain it any better.

default.css:

#navigation .seclected {font-weight:bold;}


page1.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<head>

<body>
<a href="#body"><img src="p.gif" alt="Skip Navigation"></a>

<ul id="navigation">
<li><a href="page1.html" class="selected">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
</ul>

<a name="body"></a>
<div id="body">Page Content</div>
</body>

</html>


page2.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<head>

<body>
<a href="#body"><img src="p.gif" alt="Skip Navigation"></a>

<ul id="navigation">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html" class="selected">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
</ul>

<a name="body"></a>
<div id="body">Page Content</div>
</body>

</html>


page3.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<head>

<body>
<a href="#body"><img src="p.gif" alt="Skip Navigation"></a>

<ul id="navigation">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html" class="selected">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
</ul>

<a name="body"></a>
<div id="body">Page Content</div>
</body>

</html>
jeremu
03-22-2008, 11:57 AM
That's just one of many ways you can do it.
Declan1991
03-22-2008, 04:51 PM
That's just one of may ways you can do it.
Indeed. Mine is kind of similar. I put an id on each of the links, as well as on each of the body tags. Then it is easy to single out each link. Since I use PHP to include the navigation on each page, this works perfectly for me.
jeremu
03-24-2008, 02:26 PM
Did we answer your question tiki16?
tiki16
03-26-2008, 12:41 PM
Yes thanks. I now am trying to get a background image to display behind the menu depending on which page has been clicked. The background encompasses all of the links in the menu because of the way it is designed. So ihave to have 5 full back ground menus. It would be easy if it were for just each link.
cheers
steve
jeremu
03-28-2008, 01:20 PM
Ok... here you go:


#navigation .selected {font-weight:bold;}
#navigation.nav1 {background-image:url("myImage1.gif");}
#navigation.nav2 {background-image:url("myImage2.gif");}
#navigation.nav3 {background-image:url("myImage3.gif");}
#navigation.nav4 {background-image:url("myImage4.gif");}


page 1:

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<head>
<body>
<a href="#body"><img src="p.gif" alt="Skip Navigation"></a>
<ul id="navigation" class="nav1">
<li><a href="page1.html" class="selected">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
</ul>
<a name="body"></a>
<div id="body">Page Content</div>
</body>
</html>


page 2:

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<head>
<body>
<a href="#body"><img src="p.gif" alt="Skip Navigation"></a>
<ul id="navigation" class="nav2">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html" class="selected">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
</ul>
<a name="body"></a>
<div id="body">Page Content</div>
</body>
</html>


page 3:

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<head>
<body>
<a href="#body"><img src="p.gif" alt="Skip Navigation"></a>
<ul id="navigation" class="nav3">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html" class="selected">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
</ul>
<a name="body"></a>
<div id="body">Page Content</div>
</body>
</html>
jeremu
03-28-2008, 01:22 PM
I am open to feedback on better/different ways to do this (with static HTML and CSS.)
jeremu
03-31-2008, 12:27 PM
Did we answer your question?
tiki16
04-01-2008, 08:09 AM
Hi Jeremu,
Ya it looks like it will work.
cheers
tiki16
04-01-2008, 03:24 PM
I spoke to soon as there are problems. The white text appears in ff but not ie7. The mouse over colors are still grey. I have been trying alot of variations of css but so far this is the best i can do.
Html:
<div id="pmenu">
<ul id="pmenu" class="ptopics">
<li><a href="#" class="pcurrent">Topics</a></li>
<li><a href="#">Media</a></li>
</ul>
</div>

Here is the css:
#pmenu{ float:left; width:227px; height:25px; padding:5px 0 0 0px; }
#pmenu ul {text-align:left; padding:5px 0 0 5px;}
#pmenu li {float:left; margin:0 .9em 0em 1.2em;background:none;font-size: 1.2em/1.5; /*11px*/ /*15px*/}
#pmenu li a { float:left; margin:0 .6em .2em; font-size:1.2em;color:#999999; display:block; text-decoration:underline;}
#pmenu li a:hover {color:#999999; text-decoration:none;}
#pmenu li a:active {color:#999999; text-decoration:underline;}
#pmenu li .pcurrent{color:#FFF; text-decoration:none;}
#pmenu li .pcurrent a, visited, active, hover {color:#FFF; text-decoration:none;}

#pmenu .pmedia {background:url(images/pmenu_media.gif) no-repeat;}
#pmenu .ptopics {background:url(images/pmenu.gif) no-repeat;}

thanks
jeremu
04-01-2008, 04:17 PM
Are you attempting to create a vertical or horizontal nav?
One thing I see right away is that you cannot have two items with the same id.

<div id="pmenu">
<ul id="pmenu" class="ptopics">
tiki16
04-01-2008, 04:37 PM
Same problems persist when i remove ul id

<div id="pmenu">
<ul class="ptopics">

I am not sure that this will work and may have to used the long way.
Steve
jeremu
04-01-2008, 04:51 PM
Did you want a vertical nav or horizontal?
tiki16
04-01-2008, 05:00 PM
Sorry, it is a horizontal menu. There are going to be a few of them throughout the site some have 2 menus up to 8 menu items.
thanx
LouPhi
04-02-2008, 09:56 AM
This is a helpful thread.. but what happens if you want the current page to show its status in the menu in a different colour/style, but the pages use a template, which is where the menu sits? Is there any way to get the page/browser to know which link is relative to the page viewed?

I'm guessing this is either not possible, or complicated... but any pointers would be gratefully received!

LP
tiki16
04-02-2008, 11:48 AM
This seems to be working:
CSS:
#pmenu{ float:left; width:227px; height:25px; padding:5px 0 0 0px; }
#pmenu ul {text-align:left; padding:5px 0 0 5px;}
#pmenu li {float:left; padding:0 0 0 3em; font-size:1.2em/1.5;color:#999999; display:block; text-decoration:underline;}
#pmenu li a:link {color:#999999; text-decoration:underline; font-size:1.2em/1.5}
#pmenu li a:visited {color:#999999; text-decoration:underline; font-size:1.2em/1.5}
#pmenu li a:hover {color:#999999; text-decoration:none; font-size:1.2em/1.5}
#pmenu li a:active {color:#999999; text-decoration:underline; font-size:1.2em/1.5}
#pmenu .pmedia {float:left; width:227px; height:25px;background:url(images/pmenu_media.gif) no-repeat;}/*control bg image */
#pmenu .ptopics {float:left; width:227px; height:25px;background:url(images/pmenu.gif) no-repeat;}/*control bg image */
#pmenu #current {color:#fff; text-decoration:none; font-size:1.2em/1.5;} /* active page no mouseover on link font #fff */
#pmenu #current li a:active {color:#fff; text-decoration:none; font-size:1.2em/1.5;}


HTML:
<div id="pmenu">
<ul class="ptopics">
<li id="current">Topics</li>
<li><a href="#">Media</a></li>
</ul>
</div>

The only problem i see at the moment is that the hover style text decoration none doesn't apply in firefox and it stays underlined. Otherwise it works in IE7 to 5.5.
thanks
tlflow
04-10-2008, 08:37 AM
I like using <ul> for menus because in reality a menu is just a list of links.



There are many ways to do that.
The way I do it is ... if I code a static page (No server-side programming) I use css.

I just add a style called selected ... like:
.selected { font-weight:bold; text-decoration:none; }

then I add that class to my link:
<li><a href="#" class="selected">Link</a></li>


I'm using <ul> listing to list my menus but I'm using Joomla CMS so I dont have access to move the class to whatever link I want to. Is there a way I can do this using javascript -maybe off of the location.href or something?
turboraketti
04-10-2008, 08:48 AM
#pmenu li .pcurrent a, visited, active, hover {color:#FFF; text-decoration:none;}
This looks invalid... I think you must write:
#pmenu li .pcurrent a, #pmenu li .pcurrent a:visited, #pmenu li .pcurrent a:active, #pmenu li .pcurrent a:hover {color:#FFF; text-decoration:none;}