I've got a site with a top menu (main-nav.php) and a sidemenu (menu.php) which are both loaded using php include, and I need to figure out if there's a way to use php/css to highlight BOTH the main section in the top menu AND the page (and section) in the side menu? The top menu uses ul/li tags because it's part of a larger jQuery menu, but the side menu is just links and classes.
I had started setting it up to use an id in the body to identify the section for both menus, but then I realized that it won't work to also highlight the individual page in the side menu.
Any ideas out there on how to do this??
Also, ideally, I want to make the side menu only display the sub-menu for the section if it's selected (for example, if you select Section 2, the Section 1 sub-menu will not display).
I set up a quick and dirty, very stripped down test page at:
http://brianwpiper.com/tstMenus/index.php
I've used css before, but not to drive menus like this, and not this tied into php.
Thanks for any tips, tutorials, general shoves in the right direction!!
Indicate current section AND page in menus?
Moderator: General Moderators
- phdatabase
- Forum Commoner
- Posts: 83
- Joined: Fri May 28, 2010 10:02 am
- Location: Fort Myers, FL
Re: Indicate current section AND page in menus?
There's a million ways to do this and the 'best' way will depend on your overall methods.
If you use query strings to direct traffic you can test the $_GET array. If you are page dependent you can read and process the script name. If it's really hard coded you can have a $page variable on every page to tell the inlcudes where they are. It will most probably be a CSS solution, setting an attribute according to test results. So without knowing more about how you are planning to structure your site it's tough to say exactly.
If you use query strings to direct traffic you can test the $_GET array. If you are page dependent you can read and process the script name. If it's really hard coded you can have a $page variable on every page to tell the inlcudes where they are. It will most probably be a CSS solution, setting an attribute according to test results. So without knowing more about how you are planning to structure your site it's tough to say exactly.
Re: Indicate current section AND page in menus?
phdatabase, thanks! I do have the pages hard-coded, so I'm not using a query string. I've looked into several ways to do this, but haven't found one that will let me indicate BOTH the section AND the page. I'm pretty sure you can't use two id in the body tag (for example <body id="section 1" id="page 1"> )
I guess I'm just not sure how to make two menu buttons "active" at the same time, or to "tag" a page with both section and page identifiers...
Thanks!
I guess I'm just not sure how to make two menu buttons "active" at the same time, or to "tag" a page with both section and page identifiers...
Thanks!
-
shawngoldw
- Forum Contributor
- Posts: 212
- Joined: Mon Apr 05, 2010 3:38 pm
Re: Indicate current section AND page in menus?
just declare in the page
$page = "home";
or
$page = "aboutus";
or whatever.
Then in both the menus say
if(strcmp($page, 'home')
print class='selected';
So you declare which page you are on, and then in the menus you apply a css class to the appropriate page based on the page declaration.
$page = "home";
or
$page = "aboutus";
or whatever.
Then in both the menus say
if(strcmp($page, 'home')
print class='selected';
So you declare which page you are on, and then in the menus you apply a css class to the appropriate page based on the page declaration.
Re: Indicate current section AND page in menus?
Yeah, except, I need to show BOTH the section AND page...
I think I got it figured out. I just declare 2 php variables on each page, section and page and then make the menus display the active state based on those variables.
http://brianwpiper.com/tstMenus/section1.php
Now, I just need to make the sub-menus on the side menu only display when that section is selected...not sure how to wrap another php if statement around the css one...
Here's what I currently have for the menu.php:
So, I need to conditionally display the page 1 and page 2 links under section 1 only when section 1 is selected....
hmmm....
I think I got it figured out. I just declare 2 php variables on each page, section and page and then make the menus display the active state based on those variables.
http://brianwpiper.com/tstMenus/section1.php
Now, I just need to make the sub-menus on the side menu only display when that section is selected...not sure how to wrap another php if statement around the css one...
Here's what I currently have for the menu.php:
Code: Select all
<td width="300" valign="top" bgcolor="#f2f2f2"><table width="300" border="0" cellspacing="5" cellpadding="0">
<font color="#000">This is the menu.php file which uses a href with classes "sidemenu" and "sidemenuSub"</font>
<!--<a{if segment_1 == "home"} class="active"{/if} class="sidemenu" href="#">Side menu section 1</a>-->
<a<?php if ($thisSection=="Section 1")
echo " class=\"currentPage\""; else
echo " class=\"sidemenu\""; ?>
href="section1.php">Side menu section 1</a>
<a<?php if ($thisPage=="Page 1")
echo " class=\"currentPageSub\""; else
echo " class=\"sidemenuSub\""; ?>
href="sec1page1.php">Side menu page 1</a>
<a<?php if ($thisPage=="Page 2")
echo " class=\"currentPageSub\""; else
echo " class=\"sidemenuSub\""; ?>
href="sec1page2.php">Side menu page 2</a>
<a<?php if ($thisSection=="Section 2")
echo " class=\"currentPage\""; else
echo " class=\"sidemenu\""; ?>
href="section2.php">Side menu section 2</a>
</table></td>hmmm....
Re: Indicate current section AND page in menus?
Code: Select all
<td width="300" valign="top" bgcolor="#f2f2f2"><table width="300" border="0" cellspacing="5" cellpadding="0">
<font color="#000">This is the menu.php file which uses a href with classes "sidemenu" and "sidemenuSub"</font>
<!--<a{if segment_1 == "home"} class="active"{/if} class="sidemenu" href="#">Side menu section 1</a>-->
<a<?php if ($thisSection=="Section 1")
echo " class=\"currentPage\""; else
echo " class=\"sidemenu\""; ?>
href="section1.php">Side menu section 1</a>
<?php
if ($thisSection=="Section 1") {?>
<a<?php if ($thisPage=="Page 1")
echo " class=\"currentPageSub\""; else
echo " class=\"sidemenuSub\""; ?>
href="sec1page1.php">Side menu page 1</a>
<a<?php if ($thisPage=="Page 2")
echo " class=\"currentPageSub\""; else
echo " class=\"sidemenuSub\""; ?>
href="sec1page2.php">Side menu page 2</a>
<?php }; ?>
<a<?php if ($thisSection=="Section 2")
echo " class=\"currentPage\""; else
echo " class=\"sidemenu\""; ?>
href="section2.php">Side menu section 2</a>
</table></td>