How to make this (PHP CSS )

**medina** · 07-01-2011 06:11 PM

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** · 07-02-2011 10:26 AM

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

**SJ.Wolfe** · 07-02-2011 10:45 AM

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** · 07-02-2011 11:18 AM

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** · 07-02-2011 11:39 AM

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** · 07-02-2011 11:53 AM

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** · 07-02-2011 12:40 PM

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 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 ($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** · 07-02-2011 01:21 PM

Do you use PHP on your site or only HTML.

**medina** · 07-02-2011 01:28 PM

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

**descalzo** · 07-02-2011 01:30 PM

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

Thread: How to make this (PHP CSS )

LinkBack

Thread Tools

Display

How to make this (PHP CSS )

Re: How to make this (PHP CSS )

Re: How to make this (PHP CSS )

Re: How to make this (PHP CSS )

Re: How to make this (PHP CSS )

Re: How to make this (PHP CSS )

Re: How to make this (PHP CSS )

Re: How to make this (PHP CSS )

Re: How to make this (PHP CSS )

Re: How to make this (PHP CSS )

Similar Threads

trying to make a few changes

make me a sig

I just want to make sure

Make Your Own CMS

How to make something like...

Posting Permissions