Jump to content

Recommended Posts

My website used to highlight the current link in a dark color (similar to the mouseover or maybe even the same) but when I made some updates to allow external links more easily and to correct a problem with global variables someone here recommended I change the highlighting stopped working.  Anyone know how I can turn it back on?

 

Menu list code:


<?
$_menu = array('index.php?page=home' => 'Philosophy & Focus',
'index.php?page=biography' => 'Biography',
'index.php?page=consultations' => 'Consultations',
'index.php?page=classes' => 'Classes',
'index.php?page=client_comments' => 'Client Comments',
'index.php?page=calendar' => 'Calendar',
'http://shop.healthbasics.net/collections/health-basics' => 'Products',
'http://www.healthbasics.net/blog/' => 'Blog',
'index.php?page=recommended_reading' => 'Recommended Reading',
'index.php?page=recommended_viewing' => 'Recommended Viewing',
'index.php?page=links_resources' => 'Links & Resources',
);

 

And here is how it gets called from index.php:

include "menu.inc.php";

function menu($_menu){
$str = '';
foreach($_menu as $url => $name){
	$sel = ($_GET['page'] == $url ) ? ' id="selected" ' : '';
	$str .= "<li ". $sel ."><a href=" . $url . " >" . $name . "</a>\n";
}
echo $str;
}

 

Thanks. 

what styles were you using?

 

Were you I assume using css to highlight your links with a mouseover I mean?

 

Show us what your old link code looked like.....

 

Below is why there is no highlighting. You have no class associated with the link code or styles. Show me your old code and I'll tell you what you need to change.

"<li ". $sel ."><a href=" . $url . " >" . $name . "</a>\n"

what styles are you using?

 

Below is my style.css - would that answer your question?

 

body {

font : normal 12px/1.6em Arial, Helvetica, sans-serif;

color : #2a3845;

margin : 0;

padding : 0;

background-color: #7b7b7b;

background-image: url(../img/bg_main.jpg);

background-repeat: repeat-x;

background-position: top;

}

p { margin : 0;padding : 0;}

a:visited, a:link {color : #a43b55;text-decoration : underline;background:none;}

a:hover {color : #a43b55;text-decoration : none;background:none; cursor:pointer;}

h1 {

color : #7a2e40;

margin: 0px 0px 10px 0px;

padding-bottom : 10px;

border-bottom : 1px solid #efece7;

font-family: quicksand;

font-size: 17px;

font-style: normal;

font-weight: normal;

font-variant: normal;

}

h2 {

color : #7a2e40;

margin : 20px 0 10px;

padding-bottom : 10px;

border-bottom : 1px solid #efece7;

font-family: quicksand;

font-size: 17px;

font-style: normal;

font-weight: normal;

font-variant: normal;

}

h3 {

color : #7a2e40;

padding-bottom : 10px;

border-bottom : 1px solid #efece7;

margin-top: 20px;

margin-right: 0;

margin-bottom: 10px;

margin-left: 0;

font-family: quicksand;

font-size: 14px;

font-weight: bold;

}

 

h4 {

color : #7a2e40;

padding-bottom : 10px;

margin-top: 20px;

margin-right: 0;

margin-bottom: 10px;

margin-left: 0;

font-family: quicksand;

font-size: 14px;

font-weight: bold;

}

 

#year a {

border:none;

text-decoration:none;

font-size:14px;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #a43b55;

}

 

#year a:hover {

color: #777;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #a43b55;

}

 

ul {padding:0;margin:0 0 0 17px;list-style: square url(../img/bullet.gif);}

.box {

border : 1px solid #f0e9eb;

padding : 15px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

background-color: #fff;

background-image: url(../img/bg_box.jpg);

background-repeat: repeat-x;

background-position: top;

-box-shadow: 0px 0px 5px #dbdbdb;

-webkit-box-shadow: 0px 0px 5px #dbdbdb;

-moz-box-shadow: 0px 0px 5px #dbdbdb;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

 

}

 

.box2 {

border : 1px solid #f0e9eb;

width: 370px;

margin-left: 150px;

margin-top: -20px;

margin-bottom: 25px;

padding-top: 10px;

padding-right: 10px;

padding-bottom: 10px;

padding-left: 10px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

background-color: #fff;

background-image: url(../img/bg_box.jpg);

background-repeat: repeat-x;

background-position: top;

-box-shadow: 0px 0px 5px #dbdbdb;

-webkit-box-shadow: 0px 0px 5px #dbdbdb;

-moz-box-shadow: 0px 0px 5px #dbdbdb;

}

 

 

