How to make this (PHP CSS )

medina

x10 Addict
Community Support
Messages
1,862
Reaction score
6
Points
38
Hi...

I have a simple question in the PHP or CSS area.

I always wanted to knowhow to make a selectable menu...
for example i have the typical horizontal menu:

Home Services Portafolio blah blah Contact

(imagine this in the header of the web :) )

I want to know how to make when i stay in the home section the word HOME of the menu make an appearance that is selected to be in bold text or a color effect... and when go to Contact section make the same effect, but the word home in the menu remove the effect and has the same effect than the others, only it is highlighted in the section I am ...

Sorry for the bad language
 

SierraAR

Community Advocate
Community Support
Messages
827
Reaction score
17
Points
18
It depends on how your menu is laid out HTML wise. Let's say your menu is done like this:

Code:
<div id="menubar">
  <span><a href="url.com/">Home</a></span>
  <span><a href="url.com/blog">Blog</a></span>
  <span><a href="url.com/about">About</a></span>
</div>

Then, with CSS, you could create a hover effect with this:

Code:
#menubar span {
  font-weight: normal;
  color: gray;
}

#menubar span:hover {
  font-weight: bold;
  color: white;
}

#menubar span tells the stylesheet to make the specified changes only to 'span' elements located inside of elements with the id attribute of 'menubar'.

the :hover pseudo-class tells the style to apply the effects only when the specified element is hovered over.

font-weight determines the 'weight' of the text (i.e., bold, normal in this case)
color is the font color.
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
I believe what Medina is looking for is a persistent "you are here" indicator rather than (or in addition to) hover effects. That would involve changing the class of the menu link either at the PHP level (good, but sometimes difficult to implement when using "shrinkwrapped" software) or using JavaScript (not so good, but often easier to extract from a URL before any rewrite rules are in effect).

The CSS is simple; making the class change depends on how and where the menu and the site's pages are generated. More info is needed.

In any case, this question is in the wrong forum, which is why I ignored it initially -- it belongs in the Programming Help section.
 

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
Gonna throw out some really tough shorthand PHP for you, but this is basically what you want:

PHP:
<a href="#" <? echo ($page=="home") ? "class='active'" : null; ?> >Home</a>

And essentially, repeat this for each menu link, and at the top of that page, declare the $page variable. What the PHP does is checks if the $page variable is equal to "home" and if it is, assigns it "class='active'", which you can handle in your CSS to be bold, etc.

If you're using a CMS, this is a lot harder to handle, and will involve this PHP, and a lot more thinking.

If you're just using flat HTML and stuff, you don't even need php. Just edit the particular page and add "class='active'" to the link you want to be in it's "active" or hover state.

I've done what I did with PHP on my website:

http://neilhanlon.com/home

Notice how the navbar link is bold when you change the page. I used a /very/ simple templating system to do this, and just included my header and footer through PHP after assigning the variables, such as title and page.

Sorry if this doesn't make sense.. I'm on drugs for my foot currently
 

medina

x10 Addict
Community Support
Messages
1,862
Reaction score
6
Points
38
Yeah... im not looking for a hover effect!...essellar is right!...

@ leafypiggy
I think you're right, I'll try later, but a lot of logic because what you said ...
 

medina

x10 Addict
Community Support
Messages
1,862
Reaction score
6
Points
38
sorry for my little knowledge

but not work for me, is very logical, but what I was told I would be grateful if you could help me with an example to see .... would be very grateful

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" />
<title>Untitled Document</title>
<style>
#active{
	color:#0F0;
	}
.active{
	color:#0F0;
	}
</style>
</head>

<body>

<div id="menuhoriz">  
<ul>  
        <li><a href="?id=home" <? echo ($id=="?id=home") ? "class='active'" : null; ?> >Home</a></li>  
        <li><a href="?id=contact" <? echo ($id=="?id=contact") ? "class='active'" : null; ?> >Contact</a></li>  
</ul>  
</div>  

<?php 

if(!isset($_GET['id']) || $_GET['id'] == 'index' || empty($_GET['id'])) { 
    if (file_exists('inicio.php')) { 
        include('inicio.php'); 
    } 
    else { 
        if(file_exists('error.php')) { 
            include('error.php'); 
        } 
        else { 
            echo "ERROR: No se encuentra una Portada para el sitio"; 
        } 
    } 
} 
else { 
    if (file_exists($_GET['id'].'.php')) { 
        include($_GET['id'].'.php'); 
    } 
    else { 
        if(file_exists('error.php')) { 
            include('error.php'); 
        } 
        else { 
            echo "Error ?".$_SERVER['QUERY_STRING']; 
        } 
    } 
} 

?>
</body>
</html>

is this ok?...
 
Last edited:

medina

x10 Addict
Community Support
Messages
1,862
Reaction score
6
Points
38
Yeah... sure is a .php extension!...
 

descalzo

Grim Squeaker
Community Support
Messages
9,375
Reaction score
327
Points
83
are the pages home.php contact.php about.php etc? or index.php?x=home index.php?x=contact etc?
 

medina

x10 Addict
Community Support
Messages
1,862
Reaction score
6
Points
38
Yeah!... but doest work!... the pages are saved with contact.php but they called with the name ?id=
 
Last edited:

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
Code:
<!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" />
<title>Untitled Document</title>
<style>
#active{
    color:#0F0;
    }
.active{
    color:#0F0;
    }
</style>
</head>

<body>

<div id="menuhoriz">  
<ul>  
        <li><a href="?id=home" <? echo ($_GET['id']=="home") ? "class='active'" : null; ?> >Home</a></li>  
        <li><a href="?id=contact" <? echo ($_GET['id']=="contact") ? "class='active'" : null; ?> >Contact</a></li>  
</ul>  
</div>  

<?php 

if(!isset($_GET['id']) || $_GET['id'] == 'index' || empty($_GET['id'])) { 
    if (file_exists('inicio.php')) { 
        include('inicio.php'); 
    } 
    else { 
        if(file_exists('error.php')) { 
            include('error.php'); 
        } 
        else { 
            echo "ERROR: No se encuentra una Portada para el sitio"; 
        } 
    } 
} 
else { 
    if (file_exists($_GET['id'].'.php')) { 
        include($_GET['id'].'.php');  //THIS IS BAD. See explanation below
    } 
    else { 
        if(file_exists('error.php')) { 
            include('error.php'); 
        } 
        else { 
            echo "Error ?".$_SERVER['QUERY_STRING']; 
        } 
    } 
} 

?>
</body>
</html>

That should work... quick note


if (file_exists($_GET['id'].'.php')) {
include($_GET['id'].'.php'); //THIS IS BAD. See explanation below
}

That is terribly insecure.

Granted file_exists() only works on local files, so I couldn't include a malicious script hosted elsewhere, but what if you had say... config.php containing your database info. I could have it include that script... NOT GOOD.

You need to match against an array of "allowed" pages, or just make an if statement for each.. Like your contact page, index page, about page, etc. They'd all get their own if statement.

if($_GET['id'] == "about"){
include "about.php";
}
elseif{
// etc





or the array option:

$allowed = array("index","contact","about");
if(in_array($_GET['id'],$allowed)){
include "$_GET['id']" . ".php";
}
else{
//error
}
 
Last edited:

medina

x10 Addict
Community Support
Messages
1,862
Reaction score
6
Points
38
Thanks again!.... im gonna test
 
Messages
64
Reaction score
0
Points
6
Code:
<!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" />
<title>Untitled Document</title>
<style>
#active{
    color:#0F0;
    }
.active{
    color:#0F0;
    }
</style>
</head>

<body>

<div id="menuhoriz">  
<ul>  
        <li><a rel="nofollow" href="?id=home" <? echo ($_GET['id']=="home") ? "class='active'" : null; ?> >Home</a></li>  
        <li><a rel="nofollow" href="?id=contact" <? echo ($_GET['id']=="contact") ? "class='active'" : null; ?> >Contact</a></li>  
</ul>  
</div>  

<?php 

if(!isset($_GET['id']) || $_GET['id'] == 'index' || empty($_GET['id'])) { 
    if (file_exists('inicio.php')) { 
        include('inicio.php'); 
    } 
    else { 
        if(file_exists('error.php')) { 
            include('error.php'); 
        } 
        else { 
            echo "ERROR: No se encuentra una Portada para el sitio"; 
        } 
    } 
} 
else { 
    if (file_exists($_GET['id'].'.php')) { 
        include($_GET['id'].'.php');  //THIS IS BAD. See explanation below
    } 
    else { 
        if(file_exists('error.php')) { 
            include('error.php'); 
        } 
        else { 
            echo "Error ?".$_SERVER['QUERY_STRING']; 
        } 
    } 
} 

?>
</body>
</html>

That should work... quick note


if (file_exists($_GET['id'].'.php')) {
include($_GET['id'].'.php'); //THIS IS BAD. See explanation below
}

That is terribly insecure.

Granted file_exists() only works on local files, so I couldn't include a malicious script hosted elsewhere, but what if you had say... config.php containing your database info. I could have it include that script... NOT GOOD.

You need to match against an array of "allowed" pages, or just make an if statement for each.. Like your contact page, index page, about page, etc. They'd all get their own if statement.

if($_GET['id'] == "about"){
include "about.php";
}
elseif{
// etc





or the array option:

$allowed = array("index","contact","about");
if(in_array($_GET['id'],$allowed)){
include "$_GET['id']" . ".php";
}
else{
//error
}

yeah this is something nearly i was searching for.

But i still need a little more explanations and other similar techniques.
 
Top