...

View Full Version : Highlighting Current Page in menu



JustinChrono
05-11-2011, 03:42 PM
Can somebody help me out with this?
I am using Egesto as my theme, and automatically it came with a script that would highlight the current page in the top menu.
i think the code is one of these lines..


<?php if ( has_nav_menu( 'main-menu' ) ) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'menu_class' => 'mainnav superfish' ) ); ?>

Anyways, I wanted to make a customized drop down menu. So I removed that top line of code, and put in a line of code to refer to a plugin I downloaded. In the plugin is the HTML for the customized drop down menu...however, the current page is no longer highlighted in the menu..

I tried looking this up, seeing something about CSS and giving each link an id, and putting the id in the body tag of each page...HOWEVER, i can not find a body tag for each of my pages, as it is only in the HEADER of the overall website..

Can anyone help me with this?

THANK YOU!

JustinChrono
05-12-2011, 09:37 PM
bummpp

cineweekly.com
05-12-2011, 10:18 PM
Don't bump your thread so soon, it's only been a day. I'm guessing you're using Wordpress since you're using a theme and don't seem to know much about making a site from scratch but it looks like you're taking the long way around this. I use a highlight on the current page on the menu for a lot of my sites and it's pretty simple. Usually, the menu is in <ul> and I give the current page an id like this:
<ul>
<li>Not Current Page</li>
<li>Not Current Page</li>
<li id="currentPage">Current Page</li>
<li>Not Current Page</li>
</ul>

Then in the css I give #currentPage a background image or highlight of some kind. No PHP, plug-ins, or anything else involved.

JustinChrono
05-13-2011, 04:19 PM
Don't bump your thread so soon, it's only been a day. I'm guessing you're using Wordpress since you're using a theme and don't seem to know much about making a site from scratch but it looks like you're taking the long way around this. I use a highlight on the current page on the menu for a lot of my sites and it's pretty simple. Usually, the menu is in <ul> and I give the current page an id like this:
<ul>
<li>Not Current Page</li>
<li>Not Current Page</li>
<li id="currentPage">Current Page</li>
<li>Not Current Page</li>
</ul>

Then in the css I give #currentPage a background image or highlight of some kind. No PHP, plug-ins, or anything else involved.


thanks, but, how do i highlight only one page at a time? i only have one menu in html form, not one on every single page

raptorjgzus
05-13-2011, 04:40 PM
link site please

nischalinn
05-14-2011, 09:07 PM
I do have the same problem. I want to know how to highlight the current page in the Menu bar. Is it possible just by using HTML & CSS. How can I do it???

AndrewGSW
05-14-2011, 09:38 PM
I do have the same problem. I want to know how to highlight the current page in the Menu bar. Is it possible just by using HTML & CSS. How can I do it???
I take a similar approach to that already mentioned by cineweekly. I copy the nav bar between pages and just amend the current page to use a class "current" (and set its href to "#"). Within the css I change the text colour and cancel the link cursor for this class. Here's a whole page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<style type="text/css">
ul#navList { padding: 0; margin: 0.5em 0 1em 0; list-style-type: none; float: left;
width: 100%; color: #fff; background-color: #036;
}
ul#navList li { display: inline; text-align:center; }
ul#navList li a { float: left; color: #fff; background-color: #036;
padding: 0.2em 1em; text-decoration: none; border-right: 1px solid #fff;
}
ul#navList li a:hover {
background-color: #369; color: #fff;
}
#navList .current > a {
pointer-events: none; cursor: default; color: lightgray;
}
#navList .current > a:hover {
color: lightgray; background-color: #036;
}
</style>

</head>
<body>
<h1>Andy's Home Page</h1>
<ul id="navList">
<li class="current"><a href="#">Home</a></li>
<li><a href="GoSearch.html">Go Search</a></li>
<li><a href="Sorting.html">Sorting</a></li>
<li><a href="ReadingXML.html">Reading XML</a></li>
</ul>
</body>
</html>
It is possible to write some JavaScript to do this automatically (to examine the current window.location and compare it to the href addresses in the nav bar and add the class "current" to the current page link).

I'm not sure whether it's possible to do this with just css - I kinda doubt it ;)

teedoff
05-14-2011, 10:39 PM
The problem with these methods I think is if you're using a server side include for your menu code.

Here (http://codex.wordpress.org/Dynamic_Menu_Highlighting)might be a work around using php found on the wordpress site. Regardless if you're using wordpress or not, you can use this small bit of code and modify to suit your needs.

I think the method 1 is the one you would need. The php script checks the page title, and based on this, inserts the needed class/id and CSS to highlight the list item.

Hope that helps.

bazz
05-14-2011, 11:04 PM
that link posted by teedoff seems overly complicated in how it says the css must be on each page.

if your site is static - ie a html page for each well, page output, then you need to make the link in the nav menu have the class='current' assigned to it. then in your css use the type of css shown earlier this thread.

if your site is dynamic, you need only have each script find out what its name is . Then in your script output, you can say;

(pseudo code)
if ( $script_name eq 'whatever' ) {
print qq( <li class='current'>highlighted menu link</li> );
} else {

print qq( <li>non-highlighted menu link</li> );
}

Please ignore the coding discrepancies eg print qq(); as this is perl code and I don't yet do much php.


bazz

teedoff
05-14-2011, 11:13 PM
that link posted by teedoff seems overly complicated in how it says the css must be on each page.

if your site is static - ie a html page for each well, page output, then you need to make the link in the nav menu have the class='current' assigned to it. then in your css use the type of css shown earlier this thread.

if your site is dynamic, you need only have each script find out what its name is . Then in your script output, you can say;

(pseudo code)
if ( $script_name eq 'whatever' ) {
print qq( <li class='current'>highlighted menu link</li> );
} else {

print qq( <li>non-highlighted menu link</li> );
}

Please ignore the coding discrepancies eg print qq(); as this is perl code and I don't yet do much php.


bazz

Well the second method has the css in one document. Either of these methods seem to address the issue of having a ssi menu in the document, which must take into account that one cannot simply use the id/class="current" method.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum