...

View Full Version : CSS Navigation



saeed
09-12-2007, 08:41 AM
well... I did some modification in someone script ... and create an image... now everything is working fine... except active link...

Please see this website (http://www.saeednagaria.net/navbar/index.html)

now wht i want is when the link is active... it should show just like when hover but with NO link on it.

here is the css.



body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 10pt;
background: #FFF;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

img {
border: none;
}

#menu2 {
width: 150px;
margin: 10px;
border-style: solid solid none solid;
border-color: #ffffff;
border-size: 1px;
border-width: 1px;
}

#menu2 li a {
height: 30px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none;
}

#menu2 li a:link, #menu2 li a:visited {
color: #0000cc;
display: block;
background: url('concept2.gif');
padding-left:20px; padding-right:0; padding-top:8px; padding-bottom:0
}

#menu2 li a:hover {
color: #000000;
background: url('concept2.gif') 0 -30px;
padding-left:20px; padding-right:0; padding-top:8px; padding-bottom:0
}


Thanks,

Saeed.

ahallicks
09-12-2007, 09:01 AM
If you have php enabled on your server, it's probably the best way to go:

http://bonrouge.com/br.php?page=current

If you look down in the comments there is a post by Marion that shows how to do it and getting rid of the link on that active page too

saeed
09-12-2007, 09:29 AM
thanks for ur reply..

I've gone through the link u provide... its really confusing ...

I believe tht can be done .. but adding one more tag in CSS 'active' whose properties are set to

color: #000000;
background: url('concept2.gif') 0 -30px;
padding-left:20px; padding-right:0; padding-top:8px; padding-bottom:0

but I dont know how to disable link on active page. Plus I want image to be still even at mouse out event. (when it shows on hover).

:(

abduraooft
09-12-2007, 09:46 AM
If you can run server-side script in you page, you can generate the code for the menu without a link.

Hope you are using the same code for menu in all your pages. Then for instance, if you are in about.htm, declare a variable at the top of you page like $page='about';

Then your code for list will should be something like


<ul>
<?
if($page=='about')
{
?>
<li><a href="#">About Me</a></li>
<?
}
else
{
?>
<li><a href="aboutme.html">About Me</a></li>
<?
}
?>
</ul>
You can reduce the number of php tags with the help of echo.

saeed
09-12-2007, 10:36 AM
am sorry guys ... but dont want to use PHP on any other language. for tht i've to install PHP and it will a headache for me cause of limited info about it.

So it cant be done through CSS ?? :(


Saeed.

ahallicks
09-12-2007, 10:45 AM
You will not be able to stop a link from being a link on the active page in CSS, no. The only way to do it is with the Server Side Scripting shown above, or by having a separate menu on eahc page where the page you are on has the link removed.

saeed
09-12-2007, 12:12 PM
I've seen on web... i think .. am missing something ... or you're not getting the idea.. here is the screen shot (http://www.saeednagaria.net/navbar/sample.gif) of sample result.

I am on Current Projects webpage... see current project on ur left. there is no clickable link when u're on the same page. Plus hover will only available for rest of the links and image will be exactly as shown in screen shot.

Saeed.

saeed
09-12-2007, 12:14 PM
sorry tht link isnt working ... see the attach screen shot.

ahallicks
09-12-2007, 12:30 PM
If I understand correctly you want the link to the current page to be highlighted as though it were being hovered over, correct? And you also don't want the link to be clickable on the page that you are currently on, correct again?

Here is a CSS method for doing the first of these:

http://bonrouge.com/~currentcss

but, as for the second you can't physically do that with CSS because it is used for styling only, and not the sort of dynamic content stuff you are asking. That would be down to some kind of server side script or a separate menu on each page where you have just taken the link out as I said above.

abduraooft
09-12-2007, 01:19 PM
You can change the href property of a link by Javascript, though it won't work when someone disable Javascript in their browser.

Give id property for all your <a> tags with some suitable value.
Then call a function in the onload event of each page like


<a href='about.htm' id='about'>About</a>



function removeLink()
{
var page= window.location.href;
switch(page)
{
case 'about.htm':
document.getElementById('about').href='#';
break;
case ''.............................
.............................
}

}
window.onload = removeLink;

ahallicks
09-12-2007, 01:36 PM
And by loaction you mean location, right!? :p

abduraooft
09-12-2007, 01:46 PM
And by loaction you mean location, right!? :p
Ha.. thanks, DreamWeaver is not capable of realizing my Dreamzz...;)
well, any good Javascript editor that can highlight syntactic errors?

_Aerospace_Eng_
09-12-2007, 01:52 PM
Ha.. thanks, DreamWeaver is not capable of realizing my Dreamzz...;)
well, any good Javascript editor that can highlight syntactic errors?
It may not always be an error though. You could have a frame named "loaction"

Best thing to do is just test your scripts in Firefox and read what the error console tells you. Firebug for firefox might be something to look into.

abduraooft
09-12-2007, 02:05 PM
Hmm.. I use that method, but didn't tested the last one.
Just asking whether there is something works like DreamWeaver's Ctrl+Space combination?

saeed
09-13-2007, 06:40 AM
well... this is what i did ...

http://www.saeednagaria.net/navbar/index.html

and its working the way i want ... apart from removing the link from active page.

:)

saeed
09-13-2007, 06:51 AM
Please check the css file as this is working on visited page ..



body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 5;
font-size: 10pt;
background: #fff;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#navigation {
margin: 0;
padding: 0;
list-style-type: none;
}

#navigation li {
margin-bottom: 2px;
}

#navigation a:link, #navigation a:visited {
background: #99CCFF;
color: #ffffff;
display: block;
width: 130px;
height: 22px;
border-left: 5px solid #0099ff;
padding-left: 10px;
text-decoration: none;
}

#navigation a:hover {
background: #0099ff;
color: #000000;
text-decoration: none;
border-left: 5px solid black;
}

#navigation a.active:visited {
background: #0099ff;
color: #000000;
text-decoration: none;
border-left: 5px solid black;
font-weight: bold;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum