WebsiteBaker Support (2.8.x) > Templates, Menus & Design
Questions about navs
jay dogg:
I have a few quick questions about having more then one nav menu. So I have a page call it "company" and it is a top level page with children. I have two menus mainNav and sideNav which both get shown in the template. When I make the company page I added the page to the mainNav. What I would like the sideNav to do is show the first top level page and its children. So if I'm in company I would get a side nav of
Company
child page
child page
child page
But if I went to other top level page, lets call it "services" my side nav would say
Services
child page
child page
child page
I'm new to website baker and maybe a second nav menu isn't even the way to go about maybe I need some code that get the parent and children of the current top level page Im on. Any and all help would be great.
Jay
Argos:
Try this code and css from one of my client sites (edit it to suit your design):
--- Code: ---<div class="sidebar sidemenu">
<?php
// Submenu region, only shown when submenu's are available
ob_start();
show_menu2(0, SM2_ROOT+1, SM2_CURR+2, SM2_ALL|SM2_CURRTREE);
$childmenu=ob_get_contents();
ob_end_clean();
if ($childmenu!="") {
show_menu2(0,SM2_ROOT,SM2_MAX,SM2_CRUMB|SM2_CURRTREE,'<h4 class="title green">[menu_title]</h4>','','','',false,false);
show_menu2(0,SM2_ROOT+1,SM2_ROOT,SM2_ALL|SM2_CURRTREE,'[li][a]<span class="hover_span"></span><span class="link_span">[menu_title]</span></a>','</li>','<ul class="side_bar_menu">','</ul>',false,false);
}
?>
</div>
--- End code ---
--- Code: ---/* Sidebar */
.sidebar {padding:0;margin:-20px 0 0 0;}
.sidebar .title {line-height:24px;font-size:16px;}
.sidebar .title.pink,
.sidebar .title.green,
.sidebar .title.blue {
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
-khtml-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;}
.sidemenu {background:#d4eac8;padding:0 0 20px 0;margin:0 0 30px 0;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;}
/* Sidebar Menu*/
.side_bar_menu {list-style:none;margin:0;padding:0;}
.side_bar_menu > li {margin:1px 0px;}
.side_bar_menu > li + li {}
.side_bar_menu > li > a {display:inline-block;color:#0d351b;text-decoration:none;font-size:13px;position:relative;
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0 4px 4px 0;
-khtml-border-radius:0 4px 4px 0;
border-radius:0 4px 4px 0;}
.link_span {display:block;padding:4px 15px 4px 35px;position:relative;z-index:21;background:url('../images/arrow.png') 16px 7px no-repeat;}
.side_bar_menu > li ul {margin:1px 0 3px 10px;}
.side_bar_menu > li a.active {background:#a8d591;color:#0d351b;}
.side_bar_menu > li a:hover {color:#0d351b;}
.side_bar_menu > li a.active + ul {display:block;}
.side_bar_menu > li ul > li {margin:1px 0px;}
.side_bar_menu > li ul > li > a {display:inline-block;color:#0d351b;font-size:13px;text-decoration:none;position:relative;
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0 4px 4px 0;
-khtml-border-radius:0 4px 4px 0;
border-radius:0 4px 4px 0;}
.side_bar_menu > li ul > li > a.active {background:blue;border-radius:3px;color:#0d351b;}
.hover_span {display:block;width:0;height:100%;background:#a8d591;color:#111;position:absolute;top:0;z-index:20;
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0 4px 4px 0;
-khtml-border-radius:0 4px 4px 0;
border-radius:0 4px 4px 0;}
li.menu-current .link_span {background:#a8d591 url('../images/arrow.png') 16px 7px no-repeat;border-radius:0 4px 4px 0;color:#0d351b;}
.side_bar_menu li ul {display:none;}
--- End code ---
jacobi22:
--- Quote from: jay dogg on January 17, 2014, 11:30:34 PM ---So here is my question when on a child page of company I want company to be in its hover/active state. It turns out the childpage li gets the class "menu_current" and the top level li doesn't get any time of class or hook. Any one have a good idea on how to make this happen? Any help would be awsome =)
--- End quote ---
looking for menu-parent
jacobi22:
i hope, my bad english is enough for that... :roll:
if you are at the main-level, on pages like Company oder Service, the script build a css-class called "menu-current" for the actual page btw menu-point. you have a special css-definition for this class .menu-current in your css-file, everything works, everything is fine.
if you go to a sub-page from "Company", maybe "child page1", the status "menu-current" goes to this sub-menu point,
"Company" is not longer the current page, but it is the parent page of your sub-page, so the script build the css-class "menu-parent" for this main-menu-point
if you like the same style for the parents, copy in your css-file the class .menu-current and rename it to .menu-parent
Argos:
You use a very old menu version called showmenu, but you should a newer one called showmenu2.
See Tutorial link removed 404
This is the code from the site I also took the sidebar menu from:
--- Code: ---
<ul>
<li style="border:none;">
<a class="home" title="Home" href="/pages/home.php"></a>
</li>
</ul>
<?php show_menu2(0,SM2_ROOT,SM2_START+1,SM2_ALL,'[if(id==1){<li class="hide">}else{[li]}][a][menu_title]</a>','</li>','<ul>','</ul>',false,false) ?>
--- End code ---
--- Code: ---/*==== MAIN NAVIGATION ===== */
#dropdownmenu {display:none;}
.jqueryslidemenu {float:left;width:100%;background:url('../images/menu_bg.jpg') repeat-x 0 0;ackground:#25618d;height:38px;font-family:'Open Sans',arial,sans-serif;font-weight:400;font-size:13px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
}
.jqueryslidemenu ul {list-style-type:none;margin:0;padding:0;}
.jqueryslidemenu ul li {list-style-type:none;margin:0;padding:0;border-left:1px solid #5f5f5f;height:38px;position:relative;display:inline;float:left;z-index:100;}
.jqueryslidemenu ul li.menu-last {border-right:1px solid #5f5f5f;}
.jqueryslidemenu ul li a {color:#fff;display:block;padding:0 15px;text-decoration:none;height:38px;line-height:38px;}
* html .jqueryslidemenu ul li a {display:inline-block;}/*IE6 hack to get sub menu links to behave correctly*/
.jqueryslidemenu ul li a:hover,
.jqueryslidemenu ul li.active,
.jqueryslidemenu ul li.menu-current,
.jqueryslidemenu ul li.menu-parent {background:url('../images/menu_bg-hover.jpg') repeat-x 0 0;}
.jqueryslidemenu ul li li {padding:0;border:none;}
.jqueryslidemenu ul li ul {position:absolute;left:0;top:38px !important;display:block;visibility:hidden;padding:0 !important;margin-left:-1px;border:1px solid #5f5f5f;border-top:none;border-bottom:2px solid #25618d;}
.jqueryslidemenu ul li ul li {display:list-item;float:none;background:#4d4d4d;margin:0;padding:0 15px;}
.jqueryslidemenu ul li ul li a {width:250px;padding:0;margin:0;background:#4d4d4d;border-top:1px solid #5f5f5f;}
.jqueryslidemenu ul li ul li.menu-last {border-right:none;}
.jqueryslidemenu ul li ul li.menu-first a {border-top:1px solid #4d4d4d;}
.jqueryslidemenu ul li ul li.menu-last a {height:37px;line-height:37px;}
.jqueryslidemenu ul li ul li a:hover,
.jqueryslidemenu ul li ul li.active,
.jqueryslidemenu ul li ul li.menu-current a {background:#4d4d4d;border-bottom:none;padding-left:7px;}
.jqueryslidemenu ul li ul li.menu-current {background:#4d4d4d;font-weight:bold;}
/* .jqueryslidemenu ul li ul li ul {left:191px !important;top:-1px !important;padding-top:0 !important;border-top:solid 1px #e3e3e3;} */
.downarrowclass {position:absolute;top:17px;right:16px;}
.rightarrowclass {position:absolute;top:12px;right:5px;}
li.hide {display:none !important;} /* hide the home link in the menu, because an icon is used instead */
a.home {width:50px;height:38px;background:url("../images/home2.jpg") 50% 50% no-repeat;display:block;padding:0 !important;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;}
a.home:hover {width:50px;height:38px;background:url("../images/home_hover2.jpg") 50% 50% no-repeat !important;padding:0 !important;}
--- End code ---
I used a jquery menu called jqueryslidemenu, which you can find here: http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
Navigation
[0] Message Index
[#] Next page
Go to full version