Jump to content

Nav Highlighting With Php And Css

attila2452

By attila2452
in PHP

Recommended Posts

attila2452 Member

attila2452

Posted
Posted

php is using include with this code : 

 <?phpinclude ("header.php"); if(isset($_GET["page"]) && $_GET["page"] != "home"){if(file_exists($_GET["page"].".html")){include($_GET["page"].".html");}else{include("PageNotFound.html");}}else{include("home.html");}    include ("footer.php");?>

This is my navigation: 

 <nav><ul><li><a href="?page=home">Home</a></li><li><a href="?page=about">About</a></li><li><a href="?page=services">Services</a></li><li><a href="?page=portfolio">Portfolio</a></li><li><a href="?page=resume">Resume</a></li></ul></nav>

how would i go about doing nav highlight? should i do; if

== about{ addClass .active} else do nothing? anything like that?

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

That's one way to do it. You don't need an else statement if there's nothing you want to do in the case of a false condition. You'll need one for each link in the menu. There are other ways to do it, but this one should be good for you.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

I thought your website/nav looked familiar, I had created a dynamic menu for you before that included submenu, although highlighting of submenu was not finished, the top menu does work, this is what came up with, adding your nav in header.php, and striping out subnav code. index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 	<!--[if IE]>		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>	<![endif]--><link rel="stylesheet" href="http://attilahajzer.host-ed.net/global.css" media="screen"/><link rel="stylesheet" href="http://attilahajzer.host-ed.net/mobile.css" media="only screen and (max-device width:480px)"/><link href='http://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'> <!-- Header Font --><link href='http://fonts.googleapis.com/css?family=Crimson+Text:400italic' rel='stylesheet' type='text/css'> <!-- Header Sub header --><?php	   		$title='';		$meta_description = '';		$meta_keywords = '';		 $pagelink="";		if(isset($_GET["page"]) && $_GET["page"] != "home")		{		if(file_exists($_GET["page"].".php"))				{				$pagelink = $_GET['page'];								switch ($pagelink)						{						case "portfolio":								$title='portfolio';								$meta_description = 'This is my portfolio page blah, blah , blah';								$meta_keywords = 'portfolio page blah, blah , blah';						break;						case "another":								$title='This is another page';								$meta_description = 'This is another page blah, blah , blah';								$meta_keywords = 'another page, of whatever';								break;  						case "about-me":								$title='This is another page an IT’S ABOUT ME!';								$meta_description = 'This is another page blah, blah , blah';								$meta_keywords = 'another page, of whatever';								break;  						case "sumbenu2":								$title='This is submenu2 page, not 1, not 3 but 2!';								$meta_description = 'This is submenu2 page, not 1, not 3 but 2';								$meta_keywords = 'This is submenu2 page, not 1, not 3 but 2';								break;				  						}				}		else				{				$title ='Error! page not found';								}		}else		{		$title='Attila Hajzer | Home';		$meta_description = 'Welcome to my portfolio';		$meta_keywords = 'Welcome, home, Attila Hajzer, Attila, Hajzer, web, design, webdesign, web-design, web design';		$pagelink="/";		} echo '<title>'.$title.'</title>'."\n";echo '<meta name="description" content="'.$meta_description.'" />'."\n";echo '<meta name="keywords" content="'.$meta_keywords.'" />'."\n"; ?> <style type="text/css">header nav a#active {	color: #06A8EB;	text-decoration: none;} </style>  </head><body> <?phpinclude("header.php"); /* adds header with navigation code*/ if(isset($_GET["page"]) && $_GET["page"] != "home"){					if(file_exists($_GET["page"].".php")){										  include($_GET["page"].".php");						 }else{										 include("PageNotFound.php");					 }}else{		  include("home.php");				 } ?> <h1>This will be my footer</h1></body></html>

header.php 

<header>	<a id="header" href="/"><h1>Attila Hajzer</h1><span>Web Design Portfolio</span></a><div id="navigation"><nav><ul><?php$nav_array = array("/", "about-me", "portfolio", "resume"); foreach($nav_array as $nav_array_list)	{	$nav_title=$nav_array_list;	$nav_title= str_replace('-', ' ', $nav_title);	$nav_title= str_replace('/', 'home', $nav_title);	$nav_array_list != "/" ? $nav_link='index.php?page='.$nav_array_list : $nav_link=str_replace('index.php','', $_SERVER['PHP_SELF']); 	if($pagelink==$nav_array_list)		{		echo '<li><a href="'.$nav_link.'" id="active">'.ucwords($nav_title).'</a>'; 		echo '</li>'."\n";		}	else		{		echo '<li><a href="'.$nav_link.'">'.ucwords($nav_title).'</a>'; 		echo '</li>'."\n";		}	$i++;	}?></nav></div></header>

Link to comment
Share on other sites
attila2452 Member

attila2452

Posted
  • Author
Posted

the home will not highlight. ive tried switching the / with home. but got nothing. I also want to play around with the URL. instead of it looking like : http://attilahajzer.host-ed.net/index.php?page=resume could i potentially make it look like http://attilahajzer.host-ed.net/resume/ through php or something? im just curious. i dont want it now, i just want it functional. lol

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...