By knalstaaf on

This is what I want to achieve...

I've got the main menu on its spot in the Garland-header, but the submenu-items appear right next to the mainmenu-item (by default, I suppose). I wondered how I could separate those two graphically.

So basically I want the main menu on top, the submenu (of an item in the main-menu) in the left bar, and a submenu-item in the submenu (<ul> in a <li> for instance).

What is the best way to achieve this layout?

This is how the structure in my Drupal-admin looks like now. I've been looking for hours to solve this.

⋅ Categories: Drupal 6.x

Comments

AgaPe’s picture

AgaPe commented

did you try using css?

knalstaaf’s picture

knalstaaf commented

The problem is that both items are stuck to each other in the html.

<ul class="menu">
   <li class="expanded last active-trail"><a href="/nb/node/1">MAIN MENU ITEM (Webdesign & development)</a>
        <ul class="menu">
              <li class="leaf last active-trail"><a href="/nb/node/2" class="active">SUBMENU ITEM (Webdesign)</a></li>
        </ul>
   </li>
</ul>

I want a DIV on top of the layout with the main menu (primary links), and another DIV, totally separated, with the submenu of an item in the main menu, positioned in the left bar.

It's actually basic stuff I'm asking. Drupal has a bad name for fulfilling basic needs in a simple way, hasn't it?

AgaPe’s picture

AgaPe commented

not sure if i understand you well but in css you can point to the second menu, this will not affect the first, something like should work i guess:

.menu .menu{
  margin: 10px 0 10px 30px;
}

you could also create a block and print there menu items manualy
you can get the tree by

$tree = menu_tree_page_data('primary-links');
knalstaaf’s picture

knalstaaf commented

EDIT: Studying the tree-thing, thanks.
EDIT2: Tree-thing doesn't seem to work properly.

As you can see in the code posted above, you see that the submenu is an unordered list within a list-item. I want to leave that practice behind and use a DIV (instead of an unordered list) for the main menu, and an unordered list for the submenu (that is derived from a main-menu item).

Translated to html, this would be:

<div class="MAINMENU">
      <a href=#>Webdesign & development</a>
</div>

[Some html in between]

<div class=SUBMENU">
      <ul>
           <li><a href=#>Webdesign</a></li>
      </ul>
</div>

So it's not a CSS-related issue. It's about the html-structure that is applied by Drupal.

Click here for an illustration of what I want to achieve.

Any ideas on how to get this done?

knalstaaf’s picture

knalstaaf commented

All I want is a simple, basic menu. Is that possible with Drupal?

This is what happens: http://i48.tinypic.com/rwnwr5.gif

This is my configuration:

http://i49.tinypic.com/2m5e9uc.gif

http://i45.tinypic.com/fbjkn9.png

http://i46.tinypic.com/t9twyh.gif

And this is what I want: http://i48.tinypic.com/n3t6wm.gif

AgaPe’s picture

AgaPe commented

why the tree way doesn't work? did you clean the registry?

i know you wanted to change into div and stuff, you should be able to do it with tree way.

but with css, without puting it into divs should be easier

MarkLNH’s picture

MarkLNH commented

I have this same need, but for a styling issue. Im not sure whether to override menu_tree_output or try to find a CSS solution.
Update: I did override menu_tree_output()

knalstaaf’s picture

knalstaaf commented

It seems like splitting the primary and secondary links can't be achieved without hacking page.tpl.php.

This is the code you need for the primary links:

<?php if (isset($primary_links)) : ?>
   <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>

For the secondary links:

<?php if (isset($secondary_links)) : ?>
   <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>

Unless with the Menu block module maybe. You can modify the CSS class-names in both the codes above.