Printable View
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
Ive seen some menus with a current, or active tag, ive tried this but i cant seem to get it to work.
Please help.
could you post the code ?
the CSS
The HTMLCode:#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;}
Code:<div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
</div>
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.
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;).Quote:
Code:<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>
"Current page" style links are usually done by inserting a class into a link server-side, e.g. (Smarty syntax):Code:{foreach from=$pages item=page}
<a href="{$page.url}"{if $page == $this_page} class="current"{/if}>
{$page.title}
</a>
{/foreach}
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/dynamici...switchmenu.htm
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 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?
Is there any non-Smarty alternative to this code?Quote:
Originally Posted by Twey
Quote:
Is there any non-Smarty alternative to this code?Code:{foreach from=$pages item=page}
<a href="{$page.url}"{if $page == $this_page} class="current"{/if}>
{$page.title}
</a>
{/foreach}
PHP Code:<?php
foreach $pages as $page
{?>
<a href="<? $page.url; ?>" <? if($page == $this_page) ?>class="current"><? $page.title ?></a>
<? } ?>
Thanks Boogyman!
Is there some other code required to make that work?
I found this Smarty-related PHP code which if re-written might help the other code posted by boogyman:
Code: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;
}
boogyman broke the code. Without Smarty, it's:... assuming $pages is an array of "page" objects with "url" and "title" properties. It was mostly example pseudo-code though.Code:<?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 } ?>
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.
This is my array... doesn't appear to be working though:
Code:<?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',
);
?>
I said "objects," not "arrays."Code: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();
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...
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.Quote:
Originally Posted by matthewmjscott
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
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 [code][/code] tags
No, he's right in this instance, I tried to write PHP4-compatible code but failed. Shame on me. The code for PHP4 is:Code: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();
Sorry to be a huge pain but I am still getting the following error:
Line 95:Quote:
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
There is no PHP code in there whatsoever apart from what I have used from this thread.Code:static $instances = array();
I'm a little clueless now :confused:
Ah, static variables in PHP4 are pretty much non-existant:I hate PHP :-\Code:$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 too, it's frustrating...
anyway, I'm now getting an error on line 97, which is this:
It's a static variable, which is what seems to be causing the problem... hopefully this should be the last time I need help?Code:static function get_current() {
I'm sorry for being a complete and utter pain!
Oh, yeah, missed that one: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 :)Code:$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();
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:
It doesn't change the class to current on the selected tabs for some reason...Code:<?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 } ?>
I should point out I need the ID of the <li> tags to be current and not the class of the links ;)
Oh wait, fixed this problem myself.should beCode:$this_page
Thanks again!Code:$current_page
Ah -- yes, my error.
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 =(