Ok, step-by-step:
1) Look at it and get it here. (You might need to d/l jQuery if the archive lacks a distribution.)
2) Go to templates, create a copy of nav_default.tpl and replace the code of that with the following:
Code:
<?php
echo PHP_EOL . '<ul class="sf-menu sf-navbar ' . $this->level .'">' . PHP_EOL;
foreach ($this->items as $item) {
//check for variables
if ($item['class']) {
if (strstr($item['class'], 'trail')) { //begin: Is part of trail?
$navItemClass = ' class="' . $item['class'] . ' current" ';
}else{ // is not part of trail
$navItemClass = ' class="' . $item['class'] . '" ';
}//end part of trail check
$navItemClassCurrent = ' class="' . $item['class'] . ' current" ';
} else { unset($navItemClass); }
if ($item['pageTitle'] != "") {
$navItemTitle = ' title="' . $item['pageTitle'] . '" ';
}else {
$navItemTitle = ' title="' . $item['title'] . '" ';
}
if ($item['accesskey']) {
$navAccessKey = ' accesskey="' . $item['accesskey'] . '" ';
}
if ($item['nofollow']) {
$navNoFollow = ' rel="nofollow" ';
}
//output
if ($item['isActive']) {
echo '<li ' . $navItemClassCurrent . '>'
.'<a ' . $navItemClassCurrent .'>' . $item['link'] . '</a>'
. $item['subitems']
. PHP_EOL
. ''
. PHP_EOL;
} else {
echo '<li ' . $navItemClass . '>'
.'<a '
. $navItemClass
.'href="' . $item['href'] . '" '
. $navItemTitle
. $navAccessKey
. $navTabIndex
. 'onclick="this.blur();"' . $item['target']
. '">'
. $item['link']
. '</a>'
. $item['subitems']
. PHP_EOL
. ''
. PHP_EOL;
}
}
echo "[/list]";
?>
3) Create a new module, select "Navigation menu" as the type and select your newly created .tpl as the "Navigation template"
4) I'm too retarded to use the checkboxes to include the navbar and superfish.css files, so add this in your preferred layout replacing the "/path/to/your/" with your path. Make it a relative one, if you're a real geek.
Code:
<link rel="stylesheet" type="text/css" media="screen" href="/path/to/your/css/superfish.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/path/to/your/css/superfish-navbar.css" />
<script type="text/javascript" src="/path/to/your/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/path/to/your/js/superfish.js"></script>
<script type="text/javascript" src="/path/to/your/js/hoverIntent.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("ul.sf-menu").superfish({
pathClass: 'current' ,
autoArrows: false,
pathLevels: 1,
dropShadows: false
});
});
</script>
I heard people add custom <script>s to some fancy frontend-<head> template, well, you can do that if you want.
5) Modify the CSS to suit your colors and add your CSS navbar skin here (consolidate the .css), so others have something to choose from
6) Say thanks to Joel Birch and the jQuery community, I mean it! (Post a thank you here with the subject Superfish: http://groups.google.com/group/jquery-en/)
7) Clean your altar for the TypoLight developers and say thank you here: http://www.typolight.org/team.html (Choose at least two people!)
8) Say a toast in my honor when celebrating how quickly you made your navigation if you found this information useful.
9) Keep up the F/OSS spirit!
Bookmarks