WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: seanie_morris on November 21, 2014, 03:18:51 PM

Title: Greytut child menu display problems
Post by: seanie_morris on November 21, 2014, 03:18:51 PM

Hi All,

I am attempting to integrate a slightly better child menu to the one that occurs in the greytut template. The image attached shows the child items on permanent display.

Originally, the greytut menu call-to-action is:

Code: [Select]

<?php page_menu(); ?>
while I amended it to the usual norm of:

Code: [Select]

<div id="nav" class="clearfix">
          <?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="header_menu" class="menu">'); ?>
          <br />
        </div>
What I am doing is trying to use what I know from the Multifles-3 template, and through trial and error use a mash-up of the code. This is what I am using to produce what you see:

Code: [Select]

#nav {
vertical-align: top;
background-color: #FFFFFF;
width: 180px;
}
#nav ul {
list-style-type: none;
font-size: 13px;
padding-left: 0px;
margin: 0;
}
#nav ul li {
float: left;
text-align: left;
width: 180px;
height: 34px;
vertical-align: middle;
letter-spacing: .1em;
line-height: 34px;
}
#nav ul li a {
padding: 0px 0px 0px 10px;
height: 34px;
display: block;
color: #fff;
background-image: url(images/menu-on.png);
background-repeat: no-repeat;
background-position: center middle;
text-decoration: none;
}

/* Root Level Link Formatting */
#nav ul li a:hover, #nav li a:focus {
padding: 0px 0px 0px 10px;
height: 34px;
color: #fff;
background-image: url(images/menu-over.png);
background-repeat: no-repeat;
background-position: center middle;
text-decoration: none;
}
#nav li a:active, #nav ul li a.active {
padding: 0px 0px 0px 10px;
height: 34px;
color: #fff;
text-decoration: none;
}

/* Current page Customisations*/
#nav li.menu-current a {

height: 34px;
color: #fff;
background-image: url(images/menu-over.png);
}

/* 2nd Child menu */
#nav .menu li ul {
height: 30px;
width: 160px;
text-decoration: none;
}
#nav .menu li ul li {
height: 30px;
width: 160px;
text-align: left;
font-weight: normal;
margin: 0;
padding: 0;
line-height: 30px;
}
#nav .menu li ul a {
padding: 0px 0px 0px 10px;
height: 30px;
width: 160px;
padding: 7px;
background: #713859;
color: #fff;
border: 0;
}

/* 2nd Child link hover */
#nav .menu li ul a:hover {
padding: 0px 0px 0px 10px;
height: 30px;
color: #4b4c4d;
background: #937AB0;
border: 0;
color:#fff;
}

/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {
display: none;
}
#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;
}

/* 3rd Child Menu Appreances */
#nav .menu li ul li ul li a { width: 11.5em; padding: .6em .1em .6em .4em; background: #c6c6c6; color: #fff; }

/* Positioning the Pop-out Drops */
#nav li {position: relative;}

#nav ul ul ul {
position: absolute;
top: 1px;
left: 100%;
}
I don't think the CSS is the problem, but I am including it anyway, just in case.

The child menu items you see underneath the main menu are children of Clinic Services, so their placement is correct.

How do I fix it that they display only when the relevant parent button is clicked?


Thanks in advance,

Seanie.

Title: Re: Greytut child menu display problems
Post by: seanie_morris on November 28, 2014, 06:15:43 PM

I still have not cracked this, if anyone has any suggestions for me...


Seanie.

Title: Re: Greytut child menu display problems
Post by: Gast on November 28, 2014, 07:22:22 PM

SM2_ROOT, SM2_ALL, SM2_ALL
means
Start the menu at root level
show all levels
show all elements in all trees

try
SM2_ROOT, SM2_CURR+1, SM2_ALL
or
SM2_ROOT, SM2_CURR+1, SM2_TRIM

SM2_CURR+N  means:  Always show to the current page + N levels.

SM2_TRIM        Show all sibling menus of pages on the current path.
                       All sub-menus of elements that are not on the path
                       are removed.

see also the readme-File in the folder modules/show_menu
look at PARAMETERS

Title: Re: Greytut child menu display problems
Post by: seanie_morris on December 05, 2014, 05:01:57 PM

Quote from: jacobi22 on November 28, 2014, 07:22:22 PM

try
SM2_ROOT, SM2_CURR+1, SM2_ALL
or
SM2_ROOT, SM2_CURR+1, SM2_TRIM

Thanks for the reply jacobi. When I try those 2 options, I get a blank page, altogether blank.

I also consulted the README file, and it does have a few tips, that I tried, but none of them worked.

My code could be part of the problem, but I am not sure...

Seanie.