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: [Select]

<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>

Code: [Select]

/* 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;}

[jacobi22]

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 =)

looking for menu-parent

[jacobi22]

i hope, my bad english is enough for that... 

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: [Select]


<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) ?>


Code: [Select]

/*==== 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;}

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/

[Argos]

If you want to use sliding effects on the sidebar menu as well, call this jquery code in your template:

Code: [Select]

// Sidebar Menu effects
$('.side_bar_menu a').not(".active").hover(
function() {
$(this).children('.hover_span').stop().animate({width:'100%'},500,'easeOutExpo');
},
function() {
$(this).children('.hover_span').stop().animate({width:'0'},200,'easeOutExpo');
}
);
You can see the site I used all this on www.emilynijhuis.nl

[Argos]

Good to know you succeeded. If you like, please share the link to the site you're building. It's always nice to see the actual result of combined efforts.

[Argos]

Well, the sites looked fine, but they were not made in WB, so I removed them. And I suggested to show the result of the menu discussion in this topic, not unrelated projects 

So show the site with the created menu when you're ready (if you like), ok?