Over a million developers have joined DZone.

Suckerfish Navigation With Typoscript (2 Level)

·

# Suckerfish Navigation

temp.nav_main = HMENU
temp.nav_main.entryLevel = 0
#temp.nav_main.excludeUidList = 48
temp.nav_main.1 = TMENU
temp.nav_main.1 {
  expAll = 1
  wrap = 
  NO.wrapItemAndSub = 
  • |
  • ||*||*|
  • |
  • | NO.stdWrap.htmlSpecialChars = 1 ACT < NO ACT = 1 ACT.wrapItemAndSub =
  • |
  • ||*||*|
  • |
  • | ACT.stdWrap.htmlSpecialChars = 1 } temp.nav_main.2 < temp.nav_main.1 temp.nav_main.2 { wrap =
      |
    NO.ATagParams = ACT.wrapItemAndSub =
  • |
  • } page.10 < temp.nav_main
    Note: For windows IE include the following Javascript Snippet on your page: // patch IE's :hover & :focus problems with tags other than sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i Style it with CSS: /* 1. Level */ #nav, #nav UL { padding:0; margin:0; list-style:none;} #nav LI { float:left; padding:5px 21px 3px 21px; background:#3477b5; border-top:5px solid #1b5e96; border-bottom:4px solid #3477b5;} #nav LI.last { background-image:0;} #nav LI A { display:block; color:#FFF; text-transform:uppercase; font-size:10px; font-weight:bold; letter-spacing:1px;} #nav LI:hover , #nav LI.sfhover { background:0; background:#1b5e96; border-top-color:#1b5e96; border-bottom-color:#1b5e96;} #nav LI.act { background:0; background-color:#e4e7e5; border-top-color:#e4e7e5; border-bottom-color:#e4e7e5;} #nav LI.act A { color:#1b5e96;} /* 2. Level */ #nav LI UL { position:absolute; width:20em; left:-999em; margin:7px 0 0 -21px;} HTML>BODY #nav LI UL { margin-left:0px;} #nav LI UL LI { width:15em; background:#FFF; border:1px solid #E0E1DB; border-width:0 1px 1px 1px; padding:0 0 0 7px;} #nav LI:hover UL LI A, #nav LI.sfhover UL LI A { text-transform:none; letter-spacing:normal; font-weight:normal; color:#1b5e96; padding:4px 2px 4px 2px;} #nav LI UL LI:hover, #nav LI UL LI.sfhover { background:#f1f3f2 url('bg_nav_arrt.gif') no-repeat right 8px; border-bottom-color:#E0E1DB;} #nav LI UL LI.act2 { background-color:#f1f3f2;} #nav LI:hover UL, #nav LI.sfhover UL { left:auto;} #nav A { text-decoration:none;} #nav A:hover { text-decoration:none;}
    Topics:

    The best of DZone straight to your inbox.

    SEE AN EXAMPLE
    Please provide a valid email address.

    Thanks for subscribing!

    Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
    Subscribe

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}