1,105,169 Community Members

navigation using ul li: how to make one item selected?

Member Avatar
SelArom
Junior Poster in Training
54 posts since Oct 2004
Reputation Points: 9 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

greetings all, I'm trying to make a sidebar navigation using ul and li tags, and structurally it works fine, but I cannot seem to get one of the list items to appear "selected" so that it displays in a different color from the rest of the menu. Here's basically how it's laid out:

<div id="navigation">
	<ul>
		<li class="selected"><a href="link1.aspx">link 1</a></li>
		<li><a href="link2.aspx"link 2</a></li>
		<li><a href="link3.aspx">link 3</a></li>
	</ul>
</div>

and here's the css that goes with it

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

#navigation ul li
{
	background:url(images/rowBackSmall.gif) no-repeat;
	color: #FFFFFF;

}

#navigation li a
{
	font-size: 10px;
	line-height: 16px;
	display: inline;
	background-image:url(images/rowBackSmallB_Normal.gif);
	padding-left: 10px;
	background-position:left;
	background-repeat:no-repeat;
	text-decoration: none;
	color: #FFF;
}

li.selected a
{
	font-size: 10px;
	line-height: 16px;
	display: inline;
	background-image:url(images/rowBackSmallB_Event.gif);
	padding-left: 10px;
	background-position:left;
	background-repeat:no-repeat;
	text-decoration: none;
	color: #0099cc;
}

#navigation li a:hover
{
	padding-left: 10px;
	background-image:url(images/rowBackSmallB_Event.gif);
	background-position:left;
	background-repeat:no-repeat;
	color: #0099cc;
	text-decoration: underline;
}

no matter what I try, all the links render the same color, white. How do I override the individual .selected so that it renders differently?

thanks!

Member Avatar
autocrat
Posting Pro in Training
427 posts since Feb 2005
Reputation Points: 52 [?]
Q&As Helped to Solve: 12 [?]
Skill Endorsements: 0 [?]
 
0
 

Hmm... pause and think a moment.
Are you selecting a List Item... or a Link?

You should maybe be assigning the "selected" class to the <a> instead of the <li>?

Give that a go, and see how you fair.

Member Avatar
SelArom
Junior Poster in Training
54 posts since Oct 2004
Reputation Points: 9 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

thank you for your reply. actually I had considered this route, but it is the list item that is selected, not the link, at least logically that is how it makes sense to me. the link may change but that item is the one that is selected. so shouldn't I assign the list item to be selected, then it's <a> would then be modified by li .selected a. at least that's how it makes sense to me...

further, i may not make the selected item a link. if they select that link, sometimes I may render it as just text, but i still want it to be a different color...

Member Avatar
autocrat
Posting Pro in Training
427 posts since Feb 2005
Reputation Points: 52 [?]
Q&As Helped to Solve: 12 [?]
Skill Endorsements: 0 [?]
 
0
 

Fair enough.

www.soldiers-league.com
have a look at that one

Member Avatar
MidiMagic
Nearly a Senior Poster
3,404 posts since Jan 2007
Reputation Points: 556 [?]
Q&As Helped to Solve: 215 [?]
Skill Endorsements: 2 [?]
 
0
 

Selected is not an attribute. Focus is a pseudoclass.

Member Avatar
tainak
Newbie Poster
1 post since Jan 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi,

Spent a while trying other options on my site and came up with putting the ul as part of the answer and fitting the class=selected within <a>:

in CSS

ul a.selected
{
	font-size: 10px;
	line-height: 16px;
	display: inline;
	background-image:url(images/rowBackSmallB_Event.gif);
	padding-left: 10px;
	background-position:left;
	background-repeat:no-repeat;
	text-decoration: none;
	color: #0099cc;
}

in HTML

<div id="navigation">
  <ul>
		<li><a href="test.html">link 1</a></li>
		<li><a href="test2.html" class="selected">link 2</a></li>
		<li><a href="test3.html">link 3</a></li>
  </ul>
</div>

Hopefully works for you too,
Taina

Member Avatar
almostbob
Nearly a Senior Poster
3,381 posts since Jan 2009
Reputation Points: 515 [?]
Q&As Helped to Solve: 424 [?]
Skill Endorsements: 14 [?]
 
0
 

css has states for all elements as psuedo(?cantspell)classes
<element>
<element>:hover
<element>:active
<element>:focus
<element>:first-line
<element>:first-letter and others
active and focus mean pretty much the same thing but account for browser differences
selected='selected' for a <li> has nothing to do with presentation, it is a method of defining the default choice

li a { color:red; }
li a:hover { color:yellow; background:red; } //mouseover
li a:focus { color:white; background:green; } // roughly = Selected
li a:active { color:white; background:green; } // roughly = Selected

excusing disgusting colors
any parent child (anything) combination can be <element>

edit**

Focus is a pseudoclass

knew I can't spell that word

Member Avatar
mhdilan
Newbie Poster
2 posts since Jul 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

HTML Part,. Place this part on body section

<div id="nav">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
    </ul>


</div>

CSS Part,.Place this on the css file

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

#nav ul li{
background-color:#999999;
float:left;
margin-right:1px;
text-align:center;
}

#nav ul li a{
background-image:url(bh.gif);display:inline;
display:block;
width:150px;
height:40px;/*height - (height size- top padding size), (40px = 50px-10px) */
padding:10px 0px 0px 0px;
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
#nav ul li a:hover{background-image:url(bg2.gif);}
Member Avatar
Troy III
Practically a Posting Shark
891 posts since Jun 2008
Reputation Points: 174 [?]
Q&As Helped to Solve: 119 [?]
Skill Endorsements: 10 [?]
 
0
 

I suggest you study this code at http://www.daniweb.com/web-development/web-design-html-and-css/code/226127/pure-css-image-gallery-with-mouse-click-swap and see what you come up with.

pick the updated (html5 & back.comp.) code from the last post to play with. May give you some advanced ideas on how to.

Member Avatar
tomparker
Newbie Poster
20 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
1
 

There's a fairly simple solution to this. Assign an id to your list items in your html on each page, and then just ad one entry to your css as follows. The example below changes the Home page link color from off-white to gray. (also underlines on hover)

<div id="nav-bar">
    <ul>
      <li id="selected"><a href="index.html">Home</a></li>
      <li><a href="page2.html">Page2</a></li>
      <li><a href="page3.html">Page3</a></li>
    </ul>
</div>


#nav-bar ul {
    float : left;
    list-style : none;
    margin : 0;
    padding : 0;
}

#nav-bar ul li {
    display : inline;
}

#nav-bar ul li a {
    display: inline;
    float : left;
    padding : 0 10px;
    color : #EDEDED;
    text-decoration : none;
}

#nav-bar ul li a:hover {
    color : #AAAAAA;
}

#nav-bar ul li#selected a {   /* this changes color of the menu item of current page */
    color : #AAAAAA;
}
Member Avatar
<M/>
Industrious Poster
4,472 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
0
 

@tomparker, i think by now... after 4 years, he probably knows how to solve his question :)

Member Avatar
<M/>
Industrious Poster
4,472 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
0
 

nor is he going to mark this solved after 4 years...

Member Avatar
tomparker
Newbie Poster
20 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
1
 

@michael I'm sure the original person who posted found a solution a long time ago. I added this solution for other's who may be searching today. I often find answers to problems in forums where the thread was started years prior. Just putting in my two cents! :)

Member Avatar
<M/>
Industrious Poster
4,472 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
0
 

@tomparker, i do realize you did that, but what amazes me most is why don't people google first... (they can google kittens playing but they can't search anything technical ever...)

Member Avatar
tomparker
Newbie Poster
20 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
1
 

@michael Actually, Google is how I came across this thread. I was experiencing a 'flakey' problem with a menu I was working on, and searched Google to see if I could find something where someone else had a similar problem.

After viewing a couple of the results, I just went back to one of my prior projects, to see what I had done differently there. I suppose I should have just done that first, but I was thinking that what I was doing on the current project WAS the same as I did before, but that I was just missing something. Anyway... bottom line, turns out I wasn't doing it exactly as I had before, and by duplicating my original code, resolved the problem...so.. I posted the code here.

I do know exactly what you mean though about people not taking the time to researching on their own, before they post questions on forums. Many times the answer is all over the place on the net. Just Google It! ha

