[HOWTO] Horizontal (jQuery) SuperFish Navigation Bar

Hey everyone,
First of all, thx to all the ones involved for putting your effort in developing TL, it's an outstanding system!

Have a question: I'm trying hard to implement this menu without having to hack around in any of the core php code.
So far I came up with the following replacement for nav_default.tpl that mostly works (it's basically the same, except I prefer HTML IN PHP instead of the other way around 8-)):

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]";
?>

---

Now, I'm struggling to have an "active trail" - e.g. if you look at the example of the menu, it should basically mark as "active"/"current" all those items that LEAD to the active/current item, how would I go about achieving that in a TypoLight-consistent manner?

Thanks a lot in advance!

PS: for the ones that want the normal jquery horizontal menu,
download the latest SuperFish here: http://users.tpg.com.au/j_birch/plugins ... /#download
and add the following code to the page layout along with the tpl from above:

Code:

---

<link rel="stylesheet" type="text/css" media="screen" href="/path/to/css/superfish.css" />
<script type="text/javascript" src="/path/to/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/path/to/js/superfish.js"></script>
<script type="text/javascript" src="/path/to/js/hoverIntent.js"></script>
<script type="text/javascript">
jQuery.noConflict();
    jQuery(document).ready(function(){
        jQuery("ul.sf-menu").superfish({
            pathClass:  'current' ,
        });
    });
</script>

---

PPS: Why make it so difficult to have a decent horizontal menu? Arg!

Mmmh, ok, let me rephrase the question..
How can I include the breadcrumb variables in my nav_NavBar.tpl so I can do a simple check if the $item['link'] is part of the breadcrumb trail?
E.g. how do I combine templates? Do I have to extend ModuleBreadcrumb.php class to include navigation?

Ok, nevermind, didn't see that class trail is added to the ...(Duh!) trail :lol:

So for the ones who want a nice navbar like in the above link, I replaced the code with the working one in my original post.
The class "current" will be added to the trail via strstr, so Joel Birch's Superfish can work it's magic. Pretty cool to put the pathLevels to 2 or more and have the vertical sub-sub-menu be open on page-load. Breadcrumb on steroids.

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!

It works perfectly! Thanks!

My browser shows some weird characters in this part of the code:

Quote:

---

echo '<li ' . $navItemClass . '>'

---

--> between ' and >'
but it's only blank space..

Cheers,
Uros

Fixed that, weird characters indeed. Must have been my editor. Thanks Uros! Glad that it works!:)

Cheers =qp=, and Thank You for a excellent tutorial :)

I've got everything to work, except that the drop-down-menu doesn't work in Safari/Firefox on mac or firefox on linux.
IE6 on PC works OK, - don't know about ie7 or ie8.
When hover the menu-link you see only quarter of the drop-down-menu.
I've narrowed the problem down to the typolight.css in the system-folder.
The overflow property:
.block{overflow:hidden;}
When I delete that line the drop-down works. But then some other weird things happens.

Can anybody help with this one..?
My testsite is:
http://playitagainsam.dk/
(hover the Home-link...)

Regards - Per

Hi perdy, glad you found the tutorial useful!

What if you add

Code:

---

.mod_navigation {overflow:visible;}

---

to any of the .css files (preferably superfish.css, I guess)?

There was a forum post somewhere that alleviated this problem, but I can't seem to find it right now, it should do the trick though.