How to create Horizontal main menu and Vertical sub menu?

[aurelius]

Hi guys,

I'm sorry if this question has been asked before, but I have tried searching and have not yet found an answer. I am trying to create a WB site with a horizontal main menu and a vertical sub menu. Basically exactly the same menu structure as the main WB site:
http://start.websitebaker2.org/en/introduction.html

Is there any templates out there that can do this? Does it work well with the CMS? For example if I add a main page it would add the page button to the horizontal menu, but if I added a sub page it would add it to the vertical side menu?

Any ideas would be much appreciated.

Thanks.

Aurelius

[vyni]

Sure,
just look in addons - templates, choose one, download, install and modify it.

regards from Himberg

[aurelius]

Thanks vyni,

I'm not that experienced yet, I was wondering if there was a template that already does it. If you have some more tips on how to modify the menu to work that way that would be great using an existing template, I am more than happy to try to do it myself.

Thanks very much for your help.

[markywatts]

Hi,

I need to get a site working with the navigation working exactly the same way as the website baker site.
horizontal main navigation items
sub menu items down the left
and submenu items that stay visible when you click one of them:

Just like here:
http://addons.WebsiteBaker.org/pages/modules/page-modules.php
Please help, my client is insistent that it works this way!

Thanks
Marky

[Argos]

Try this for the horizontal menu:

Code: [Select]

<div id="navContainer">
<div id="nav" class="clearfix">
<?php show_menu2(0, SM2_ROOT+1, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, &#39;<ul id="header_menu" class="menu">&#39;); ?>
</div>
</div>
And this for the vertical menu:

Code: [Select]

<div id="submenu">
<div id="head">
<?php show_menu(0, 2, -1, false, &#39;<li>[a][menu_title][/a]&#39;, &#39;</li>&#39;, &#39;<ul>&#39;, &#39;</ul>&#39;, &#39;&#39;, &#39;class="menu_current"&#39;, 0); ?>
</div>
Use this CSS for starters:

Code: [Select]

#submenu ul,
#submenu li{list-style-type:none;margin:0;padding:0;}
#submenu li{border-top:1px solid #b5b6b5;}
#submenu a:link,
#submenu a:visited,
#submenu a:active,
#submenu a:hover {line-height:22px;color:#333;font-size:95%;display:block;text-decoration:none;padding:0 10px;font-weight:bold;}
#submenu a:hover {background-color:#b5b6b5;}
#submenu ul li ul li a {background-color:#f9f9f9;padding:0 10px 0 25px !important;color:#666 !important;font-weight:normal !important;}
#submenu .menu_current {background-color:#fff;}

#nav {padding:0;}

#nav ul {list-style-type:none;margin:0;padding:0;font-size:85%;width:auto;position:relative;}
#nav ul li {float:left;color:#333;text-align:center;font-weight:bold;border-right:1px solid #b5b6b5;}
#nav ul li a {display:block;padding:5px 15px;color:#333;text-decoration:none;}

/* Root Level Link Formatting */
#nav ul li a:hover,
#nav ul li a.active,
#nav li a:focus,
#nav li a:active {background:url('bg_hover_topmenu.jpg') 0 0 repeat-x;border-color:#fff;color:#4b4c4d;}

/* Current page Customisations*/
#nav li.menu-current a {background:url('bg_hover_topmenu.jpg') 0 0 repeat-x;color:#333;font-weight:bold;}

/* 2nd Child menu */
#nav .menu li ul {position:absolute;width:20em;margin:-1px 0 0 -1px;display:none;border:1px solid #b5b6b5;border-right:none;font-size:100%;}
#nav .menu li ul li ul {margin:-1px 0 0 0;border:1px solid #b5b6b5;border-right:none;}
#nav .menu li ul li,
#nav .menu li ul li ul li {background:#ededed /* DONT REMOVE! */;width:20em;text-align:left;font-weight:normal;margin:0;padding:0;line-height:1.2em;}
#nav .menu li ul a,
#nav .menu li ul li ul li a  {display:block;padding:5px 15px;background:#ededed;color:#333;border:0;}

/*special settings for IE6 */
#nav .menu li ul {_margin:0 0 0 -1px; /* margin settings for IE6 */}
#nav .menu li ul li ul {_margin:-1px 0 0 1px; /* margin settings for IE6 */}

/* 2nd Child link hover */
#nav .menu li ul a:hover,
#nav .menu li ul a:focus,
#nav .menu li ul a:active {color:#333;background:#90c1e1;border:0;}

/* Show and hide */
#nav .menu li:hover ul,
#nav .menu li a:focus ul,
#nav .menu li.subMenu ul {display:block;}
#nav .menu li ul ul {display:none;}
#nav .menu li:hover ul ul,
#nav .menu li.subMenu ul ul {display:none;}
#nav .menu li:hover ul,
#nav .menu li li:hover ul,
#nav .menu li.subMenu ul,
#nav .menu li li.subMenu ul {display:block;}


/* Positioning the Pop-out Drops */
#nav li {position:relative;}
#nav ul ul ul {position:absolute;top:0;left:100%;}
Put this inside the HEAD of your template:

Code: [Select]

<!--[if IE]>
<style type="text/css" media="all">
body {behavior: url("<?php echo TEMPLATE_DIR; ?>/csshover.htc");}
</style>
<![endif]-->
And put the htc-file in your template directory. You can download it at: http://www.xs4all.nl/~peterned/htc/csshover3.htc

I took this source code from a site I made for a client once. It probably will not be working as you want right away, but it give you a good starting point.

[markywatts]

Thank you  Marky