How to make this (PHP CSS )

medina · Jul 1, 2011

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

medina · Jul 2, 2011

????.... no answer???

SierraAR · Jul 2, 2011

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 · Jul 2, 2011

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 · Jul 2, 2011

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 · Jul 2, 2011

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 · Jul 2, 2011

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?...

Gonrah · Jul 2, 2011

Do you use PHP on your site or only HTML.

medina · Jul 2, 2011

Yeah... sure is a .php extension!...

descalzo · Jul 2, 2011

are the pages home.php contact.php about.php etc? or index.php?x=home index.php?x=contact etc?

medina · Jul 2, 2011

Yeah!... but doest work!... the pages are saved with contact.php but they called with the name ?id=

leafypiggy · Jul 2, 2011

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
}

medina · Jul 3, 2011

Thanks again!.... im gonna test

morbid_leathal92 · Dec 8, 2011

leafypiggy said:
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.

How to make this (PHP CSS )

medina

x10 Addict

medina

x10 Addict

SierraAR

Community Advocate

essellar

Community Advocate

leafypiggy

Manager of Pens and Office Supplies

medina

x10 Addict

medina

x10 Addict

Gonrah

Member

medina

x10 Addict

descalzo

Grim Squeaker

medina

x10 Addict

leafypiggy

Manager of Pens and Office Supplies

medina

x10 Addict

morbid_leathal92

Member

Free Web Hosting

Our Community

Legal