#wrapper {

width : 950px;

border-left : 1px solid #f0e9eb;

border-right : 1px solid #f0e9eb;

margin-top: 0;

margin-right: auto;

margin-bottom: 0;

margin-left: auto;

background-color: #FFFFFF;

-box-shadow: 0px 0px 20px #545454;

-webkit-box-shadow: 0px 0px 20px #545454;

-moz-box-shadow: 0px 0px 20px #545454;

-moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px;

-moz-border-radius-bottomright: 15px; -webkit-border-bottom-right-radius: 15px;

}

#header {

margin-top: 0;

margin-right: 0px;

margin-bottom: 0;

margin-left: 0px;

}

#bg {height : 36px;background : url(img/bg.gif) repeat-x;}

#nav {

padding : 10px 20px;

text-align : right;

color : #fdfdfd;

background-image: url(../img/bg_header2.jpg);

background-repeat: repeat-x;

background-position: top;

-moz-border-radius-bottomleft: 7px;

-webkit-border-bottom-left-radius: 7px;

-moz-border-radius-bottomright: 7px;

-webkit-border-bottom-right-radius: 7px;

}

#nav a:visited, #nav a:link {

text-decoration : none;

color : #ededed;

}

#nav a:hover {text-decoration : underline;color : #fdfdfd;}

#main-content {margin : 0 auto;}

#logo {

margin-bottom : 45px;

margin-top: 5px;

margin-left: -15px;

}

.logotxt1 {

color : #fa7393;

margin : 10px 0 0 15px;

font-family: quicksand;

font-size: 20px;

font-style: normal;

font-weight: normal;

font-variant: normal;

}

.logotxt2 {font : normal 20px quicksand, serif;color : #7a2e40; }

.logotxt3 {

color : #7a2e40;

font-family: quicksand, serif;

font-size: 9px;

font-style: normal;

font-weight: normal;

font-variant: normal;

vertical-align: super;

}

#left-column {

width : 600px;

float : left;

padding-top: 0;

padding-right: 5px;

padding-bottom: 30px;

padding-left: 30px;

}

#right-column {width : 300px;float : right;}

.crd a:visited, .crd a:link, .crd a:hover{text-decoration : none;color : #2a3845;cursor: text;}

#footer {

border-top : 1px solid #f0e9eb;

clear : both;

padding-top: 20px;

padding-right: 15px;

padding-bottom: 20px;

padding-left: 25px;

height: 70px;

background-image: url(../img/bg_footer.jpg);

background-repeat: repeat-x;

background-position: top;

}

 

#footer_copy {

float:left;

margin-top:24px;

}

 

#footer_links {

float:right;

margin-right:20px;

}

 

#footer_links img {

border:none;

}

 

 

.sidebar img {

border:none;

}

 

 

#main-image {

text-align : center;

margin-top: 15px;

padding: 4px;

-box-shadow: 0px 0px 5px #dbdbdb;

-webkit-box-shadow: 0px 0px 5px #dbdbdb;

-moz-box-shadow: 0px 0px 5px #dbdbdb;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

height: 240px;

width: 240px;

margin-left: 30px;

}

.sidebar {width : 218px;margin : 0 auto;padding : 10px 25px;background : url(img/shadow.jpg) no-repeat top;}

 

@font-face { font-family: quicksand; src: url('../css/quicksand.otf'); } @font-face { font-family: quicksand; font-weight: bold; src: url('../css/quicksand.otf'); }

 

#menu{

list-style: none;

width: 220px;

float: left;

margin-top: 2em;

margin-bottom: 2em;

margin-left: 0px;

}

#menu li{

padding: 0;

margin: 0;

list-style-image: none;

list-style-type: none;

}

#menu a{

display: block;

color: #666666;

background-color: #eeeeee;

font-weight: lighter;

text-decoration: none;

width: 207px;

padding-top: 0.4em;

padding-right: 0.3em;

padding-bottom: 0.4em;

padding-left: 0.8em;

margin-top: 2px;

margin-right: 0px;

margin-bottom: 2px;

margin-left: 0px;

list-style-image: none;

list-style-type: none;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

background-image: url(../img/bg_menu.jpg);

background-repeat: repeat-x;

}

 

