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

Code:

#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

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">&bull; Fiber Optic Catalog Download(PDF)</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/fiber-optic-catalog.asp">&bull; Request a Catalog in the Mail</a></dd>
	<dd><a href="https://www.fiscatalog.com/">&bull; Shop Fiber Optic Products Online</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/join-mailing-list.asp">&bull; 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">&bull; Copper Cabling Catalog Download(PDF)</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/fiber-optic-catalog.asp">&bull; Request a Catalog in the Mail</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/join-mailing-list.asp">&bull; 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">&bull; Fiber Network Avoiding Local Loop Charges</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=9">&bull; Fiber Optic Waste Container</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=8">&bull; Fiber Optic Blind Mate Connector</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=7">&bull; Fiber Optic Conduit Pull Boxes</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=6">&bull; Fiber Optic Rotary Joints</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=4">&bull; Multimode Fiber Optic Cable</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=5">&bull; Fiber Optic Fault Checker</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/white-papers/WhitePapers.asp?wpid=3">&bull; 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">&bull; Keynote Speaker Reveals Future of Fiber Optics At Exclusive Seminar</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/press/PressReleases.asp?prid=27">&bull; All New Fiber Optic Website</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/press/PressReleases.asp?prid=26">&bull; FIS Named Exporter of the Year</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/press/PressReleases.asp?prid=6">&bull; Terminated Fiber Optic Adapter Panels</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/press/PressReleases.asp?prid=5">&bull; 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">&bull; Fiber Optic Glossary</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-cable/fiber-optic-cable-guide.asp">&bull; Fiber Optic Cable Guide</a></dd>
	<dd><a href="http://www.fiber-optic-forum.com/">&bull; Fiber Optic Forum</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/faq/">&bull; Frequently Asked Questions</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/copper-cable/copper-cabling-terms.asp">&bull; Copper Cabling Glossary </a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/optical-fiber-type-color-code.asp">&bull; 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">&bull; Distance Conversion</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/optical-link-loss-budget.asp">&bull; Fiber Optic Link Loss Budget</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/dbm-milliwatt-conversion.asp">&bull; Converting Power (dBm) To Milliwatts</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/optical-fiber-specifications.asp">&bull; Specifications for Optical Fiber Types</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/optical-network-connection-speeds.asp">&bull; Connection Speeds by Network Type</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/fiber-optic-network-specifications.asp">&bull; Fiber Optic Network Specifications</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/fiber-optic-cable-color-codes.asp">&bull; Fiber Optic Cable Color Codes</a></dd>
	<dd><a href="http://www.fiberinstrumentsales.com/fiber-optic-reference-tools/optical-decibel-conversions.asp">&bull; 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>

**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

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">&bull; Fiber Optic Catalog Download(PDF)</a></dd>
        <dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/fiber-optic-catalog.asp">&bull; Request a Catalog in the Mail</a></dd>
        <dd><a href="https://www.fiscatalog.com/">&bull; Shop Fiber Optic Products Online</a></dd>
        <dd><a href="http://www.fiberinstrumentsales.com/contact-FIS/join-mailing-list.asp">&bull; 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):

Code:

{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/dynamici...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 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

Originally Posted by Twey

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):

Code:

{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

Code:

{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 Code:


<?php 

foreach $pages as $page 

{?>

<a href="<? $page.url; ?>" <? if($page == $this_page) ?>class="current"><? $page.title ?></a>

<? } ?>

Thread: Help creating a current link

Thread Tools

Search Thread

Help creating a current link

Bookmarks

Bookmarks

Posting Permissions