Forums

Multi level (advanced) submenu

Permalink
The problem is that I've an advanced submenu. In which every level has different markup. So the second level has a div.dropdown and a li with its own style + a <div> around the <a href..>
third level a different li class, and a <span>within the <a href..>
And then a level that contains an image.

So actually 4 different level with different markup. So with the standard auto-nav every submenu level will get the same markup.
How can I code it per level though?
What is the code to say, if level x do that..?

Thanks.
Dutchwave
 
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
You can customise each level through css, it's a bit of work though.

You might want to also take a look at this add-on:

http://www.concrete5.org/marketplace/addons/mega-menu/...

You can do some pretty fancy stuff with it, including customizing each level and adding icons / graphics etc too.
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
On the CSS side of it... you do it like this:

.nav (that's your main navigation styles)

.nav ul (that's your list specifics)

.nav ul li (that's your list item specs)

.nav ul li a (that's your page link styles)


Then, the submenu follows a similar pattern:

.nav ul li ul

.nav ul li ul li

etc...etc...etc... it can get tedious keeping track!
Dutchwave replied on at Permalink Reply
Dutchwave
he he, yeah it becomes like .nav ul li ul li ul li ul li..

But because of the repeat more like .nav ul li <div class="dropdown"> ul li <div class="dropdown"> ul li <div class="dropdown"> ul li..
And then even more stuff..

Found something with $thisLevel = $ni->getLevel();
See If can do something with this to define the correct code for every level.
mnakalay replied on at Permalink Best Answer Reply
mnakalay
Hello,
In the autonav view.php file, at the bottom you have
foreach ($navItems as $ni) {

And then somwhere down that you have
if ($ni->hasSubmenu) {


You can have access to 2 other pieces of information concerning the nav object:

$ni->level : number of levels deep the current menu item is from the top (top-level nav items are 1, their sub-items are 2, etc.)

$ni->subDepth : number of levels deep the current menu item is *compared to the next item in the list* (useful for determining how many <ul>'s to close in a nested list)

This should allow you to achieve what you want.
Dutchwave replied on at Permalink Reply
Dutchwave
Thanks that was exactly what I was looking for!
Dutchwave replied on at Permalink Reply
Dutchwave
Allright I thought I sort of had it. But only when I'm viewing the deepest layer. If I'm 2 levels up on a page in the site tree, it wont show the deepest layer in the submenu. When being on the page that contains the submenu it will only show one layer down. And when on a page without a submenu it wont show the submenu under any page.

How to define the amount of levels to be displayed when a different page is being displayed?

The code:
echo '<ul class="nav">'; //opens the top-level menu
foreach ($navItems as $ni) {
   echo '<li class="' . $ni->classes . '">'; //opens a nav item
if ($ni->level  == 1 ) {echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';}
if ($ni->hasSubmenu && $ni->level  == 1) {
      echo '<div class="dropdown">'; //opens a dropdown sub-menu
   } 
if ($ni->level  == 2 ) {echo '<div><a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</div></a>';}
if ($ni->level  == 3 ) {echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '"><span>' . $ni->name . '</span></a>';}
if ($ni->level  == 4 ) {echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';}
   if ($ni->hasSubmenu) {
      echo '<ul>'; //opens a dropdown sub-menu
   } else {
      echo '</li>'; //closes a nav item
      echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
Viewing 15 lines of 18 lines. View entire code block.
mnakalay replied on at Permalink Reply
mnakalay
It really depends on your css and javascript if you're using any.
What would be useful is if you could share your html code so we could see the result you want to achieve.
Dutchwave replied on at Permalink Reply
Dutchwave
Actually, javascript is not used. Pure css, I just have a complicated design for the submenu. So thats why I need different HTML in each level.
Though I could probably sort it out now with just css. There must be a way with php to sort this out in better way. I mean, it allready works when I'm on level 3 or 4.
Just on level 1 and 2, level 3 or 4 is not being displayed.

But basicly this how the HTML should look like on all levels (and does when on a lvl 3 or 4 page:
<nav>
         <ul>
               <li><a href="index.html">Home</a></li>
               <li class="active"><a href="#">Boards</a>
                   <div class="dropdown"><ul>
                        <li class="windsurf"><div><a href="#">Windsurf</a></div>
                            <ul>
                                <li class="windsurfwave"><a href="#"><span>Wave</span></a>                                
                                    <ul>
                                        <li><a href="#">Quad wave line<img src="img/temp_wave.png" width="134" height="34" alt=""/></a></li>
                                    </ul>
                             </li>
                            </ul>
                    </li>
                   </ul>
Viewing 15 lines of 20 lines. View entire code block.


This is how it looks like when I'm on boards:
<nav>
         <ul>
               <li><a href="index.html">Home</a></li>
               <li class="active"><a href="#">Boards</a>
                   <div class="dropdown"><ul>
                        <li class="windsurf"><div><a href="#">Windsurf</a></div>
                    </li>
                   </ul>
                   </div>
                </li>
               <li><a href="#">Contact</a></li>
            </ul>
      </nav>


And no submenu when going to home or contact. (but there should be offcourse)
Dutchwave replied on at Permalink Reply
Dutchwave
Allright, stupid me.
Some pages still had a wrong setting... Display relevant pages only.

Anyway, what is a few posts up works.
keeasti replied on at Permalink Reply
keeasti
This looks useful :)