Help creating a current link [Archive]

View Full Version : Help creating a current link

SayJumner

08-24-2007, 03:17 PM

I'm working on this nav menu, and its a slider, it opens on hover, pure css.

But i want to have one sliding section open upon arrival, the fetured content section.

the link to my nav is here:

http://www.fiberinstrumentsales.com/feature-nav.html

r u guys understanding what im saying? can some one help me with the code?

please!

thanx
-jums

SayJumner

08-24-2007, 03:21 PM

Ive seen some menus with a current, or active tag, ive tried this but i cant seem to get it to work.

Please help.

boogyman

08-24-2007, 03:26 PM

could you post the code ?

SayJumner

08-24-2007, 03:45 PM

the CSS

#dlmenu {
height:auto;}
#menu {
list-style-type:none;
margin:0 0 10px;
padding:0;
position:absolute;
width:215px;
background:#fff;
z-index:100;}
#menu li {
font-family:Arial, Helvetica, sans-serif;
display:block;
padding:0;
margin:0;
position:relative;
z-index:100;}
#menu li a, #menu li a:visited {
display:block;
text-decoration:none;}
#menu li dd {
display:none;}
#menu li:hover, #menu li a:hover {
border:0;}
#menu li:hover dt a , #menu li a:hover dt a {
background:#CCCCCC url(/top_grad_2.gif) center center;
color:#000000; }
#menu li:hover dd, #menu li a:hover dd {
display:block;}
#menu li:hover dl, #menu li a:hover dl {
height:auto;
background:white;}
#menu table {
border-collapse:collapse;
padding:0; margin:-4px;
font-size:11px;}
#menu dl {width: 215px;
margin: 0; background:red; cursor:pointer;}
#menu dt {
margin:0;
padding: 0;
font-size: 13px;
border-top:1px solid #cce;}
#menu dd {margin:0;
padding:0;
font-size: 11px;
text-align:left; }
.gallery dt a, .gallery dt a:visited {
display:block;
color:#fff;
padding:5px 5px 5px 10px;
background:#red url(/top_grad.gif) center center;}
.gallery dd a, .gallery dd a:visited {
color:#000; min-height:10px; text-decoration:none;
display:block;
padding:4px 5px 4px 5px;
}
* html .gallery dd a, * html .gallery dd a:visited {
height:5px;}
.gallery dd a:hover {
color:red;}

The HTML

<div id="dlmenu">
<ul id="menu">

<li>

<dl class="gallery">
<dt><a href="http://www.fiberinstrumentsales.com/contact-FIS/fiber-optic-catalog.asp">Fiber Optic Products Catalog</a></dt>
<dd><a href="http://www.fiberinstrumentsales.com/Catalog_PDF/FIS_Catalog_2007.pdf">• Fiber Optic Catalog Download(PDF)</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/fiber-optic-catalog.asp">• Request a Catalog in the Mail</a></dd>
<dd><a href="https://www.fiscatalog.com/">• Shop Fiber Optic Products Online</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/join-mailing-list.asp">• Join Our Mailing List</a></dd>
</dl>


</li>
<li>

<dl class="gallery">
<dt><a href="http://www.fiberinstrumentsales.com/contact-FIS/fiber-optic-catalog.asp">Copper Cabling Products Catalog</a></dt>
<dd><a href="http://www.fiberinstrumentsales.com/Catalog_PDF/copper_cabling_catalog.pdf">• Copper Cabling Catalog Download(PDF)</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/fiber-optic-catalog.asp">• Request a Catalog in the Mail</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/join-mailing-list.asp">• Join Our Mailing List</a></dd>
</dl>

</li>
<li>

<dl class="gallery">
<dt><a href="http://www.fiberinstrumentsales.com/white-papers/whitePapers.asp">Recent White Papers</a></dt>
<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=10">• Fiber Network Avoiding Local Loop Charges</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=9">• Fiber Optic Waste Container</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=8">• Fiber Optic Blind Mate Connector</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=7">• Fiber Optic Conduit Pull Boxes</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=6">• Fiber Optic Rotary Joints</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=4">• Multimode Fiber Optic Cable</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=5">• Fiber Optic Fault Checker</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=3">• Fiber Backbone Security Underground vs. Aerial</a></dd>
</dl>


</li>
<li>

<dl class="gallery">
<dt><a href="http://www.fiberinstrumentsales.com/press/PressReleases.asp">Latest Fiber Optic News</a></dt>
<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=11">• Keynote Speaker Reveals Future of Fiber Optics At Exclusive Seminar</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/press/PressReleases.asp?prid=27">• All New Fiber Optic Website</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/press/PressReleases.asp?prid=26">• FIS Named Exporter of the Year</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/press/PressReleases.asp?prid=6">• Terminated Fiber Optic Adapter Panels</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/press/PressReleases.asp?prid=5">• Fiber Optic Coupler Capabilities</a></dd>
</dl>

</li>
<li>

<dl class="gallery">
<dt><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/">Fiber Optic Reference Tools</a></dt>
<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-information/fiber-optic-glossary.asp">• Fiber Optic Glossary</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-cable/fiber-optic-cable-guide.asp">• Fiber Optic Cable Guide</a></dd>
<dd><a href="http://www.fiber-optic-forum.com/">• Fiber Optic Forum</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/faq/">• Frequently Asked Questions</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/copper-cable/copper-cabling-terms.asp">• Copper Cabling Glossary </a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/optical-fiber-type-color-code.asp">• Fiber Optic Color Codes by Fiber Type</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/metric-us-distance-conversion.asp">• Distance Conversion</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/optical-link-loss-budget.asp">• Fiber Optic Link Loss Budget</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/dbm-milliwatt-conversion.asp">• Converting Power (dBm) To Milliwatts</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/optical-fiber-specifications.asp">• Specifications for Optical Fiber Types</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/optical-network-connection-speeds.asp">• Connection Speeds by Network Type</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/fiber-optic-network-specifications.asp">• Fiber Optic Network Specifications</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/fiber-optic-cable-color-codes.asp">• Fiber Optic Cable Color Codes</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/optical-decibel-conversions.asp">• Fiber Optic Decible Conversion</a></dd>

</dl>

</li>
<li>

<dl class="gallery">
<dt><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/">Featured Content</a></dt>
<dd>
<div align="center"><a href="http://www.fiber-optic-forum.com/forum.aspx"><br>
<img src="http://www.fiberinstrumentsales.com/home-page-images/fiber-optic-forum.gif" alt="Fiber Optic Forum" width="175" height="79" border="0"></a></div>
</dd>
<dd>
<div align="center"><a href="https://www.fiscatalog.com/axcatlookup.asp?ID="0060_TestEquipment"">
<img src="http://www.fiberinstrumentsales.com/fiber-optic-ads/test-equipment.jpg" width="175" height="389" border="0"></a> </div>
</dd>
</dl>

</li>

</ul>
</div>

</div>
</div>

SayJumner

09-10-2007, 08:24 PM

I'm still seeking assistance on this code. If anyone can help id appreciate it greatly it will make the world of a difference on my project.

Twey

09-10-2007, 08:54 PM

<dl class="gallery">
<dt><a href="http://www.fiberinstrumentsales.com/contact-FIS/fiber-optic-catalog.asp">Fiber Optic Products Catalog</a></dt>
<dd><a href="http://www.fiberinstrumentsales.com/Catalog_PDF/FIS_Catalog_2007.pdf">• Fiber Optic Catalog Download(PDF)</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/fiber-optic-catalog.asp">• Request a Catalog in the Mail</a></dd>
<dd><a href="https://www.fiscatalog.com/">• Shop Fiber Optic Products Online</a></dd>
<dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/join-mailing-list.asp">• Join Our Mailing List</a></dd>
</dl>This is not a definition list. As such, it shouldn't be marked up with <dl>. It is an unordered list of links, and should be marked up with <ul> -- you can remove those ugly • entities then too, and have CSS do it (list-style-type: disc;).

"Current page" style links are usually done by inserting a class into a link server-side, e.g. (Smarty syntax):
{foreach from=$pages item=page}
<a href="{$page.url}"{if $page == $this_page} class="current"{/if}>
{$page.title}
</a>
{/foreach}

boogyman

09-10-2007, 09:01 PM

you are opening them via hover, and there is no ability to have an open element persist past the mouseover, so for that reason you would need to use some javascript to assign the active list item to open and disable the rest.

take a look at http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm

SayJumner

09-12-2007, 03:50 PM

it's funny you posted that link, cause i already am using that script. what im actually trying to do is to create a css nav similar to Apples sliding drawers nav on the left hand side on this page (http://www.apple.com/startpage/) if you see when you load the page its displaying featured content and then as you hover over other buttons it opens them and closes the "default" featured content. similar to the menu im trying to use but i cant seem to make the featured content "drawer" in my script do what i want it to do.

Is apple using JS to make this happen on their site?

matthewmjscott

09-17-2007, 08:43 PM

This is not a definition list. As such, it shouldn't be marked up with <dl>. It is an unordered list of links, and should be marked up with <ul> -- you can remove those ugly • entities then too, and have CSS do it (list-style-type: disc;).

"Current page" style links are usually done by inserting a class into a link server-side, e.g. (Smarty syntax):
{foreach from=$pages item=page}
<a href="{$page.url}"{if $page == $this_page} class="current"{/if}>
{$page.title}
</a>
{/foreach}

Is there any non-Smarty alternative to this code?

boogyman

09-17-2007, 09:02 PM

{foreach from=$pages item=page}
<a href="{$page.url}"{if $page == $this_page} class="current"{/if}>
{$page.title}
</a>
{/foreach}

Is there any non-Smarty alternative to this code?

<?php
foreach $pages as $page
{?>
<a href="<? $page.url; ?>" <? if($page == $this_page) ?>class="current"><? $page.title ?></a>
<? } ?>

matthewmjscott

09-17-2007, 09:05 PM

Thanks Boogyman!

matthewmjscott

09-17-2007, 09:37 PM

Is there some other code required to make that work?

matthewmjscott

09-17-2007, 10:07 PM

I found this Smarty-related PHP code which if re-written might help the other code posted by boogyman:

define('SITE_URL' = 'http://localhost/');

$smarty->assign('current_section', current_section());
$smarty->assign('primary_links', build_primary_links();

$smarty->display('index.tpl');

function current_section() {
// For the purpose of this code, we'll keep this simple:
return 'Home';
}

function build_primary_links() {
// this is also far more complex, but I'll keep this simple as well
$primary_links = array('Home' => SITE_URL,
'News' => SITE_URL.'/?op=news',
);
return $primary_links;
}

Twey

09-18-2007, 07:21 AM

boogyman broke the code. Without Smarty, it's:
<?php foreach($pages as $page) { ?>
<a href="<?php echo $page->url ?>"<?php if($page == $this_page) { ?> class="current"<?php } ?>>
<?php echo $page->title; ?>
</a>
<?php } ?>... assuming $pages is an array of "page" objects with "url" and "title" properties. It was mostly example pseudo-code though.

I really do recommend using a templating system for any reasonably-sized sites. PHP's default mix of data, logic, and presentation is a maintainability nightmare.

matthewmjscott

09-18-2007, 08:26 AM

This is my array... doesn't appear to be working though:

<?php

define('SITE_URL', 'http://localhost/');

// array(page_title => page_url)

$pages = array('Home' => SITE_URL,
'News' => SITE_URL.'/news.php',
'Forum' => SITE_URL.'/forum',
);
?>

Twey

09-18-2007, 08:42 AM

I said "objects," not "arrays."
class Page {
public $title;
public $url;

private static $instances = array();

public static get_current() {
foreach(self::$instances as $page)
if($page->url === SITE_URL . $_SERVER['REQUEST_URI'])
return $page;
return false;
}

public Page($title, $url) {
$this->title = $title;
$this->url = $url;
Page::$instances[] = $this;
}
}

define('SITE_URL', 'http://localhost/');

$pages = array(
new Page('Home', SITE_URL),
new Page('News', SITE_URL . '/news.php'),
new Page('Forum', SITE_URL . '/forum')
);

$current_page = Page::get_current();

matthewmjscott

09-18-2007, 10:40 AM

Thanks Twey, but using that I get the following error message:

Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /home/bigbro/public_html/matthewmjscott/testingmenu.php on line 95

EDIT: I think the problem is that my server runs PHP4 and not PHP5 but I'm not entirely sure...

boogyman

09-18-2007, 12:05 PM

Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /home/bigbro/public_html/matthewmjscott/testingmenu.php on line 95

refers to a missing curly brace.. the error occured on line 95. you are going to need to check all of your open curly braces above that point to figure out which one(s) has not been closed.

matthewmjscott

09-18-2007, 12:56 PM

Yeah. There's no missing curly braces, I think it's because I don't have PHP5. Thanks for your help anyway, I will recommend DD to my friends :D

boogyman

09-18-2007, 01:07 PM

the php interpretter doesnt lie; it has nothing to do with which version of php you have installed
if you cannot find the mistake but would like help post your code encapsulated in
tags

Twey

09-18-2007, 01:46 PM

No, he's right in this instance, I tried to write PHP4-compatible code but failed. Shame on me. The code for PHP4 is:
class Page {
var $title;
var $url;

static $instances = array();

static function get_current() {
foreach(self::$instances as $page)
if($page->url === SITE_URL . $_SERVER['REQUEST_URI'])
return $page;
return false;
}

function Page($title, $url) {
$this->title = $title;
$this->url = $url;
Page::$instances[] = $this;
}
}

define('SITE_URL', 'http://localhost/');

$pages = array(
new Page('Home', SITE_URL),
new Page('News', SITE_URL . '/news.php'),
new Page('Forum', SITE_URL . '/forum')
);

$current_page = Page::get_current();

matthewmjscott

09-18-2007, 04:04 PM

Sorry to be a huge pain but I am still getting the following error:

Parse error: syntax error, unexpected T_STATIC, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /home/bigbro/public_html/matthewmjscott/testingmenu.php on line 95

Line 95:

static $instances = array();

There is no PHP code in there whatsoever apart from what I have used from this thread.

I'm a little clueless now :confused:

Twey

09-18-2007, 04:30 PM

Ah, static variables in PHP4 are pretty much non-existant:
$page_instances = array();

class Page {
var $title;
var $url;

static function get_current() {
global $page_instances;

foreach($page_instances as $page)
if($page->url === SITE_URL . $_SERVER['REQUEST_URI'])
return $page;
return false;
}

function Page($title, $url) {
global $page_instances;

$this->title = $title;
$this->url = $url;

$page_instances[] = $this;
}
}

define('SITE_URL', 'http://localhost/');

$pages = array(
new Page('Home', SITE_URL),
new Page('News', SITE_URL . '/news.php'),
new Page('Forum', SITE_URL . '/forum')
);

$current_page = Page::get_current();I hate PHP :-\

matthewmjscott

09-18-2007, 04:35 PM

I hate PHP too, it's frustrating...

anyway, I'm now getting an error on line 97, which is this:

static function get_current() {

It's a static variable, which is what seems to be causing the problem... hopefully this should be the last time I need help?

I'm sorry for being a complete and utter pain!

Twey

09-18-2007, 04:49 PM

Oh, yeah, missed that one:
$page_instances = array();

function page_get_current() {
global $page_instances;

foreach($page_instances as $page)
if($page->url === SITE_URL . $_SERVER['REQUEST_URI'])
return $page;
return false;
}

class Page {
var $title;
var $url;

function Page($title, $url) {
global $page_instances;

$this->title = $title;
$this->url = $url;

$page_instances[] = $this;
}
}

define('SITE_URL', 'http://localhost/');

$pages = array(
new Page('Home', SITE_URL),
new Page('News', SITE_URL . '/news.php'),
new Page('Forum', SITE_URL . '/forum')
);

$current_page = page_get_current();Now, it should be noted that this is a Ruddy Ugly Hack©, of a magnitude of ugliness rarely seen in real, decent modern programming languages. In fact, even in PHP5 this isn't necessary, although that has plenty of problems of its own. I strongly suggest upgrading: support for PHP4 ends fairly soon, if I remember correctly. Moving to another language (Python? Ruby?) would be even better, of course :)

matthewmjscott

09-18-2007, 04:59 PM

Oh my god thank you so much... you are totally awesome... thanks for helping me out when other people have turned me away!

This truly is the best coding forum in the world - I will be recommending it to all my friends!

And Twey, I will be working on upgrading/moving soon!

Thanks a million!

EDIT: Only problem is, the code you posted earlier on doesnt work:

<?php foreach($pages as $page) { ?>
<li><a href="<?php echo $page->url ?>"<?php if($page == $this_page) { ?> class="current"<?php } ?>><?php echo $page->title; ?></a></li>
<?php } ?>

It doesn't change the class to current on the selected tabs for some reason...

I should point out I need the ID of the <li> tags to be current and not the class of the links ;)

matthewmjscott

09-18-2007, 06:49 PM

Oh wait, fixed this problem myself.
$this_page should be
$current_page

Thanks again!

Twey

09-18-2007, 07:28 PM

Ah -- yes, my error.

stroppy

12-08-2007, 02:10 PM

Hey ;)

I came across this page whilst searching the web and just wanted to ask:

Is there any easy way to mod the script so that the class for one link could change to current for two or more URLs?

For example, I may want a "Home" button in the menu to change to a current class if the url read both http://www.example.com and http://www.example.com/index.php.

I hope I was clear enough? Sorry but I'm a total noob =(