btw, I saw one very 'complicated' solution on another site, so that was a reason for me posting here, even though the thread is old.

Member Avatar
<M/>
Industrious Poster
4,472 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
0
 

btw, I saw one very 'complicated' solution on another site, so that was a reason for me posting here, even though the thread is old.

Well that is reasonable :)

Member Avatar
<M/>
Industrious Poster
4,472 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
0
 

Also notice that the person who asked the question never came back after 3 years to mark the question solved...

Member Avatar
Cobra98
Newbie Poster
5 posts since Feb 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I came across this thread looking for an answer to almost the exact information that is here. I'm not brand new at this but new enough that I certainly could use some help. I'm trying to duplcate a horizontal nav menu like the one that a developer I had working for me did on my pages. He is gone now (quit) so I'm trying to work this out myself. Anyway this is what I'm trying to duplicate.

<div id="nav">
        <ul class="nav">


                <li><a href="/index.php" class="selected">Home</a></li>
        <li><a href="/custom-t-shirt-design-ideas.htm" class="">Shirt Designs</a></li>
        <li><a href="/product-catalog.htm" class="">Products</a></li>
        <li><a href="/faq.htm" class="">FAQs</a></li>
        <li><a href="/designer.htm" class="">Design Studio</a></li>
        <li><a href="/contact-us.htm" class="">Contact Us</a></li>

        </ul>

</div>

I don't understand the ul class. All the information I look at none of it has this included.If anyone is willing to help then I can show you the page he create and what I'm trying to duplicate.

Thanks in advance

Member Avatar
tomparker
Newbie Poster
20 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
0
 

@Cobra98 I'll be glad to help. If you take a look at the code that I posted a couple of weeks ago you will see that your html is very similar.

As far as understanding the ul class, I'll get to that, but first of all what might be causing some confusion is that in your code the div has an id of 'nav', and your ul has a class of 'nav'. That will work, but it makes it really easy to make a mistake and get the two confused in your css file.

When you refer to an id in your css file, precede it with a '#" and when you refer to a class in your css file, you precede it with a '.' So in your present case you will have a #nav { ...properties for your div ...}; and a .nav { ...properties for your ul..};

As a rule of thumb, use an id for things that will only be used once in the document, and a class for things that may be applied to multiple elements. An id can only be used once, but sometimes you will see a class used for something that could have been an id(just used once)... make sense?

I suggest that in your html as shown above, first...change your ul class name to something else, like 'navList', just to help avoid avoid a possible mistake in your css.

second... change class='selected' to id='selected' (you will never have more than one selected).

third... your css for the selected element will look like this: (similar to my code above)

#nav ul li#selected a { /* this changes color of the menu item of current page */
color : #AAAAAA;
}

Notice how the '#selected' is attached to the li.

Hopefully that will get you on your way. Let me know how it goes.

One more thing, just a heads up...where you have a '/' in front of your file names in your hrefs, that's fine if all the files referenced in your menu are at your root directory on your server, but be aware if you are working in a subdirectory, that the '/' points to your root directory. So for instance if you have a 'dev' or 'test' area, ie dev.mysite.com or mysite.com/dev where you are developing, then '/index.php' points to mysite.com/index.php, not mysite.com/dev/idex.php. No extra charge for that tip! ;)

Member Avatar
Cobra98
Newbie Poster
5 posts since Feb 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Thank you @tomparker for the info! Actullay the code that I listed isn't code that I wrote. The programmer that created my site wrote everything. I can't change anything because he created a custom CMS. I have access to all the files on the server but I cannot figure out what goes with what.

I did figure out the nav for the page I am trying to duplicate with the exception of a rollover effect that he has going on in the nav. I know how to add a a:hover to my nav id but my hover is only changing color to the link text and a background for the link text. When you hover his, the entire button changes. I don't know if he used a mouseout Imageswap or not. I don't think he did because I do not see it in the page source. He is doing something else. Each li only has a broder and no backgroud color but when you hover the li turns orange. Not just the broder but the background and border. I'm stumped right now. To tell you turth I'm afraid to try to many different things for fear of messing up what I've already done but I know I'll never figure it out if I don't.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article