3 replies [Last post]
shilpachowdary
Offline
newbie
Last seen: 9 years 24 weeks ago
Timezone: GMT-6
Joined: 2009-10-05
Posts: 4
Points: 5

Hello,

can someone please help me regarding highlighting a selected menu item.
my code is here

The menu is horizontally placed on the top of the page.
when you select one of those, sub menu will appear on the leftside of the page.

#TopNav {
	display: block;
	height: 2.25em;
	padding-left: 5px;
	background: #111 url(css/images/bg-navbar.jpg) repeat-x;
	border-top: 1px solid #818181;
	border-bottom: 1px solid #1f1f1f;
}
#TopNav li {
	height: 2.3em;
	width: 110px;
	text-align: center;
	float: left;
	white-space: nowrap;
}
#TopNav li a {
	display: block;
	padding: .6em 5px .5em 5px;
	font-size: 96%;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	}
#TopNav li.SelectedItem {
	height: 2.95em;
	margin-top: -.75em;
	margin: -.75em -3px 0;
	background: url(css/images/selected-button-left.png);background-repeat:repeat-x;
}
<div id="TopNav">
                <ul>
                    <li>
                        <a href="home.php">Home</a></li>
                    <li>
                        <a href="menu.php">Settings</a></li>
 
                    <li>
                        <a href="call.php">Call Log</a></li>
                   <li>
                    </ul></div>
 
            </div>
[code]
I have been trying different options like active, current, body id's...
but nothing worked. 

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 25 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Unclear

It looks like you want the current page to have that menu item highlighted?

If so, you were on the right track, but your HTML doesn't seem to show any of your li's having the "highlighted" class of "SelectedItem". If you use this method, you keep your current CSS but on each page, you add that class manually to the proper li tag.
<li class="SelectedItem"><a href="call.php">Call log</a></li> (on the call log page)

The body id technique is for when you need your menu HTML to always be the same (for instance if your menu is a chunk of HTML loaded by some PHP module). If you need to do that, each li would get its very own class, every time. So, a different class (or ID if you want) for each menu item, and then also each page's body gets its own ID. Then your CSS sheet is a bit larger: you need to write the highlighted styles, and list each combination of body ID and li class/ID:

#home li.home, #menu li.menu, #call li.calllog {
  highlight styles;
}

On the home page, the body gets the ID of "home", the menu page's body gets the ID of "menu", the call log page's body gets the ID of "call", and the menu on every page has
<li class="home"><a href="home.php">home</a></li>
<li class="menu"><a href="menu.php">menu</a></li>
<li class="calllog"><a href="calllog.php">call log</a></li>

I'm no expert, but I fake one on teh Internets

shilpachowdary
Offline
newbie
Last seen: 9 years 24 weeks ago
Timezone: GMT-6
Joined: 2009-10-05
Posts: 4
Points: 5

Hey thank you so much.... it

Hey thank you so much.... it worked for me.

<li class="SelecetedItem"></li>[code]
but what if want to optimize the web pages. 
for example the topmenu will be in every page so 
i placed that topnav div in one file called topmenu.php and wanted to include it in all the pages,
just saying [code]include ('topmenu.php');[code]
In that case, is there any other way..

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 hours 18 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9734
Points: 3813

Take a look at current page

Take a look at current page nav-link highlight.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.