Page 1 of 1
[solved] The menu
Posted: Mon Jun 24, 2013 6:14 am
by 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?

Re: The menu
Posted: Mon Jun 24, 2013 9:56 am
by 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'}
Re: The menu
Posted: Mon Jun 24, 2013 10:56 am
by qwalk
velden wrote: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
Re: The menu
Posted: Mon Jun 24, 2013 11:54 am
by velden
qwalk wrote:
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
Re: The menu
Posted: Wed Jul 03, 2013 8:27 am
by qwalk
velden wrote:qwalk wrote:
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.!
Re: [solved] The menu
Posted: Wed Jul 03, 2013 6:48 pm
by 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