Johnny4B Posted August 19, 2012 Report Share Posted August 19, 2012 Hi Specifically joined to learn php, so starting with the basics and completed the first course last night, great course, and well reaffirmed the basics what I kind off knew, but one little issue with includes. How to handle navigation includes that have a html class associated to highlight that menu tab within the website itself For example, my menu has a class associated to the relevant page, so if I am on the index page, the <li> has a class "current menu item" - so on that webpage the home tab is a different colour to the other tabs, and so on for the about page, contact page etc. If I create an include file as indicated in the tutorial as I did here as shown below <li class="current-menu-item"><span class="menuslide"></span><a href="index.html" title="Home">Home<span class="menu_description">Beginning</span></a></li> <li><span class="menuslide"></span><a href="about.php" title="About">About<span class="menu_description">About</span></a></li> When the include is shown within the about page, the tab on the index page is still highlighted as the include is still calling the current menu item as the index page. Is there a way with a variable or another way someone might be able to let me know how to handle this Regards John Quote Link to comment Share on other sites More sharing options...
khanahk Posted August 19, 2012 Report Share Posted August 19, 2012 (edited) It's hard to tell what you're actually going for without seeing your code. Can you post a snippet of all this in action? In any case, I have achieved what I believe you're going for using purely HTML and CSS before.. You can assign each page on your website associated with a nav link a <body class="page1"> and so on, and in the navigation PHP include file simply assign an identifying class to each of your links, like <ul class="nav"> <li><a class="page1" href="page1.php">page1</a></li> <li><a class="page2" href="page2.php">page2</a></li> <li><a class="page3" href="page3.php">page3</a></li> </ul> And then create the CSS rules in your stylesheet: a {color: black;} /* default link color */ /* change link to red if we're on that page */ body.page1 a.page1 { color: red; } body.page2 a.page2 { color: red; } body.page3 a.page3 { color: red; } ---- If you REALLY want to do it by dynamically assigning a class to the nav link, you'll need jQuery's .addClass() and .removeClass(). But you may want to keep it simple Edited August 19, 2012 by khanahk Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 19, 2012 Report Share Posted August 19, 2012 Another way that you could do it would be to have a PHP function that returns or displays the navigation, and would set the active nav item based on whatever was passed in as an argument: function create_nav($active) { $nav = ''; if ($active == 'home') { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">Home</a></li>'; if ($active == 'about') { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">About</a></li>'; if ($active == 'contact') { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">Contact</a></li>'; return $nav; } echo create_nav('home'); Quote Link to comment Share on other sites More sharing options...
Johnny4B Posted August 19, 2012 Author Report Share Posted August 19, 2012 It's hard to tell what you're actually going for without seeing your code. Can you post a snippet of all this in action? In any case, I have achieved what I believe you're going for using purely HTML and CSS before.. You can assign each page on your website associated with a nav link a <body class="page1"> and so on, and in the navigation PHP include file simply assign an identifying class to each of your links, like <ul class="nav"> <li><a class="page1" href="page1.php">page1</a></li> <li><a class="page2" href="page2.php">page2</a></li> <li><a class="page3" href="page3.php">page3</a></li> </ul> And then create the CSS rules in your stylesheet: a {color: black;} /* default link color */ /* change link to red if we're on that page */ body.page1 a.page1 { color: red; } body.page2 a.page2 { color: red; } body.page3 a.page3 { color: red; } ---- If you REALLY want to do it by dynamically assigning a class to the nav link, you'll need jQuery's .addClass() and .removeClass(). But you may want to keep it simple Wow, how the hell did I not think of that, just create separate classes for each page and assign them in the include .... I am almost ashamed to admit how long I have been building websites .... I put it down to the fact I was trying to do it using php, as opposed to just using the style sheet .... Sometimes the end goal is looking at you in the face, you just need someone to tell you Thanks John Quote Link to comment Share on other sites More sharing options...
Johnny4B Posted August 19, 2012 Author Report Share Posted August 19, 2012 Another way that you could do it would be to have a PHP function that returns or displays the navigation, and would set the active nav item based on whatever was passed in as an argument: function create_nav($active) { $nav = ''; if ($active == 'home' { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">Home</a></li>'; if ($active == 'about' { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">About</a></li>'; if ($active == 'contact' { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">Contact</a></li>'; return $nav; } echo create_nav('home'); Thanks Ben .... I'll use the straight forward example as above ... but appreciate the heads up Regards John Quote Link to comment Share on other sites More sharing options...
menre Posted August 20, 2012 Report Share Posted August 20, 2012 Hello, I am kind of wandering how you got the PHP code in your post to work? I tried it by having all you said on one page. But when I ran it on the server, I got some nasty error messages. Such as 'Undefined variable nav on line 22', 'Undefined variable active on line 24', 'Undefined variable active on line 25'. My full page code is placed below. <!doctype html> <html lang="en-US"> <meta charset="utf-8"> <title>Creating a highlighted link</title> <style type="text/css"> a {color: black;} body.page1 a.page1 {color: red;} body.page2 a.page2 {color: red;} body.page3 a.page3 {color: red;} </style> </head> <body> <ul class="nav"> <li><a class="page1" href="page1.php">Page one</a></li> <li><a class="page2" href="page2.php">Page two</a></li> <li><a class="page3" href="page3.php">Page three</a></li> </ul> <?php function create_nav($active) { $nav = ''; if ($active == 'home' { $nav .= '<li class="active">';} else $nav .= '<li>';} $nav .= '<a href="#">Home</a></li>'; if ($active == 'about' { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">About</a></li>'; if ($active == 'contact' { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">Contact</a></li>'; return $nav; } echo create_nav('home'); ?> </body> </html> I will really appreciate some feedback from you. Thanks in advance. Menre Quote Link to comment Share on other sites More sharing options...
khanahk Posted August 20, 2012 Report Share Posted August 20, 2012 There was a typo in that PHP snippet: ')' was missing to close off the condition in the if statement; it should be <?php function create_nav($active) { $nav = ''; if ($active == 'home') { $nav .= '<li class="active">';} else $nav .= '<li>';} $nav .= '<a href="#">Home</a></li>'; if ($active == 'about') { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">About</a></li>'; if ($active == 'contact') { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">Contact</a></li>'; return $nav; } echo create_nav('home'); ?> Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 20, 2012 Report Share Posted August 20, 2012 @Khanahk is correct -- sorry, minor error on my part. Quote Link to comment Share on other sites More sharing options...
menre Posted August 20, 2012 Report Share Posted August 20, 2012 @Khanahk is correct -- sorry, minor error on my part. Hello, Thanks for your response. But I tried fixing that error myself before by adding the closing ')' to it in three places. It did not help. That brings an error message on the line with the final "}" of the code. the code below is what I presently have. <?php function create_nav($active) { $nav = ''; if ($active == 'home') { $nav .= '<li class="active">';} else $nav .= '<li>';} $nav .= '<a href="#">Home</a></li>'; if ($active == 'about') { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">About</a></li>'; if ($active == 'contact') { $nav .= '<li class="active">'; } else { $nav .= '<li>'; } $nav .= '<a href="#">Contact</a></li>'; return $nav; } echo create_nav('home'); ?> But the last "}" above the line "echo create_nav('home');" shows an error. Any idea how to fix that? Thanks, Menre Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 20, 2012 Report Share Posted August 20, 2012 In your code, on this line: if ($active == 'home') { $nav .= '<li class="active">';} else $nav .= '<li>';} $nav .= '<a href="#">Home</a></li>'; You are missing a "{" after the "else". Adding that in will fix the error. Quote Link to comment Share on other sites More sharing options...
menre Posted August 21, 2012 Report Share Posted August 21, 2012 In your code, on this line: if ($active == 'home') { $nav .= '<li class="active">';} else $nav .= '<li>';} $nav .= '<a href="#">Home</a></li>'; You are missing a "{" after the "else". Adding that in will fix the error. Oh yes, that solves the problem. Now it is working without errors. Thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.