#menu a:hover{

color: #fff;

background-color: #333333;

font-weight: lighter;

-box-shadow: 0px 0px 7px #696969;

-webkit-box-shadow: 0px 0px 7px #696969;

-moz-box-shadow: 0px 0px 7px #696969;

background-image: url(../img/bg_menu_hover.jpg);

background-repeat: repeat-x;

background-position: top;

border:none;

}

 

 

#selected {

font-weight: lighter;

border:none;

}

 

#selected a {

color: #fff;

background-color: #585858;

font-weight: lighter;

-box-shadow: 0px 0px 7px #696969;

-webkit-box-shadow: 0px 0px 7px #696969;

-moz-box-shadow: 0px 0px 7px #696969;

background-image: url(../img/bg_menu_selected.jpg);

background-repeat: repeat-x;

background-position: top;

border:none;

 

#easyTooltip{

border:1px solid #a1a1a1;

color:#fff;

box-shadow: 0px 0px 6px #333333;

-webkit-box-shadow: 0px 0px 6px #333333;

-moz-box-shadow: 0px 0px 6px #333333;

-moz-border-radius: 5px; -webkit-border-radius: 5px;

padding-top: 7px;

padding-right: 10px;

padding-bottom: 9px;

padding-left: 10px;

background-color: #5e5e5e;

background-image: url(../lib/easytooltip/bg.gif);

background-repeat: repeat-x;

}

 

 

strong {

font-size: 13px;

color: #a43b55;

}

I don't right away pick out your highlight... but you can do a rollover hightlight with you styles like so...

 

add something like this to your style code:

a.five:link {	
			text-align:center; 
			color:#003366; 
			font-size:0.7em;
			font-weight:bold;
			text-decoration:none;
		}
a.five:visited {
			text-align:center; 
			color:#003366;
			font-size:0.7em;
			font-weight:bold;
			text-decoration:none;
			}
a.five:hover {
			text-align:center; 
			color:#FFFFFF; 
			font-size:0.7em;
			font-weight:bold;
			text-decoration:underline;}
a.five:active {
			text-align:center; 
			color:#003366; 
			font-size:0.7em;
			font-weight:bold;
		} 

 

Then change this line in your code here:

$str .= "<li ". $sel ."><a href=" . $url . " >" . $name . "</a>\n";

to this:

$str .= "<li ". $sel ."><a class="five" href=" . $url . " >" . $name . "</a>\n";

The mouseover highlight already works just fine (and always did).  The highlight for the current page used to work until I made some changes given here today to allow easier linking to external sites on the menu.  I am trying to get it back to the point where the button for the page you are currently viewing would be highlighted.  ANy idea how to do that?

 

I tried swaping the line of code you recommended but it resulted in the page not loading at all.  It would just be completley blank when I visited the home page.

Maybe I missed it, but are you closing the <li> tag?

 

I would think that line should be more like

$str .= "<li ". $sel ."><a class='five' href=" . $url . " >" . $name . "</a></li>";

 

You are already setting the id of the <li> element to "selected" which is defined in your stylesheet, so make sure it is closing properly.

 

Just to check, view the source in your browser for a page and look for the <li> of the current page to see if "id='selected'" is in there.

Ok that means the ternary operator right above it ($sel = .... ) isn't behaving as expected and now I see why.

 

It is checking to see if the value of "page" parameter is equal to the URL in your array, which it isn't because URL in your array contains the whole string ('index.php?page=.....') instead of just the page.

 

I would suggest restructuring your array or changing $_GET['page'] to something that would check for the full URL.

foreach($_menu as $url => $name){
$sel = ($_GET['page'] == $url ) ? ' id="selected" ' : ''; //<--- Here is your 'select' script.
$str .= "<li ". $sel ."><a href=" . $url . " >" . $name . "</a>\n";
}

 

I'm not sure if this helps, but this is the line that calls the 'selected' part of your css file. As for why it isn't highlighted anymore, when we changed the conditions of the menu, we changed the conditions of what it was looking for.

 

Let me see if I can find a solution, or if someone else can find the solution.

Try this.

 

Change

$sel = ($_GET['page'] == $url ) ? ' id="selected" ' : '';

 

to

$sel = ("index.php?page=".$_GET['page'] == $url ) ? 'id="selected" ' : '';

 

I hope my syntax is right. If not, I'm sure someone will correct it.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.