Page 1 of 3 123 LastLast
Results 1 to 10 of 29

Thread: Help creating a current link

  1. #1
    Join Date
    Nov 2005
    Location
    Utica, NY
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Help creating a current link

    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

  2. #2
    Join Date
    Nov 2005
    Location
    Utica, NY
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Please help.

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    could you post the code ?

  4. #4
    Join Date
    Nov 2005
    Location
    Utica, NY
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  5. #5
    Join Date
    Nov 2005
    Location
    Utica, NY
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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 &bull; 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}
    Last edited by Twey; 09-10-2007 at 10:23 PM. Reason: Whoops, duplicate line.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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

  8. #8
    Join Date
    Nov 2005
    Location
    Utica, NY
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  9. #9
    Join Date
    Sep 2007
    Location
    Kent, UK
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Twey View Post
    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 &bull; 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?

  10. #10
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •