Suckerfish Navigation With Typoscript (2 Level)

• Tweet
• 

# 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 = <ul id="nav"> | </ul>
  NO.wrapItemAndSub = <li>|</li>||*||*|<li class="last">|</li>|
  NO.stdWrap.htmlSpecialChars = 1
  ACT < NO
  ACT = 1
  ACT.wrapItemAndSub = <li class="act">|</li>||*||*|<li class="act last">|</li>|
  ACT.stdWrap.htmlSpecialChars = 1
}

temp.nav_main.2 < temp.nav_main.1
temp.nav_main.2 {
  wrap = <ul> | </ul>
  NO.ATagParams =
  ACT.wrapItemAndSub = <li class="act2">|</li>
}

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

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			sel = document.getElementsByTagName("select");
			for (var i=0; i<sel.length; i++) {
				sel[i].style.visibility = 'hidden';	
			}
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			sel = document.getElementsByTagName("select");
			for (var i=0; i<sel.length; i++) {
				sel[i].style.visibility = 'visible';	
			}
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
	
}
// only win:
if (window.attachEvent) window.attachEvent("onload", sfHover);

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;}

Tags:
• css
• javascript
• Typo3
• TypoScript