[solved] The menu

[qwalk]

Hi, I am creating a website for a customer, and the customer requested a special menu in the top banner.

I've attacked an image.

As you can see the menu consists of 6 links, and he want's half of the menu on the left side of the vertical separator, and the other half on the right side.

Is this possible? And how?

[velden]

Should it support sub-menu's from that menu? E.g. dropdown. Or just that six pages?

You could of course use floating <li> and make sure just two of them fit within the containing block.

Code: Select all

Just an example to show what I mean

<div style="width:200px;">
<ul>
  <li style="display:block;width:90px;margin-right:20px;">Menu 1</li>
  <li style="display:block;width:90px;">Menu 4</li>
  <li style="display:block;width:90px;margin-right:20px;">Menu 2</li>
  <li style="display:block;width:90px;">Menu 5</li>
  <li style="display:block;width:90px;margin-right:20px;">Menu 3</li>
  <li style="display:block;width:90px;">Menu 6</li>
</ul>
</div>

Use a background for the div to display separator.
It is also possible to check in menu manager for the length of the array with nodes and if halfway close your left list and create the right one, etc.

Or don't use menu manager at all if those 6 pages are fixed (aliasses won't be changed, no pages removed, added) and create the list manually with {cms_selflink page='PAGEALIAS'}

[qwalk]

Should it support sub-menu's from that menu? E.g. dropdown. Or just that six pages?

You could of course use floating <li> and make sure just two of them fit within the containing block.

Code: Select all

Just an example to show what I mean

<div style="width:200px;">
<ul>
  <li style="display:block;width:90px;margin-right:20px;">Menu 1</li>
  <li style="display:block;width:90px;">Menu 4</li>
  <li style="display:block;width:90px;margin-right:20px;">Menu 2</li>
  <li style="display:block;width:90px;">Menu 5</li>
  <li style="display:block;width:90px;margin-right:20px;">Menu 3</li>
  <li style="display:block;width:90px;">Menu 6</li>
</ul>
</div>

Use a background for the div to display separator.
It is also possible to check in menu manager for the length of the array with nodes and if halfway close your left list and create the right one, etc.

Or don't use menu manager at all if those 6 pages are fixed (aliasses won't be changed, no pages removed, added) and create the list manually with {cms_selflink page='PAGEALIAS'}

Hi, thanks for your reply.

The main menu is and will always be those 6 links, but each link (except front page) will have a sub-menu on a left-column in the main container. I will solve this with {menu start_level="2"}.

But yeah I guess I can work without the {menu} in the template, by creating and styling my own ul, li menu. But that will of course be static and I will have to update links manually if they change name etc.

I didn't think of that.. Thanks

[velden]

But yeah I guess I can work without the {menu} in the template, by creating and styling my own ul, li menu. But that will of course be static and I will have to update links manually if they change name etc.

{cms_selflink} will take care of name changes as long as the alias does not change.

However you can also use a menu template and {menu number_of_levels=1}.
If you then use the floating <li> it will be quite easy to accomplish with some css styling. Of course you need then use the order in cmsms of the pages: 1-4-2-5-3-6

[qwalk]

But yeah I guess I can work without the {menu} in the template, by creating and styling my own ul, li menu. But that will of course be static and I will have to update links manually if they change name etc.

{cms_selflink} will take care of name changes as long as the alias does not change.

However you can also use a menu template and {menu number_of_levels=1}.
If you then use the floating <li> it will be quite easy to accomplish with some css styling. Of course you need then use the order in cmsms of the pages: 1-4-2-5-3-6

I ended up creating a static menu in the template using {cms_selflink}. The menu links will probably never change, and if so, it will be no problem to change that. Thanks for your suggestions.!

[Dr.CSS]

You could use the code on this page to break your UL LI into 2 block of 3, by replacing the 6 with 3...

http://how-i-did-that.com/cgblog/4/15/C ... ation.html