show_menu2 question

[jschor]

I use the show_menu2 function in one of my sites. I copied this from the All CSS2 template and altered the css slightly.

<?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="header_menu" class="menu">'); ?>

I works fine. Now i have a question. Is it possibel to have the 1st level only clickable when there are no sublevels. And not clickable when there are sublevels.

See http://195.238.74.250/~amstel/wb/

so home must be clickable and there is a home.php and eten & drinken is not clickable, only the sublevels.

I hope you understand my question.

[Funky_MF]

Of course, there is a way to have the 1st level only clickable when there are no sublevels and so on.. e.g. with an additional command that gives no <a>-Tag to the Link-Title. But I think, for using the hover-effect in IE, it is recommended to use the <a> -Tag, otherwise the hover-effect is not working correctly.

An alternative way: Make a Menulink for the Firstlevel-Link and set it to the first Page in the Menu.

[jschor]

Thanx for your reply.
I only wonder if this can be done with the different options of the show_menu2. For example the conditional formatting. But reading this i don't understand all the options and how to implement them.

CONDITIONAL FORMATTING
======================
The conditional formatting directive takes the following form:

    [if(ABC){D}]
   
    A   Left operand. It must be one of the following keywords:
            class       Test for existence of one of the classes. Only the
                        "==" and "!=" operators are permitted. In this case
                        these operators have the meaning of "includes"
                        instead of "equals".
            level       Test against the page level.
            sib         Test against the current page sibling number.
            sibCount    Test against the number of siblings in the menu.
            id          Test against the page id.
   
    B   Operator. It must be one of the following:
            <           Less Than
            <=          Less Than Equals
            ==          Equals
            !=          Not Equal
            >=          Greater Than Equals
            >           Greater Than
   
    C   Right operand. The type of this operand depends on the keyword used
        for the left operand:
            class       One of the "menu-*" class names as listed in the
                        section "OUTPUT".
            level       Test the page level against the following values:
                          <number>  absolute page level
                          root      the root page level
                          granny    the grand-parent page level
                          parent    the parent page level
                          current   the current page level
                          child     the child page level
            id          Test the page id against the following values:
                          <number>  absolute page id
                          parent    the parent page id
                          current   the current page id
            sib         A positive integer, or "sibCount" to test against
                        the count of siblings in this menu.
            sibCount    A positive integer.
           
    D   Expression. This may be any string that does NOT include the '}' character.
        It may include any of the format strings described in the section FORMAT
        STRINGS with the exception of the conditional test (because the '}'
        character is not permitted).
   
NOTE: with the exception of D (Expression), NO WHITESPACE IS PERMITTED within
the directive. It must take the exact form as given above.

For example, the expression "exp" is emitted only when the menu item:
   
    [if(class==menu-expand){exp}]   has a sub-menu
    [if(class==menu-first){exp}]    is first item in a menu
    [if(class!=menu-first){exp}]    is NOT first item in a menu
    [if(class==menu-last){exp}]     is last item in a menu
    [if(level==0){exp}]             is at the root
    [if(level>0){exp}]              is not at the root
    [if(sib==2){exp}]               is the second item in a menu
    [if(sibCount>1){exp}]           is in a menu with more than 1 entry
    [if(sibCount!=2){exp}]          is in a menu which doesn't have exactly
    [if(level>parent){exp}]         is in a sibling menu or child of a sibling
    [if(id==parent){exp}]           is the parent of the current page

[doc]

Hello,

have you already tried to play with the following example from the tutorial you´ve posted?

Code: [Select]

[if(class==menu-expand){exp}]   has a sub-menu{exp} should be replaced according to your needs

Regards Christian

[Funky_MF]

Hi jschor,

try this:

Code: [Select]

<?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, &#39;[if(class!=menu-expand){[li][a][menu_title]</a>}][if(class==menu-expand){[li][menu_title]}]&#39;, "\n</li>", false, false, false, &#39;<ul id="header_menu" class="menu">&#39;); ?>
It's not tested, but it should work.

[jschor]

Thanx for your help Funky_MF and Christian. It seems to work (although i don't understand a thin of it) but messes up the CSS. What do i have to do. Add another class or....??

[Funky_MF]

What kind of template you're using ? Can you show us the CSS-Code ?

[jschor]

It is a template i made myself. But i copied and slightly altered the navigation part of the allcss2 template. This is the CSS part of the menu.

#navContainer {
                width: auto;
                background: url(../../media/template/bg.jpg) repeat-x;
                height: 36px;
                display:block;
                clear:both;
                                }


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
 ul.menu, li.menu {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
}

/* Header menu */   
#header_menu {position: absolute; margin-left: 20px;}
#header_menu li {line-height: normal;}
ul#header_menu  {z-index: 10; clear: both;}

#nav {
   
   border-top: 0;
   padding:0;
}
#nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   font-size: 10px;
   text-transform: uppercase;
   width: auto;
   /*
   (Disappearing List-Background)
   http://www.positioniseverything.net/explorer/ie-listbug.html
   */
   position: relative; /* Fix the Stupid IE6 Bug */
}
#nav ul li {float: left; color: #fff; text-align: center; font-weight: normal;}
#nav ul li a {display: block; padding: 5px 11px; padding-bottom: 8px; padding-top: 8px; color: #fff; text-decoration: none;}

/* Root Level Link Formatting */
#nav ul li a:hover, #nav li a:focus {background: #444444;  color: #f094f1; background: url(../../media/template/bg_footer_07.jpg) repeat-x;}
#nav li a:active, #nav ul li a.active {background: #444444;  color: #f094f1;background: url(../../media/template/bg_footer_07.jpg) repeat-x;}

/* Current page Customisations*/
#nav li.menu-current a      {background: #401044; color: #fff; }
#nav li.menu-current a      {font-weight: bold;}

/* 2nd Child menu */
#nav .menu li ul {position: absolute; width: 12em; margin: 0; display: none; text-transform: none;  border-top: 0; font-size: 100%;}
#nav .menu li ul li {width: 12em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;}
#nav .menu li ul a {width: 11.5em; padding: .6em .1em .6em .4em; background: #4b4c4d; color: #fff; border: 0;}

/* 2nd Child link hover */
#nav .menu li ul a:hover {color: #4b4c4d; background: #666; border: 0; color:#fff;}

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


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




/* end menu */
/*  Float containers fix: */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*  \*/
* html #clearfix {
   height: 1%;
}
/*  */

[Funky_MF]

I think there's a Problem with the generated HTML-Code at the Menu:

Code: [Select]

<!-- snip //-->
<li class="menu-expand menu-sibling">Eten &amp; drinken
  <ul class="">
  <li class="menu-first"><a href="http://195.238.74.250/~amstel/wb/pages/eten-drinken/lunch.php" target="_top">Lunch</a></li>
<!-- snip //-->

There's no closing </li> -Tag   if class="menu-expand", so try to change the showmenu2-call.

[Funky_MF]

For further information & help check this:

http://forum.WebsiteBaker.org/index.php/topic,2584.0.html

[jschor]

When i look at the generated html i get this

<li class="menu-expand menu-parent">Eten &amp; drinken
   <ul class="">
   <li class="menu-current menu-first"><a href="http://195.238.74.250/~amstel/wb/pages/eten-drinken/lunch.php" target="_top">Lunch</a></li>
   <li class="menu-sibling"><a href="http://195.238.74.250/~amstel/wb/pages/eten-drinken/diner.php" target="_top">Diner</a></li>
   <li class="menu-sibling"><a href="http://195.238.74.250/~amstel/wb/pages/eten-drinken/groepen.php" target="_top">Groepen</a></li>
   <li class="menu-sibling menu-last"><a href="http://195.238.74.250/~amstel/wb/pages/eten-drinken/borrel.php" target="_top">Borrel</a></li>
   </ul>
   </li>

Looks Ok with the closing doesn't it?

Well we don't have to spend to much time at this. The site has to be online this weekend and it worked before so i will keep the first levels "clickable" and create some "general" pages for the 1st level for the time beeing.

Maybe you or someone else can have a look at this later because it would be a nice option for the menu.

For now i don't want to take to much of your time unless there is a brilliant idea.

Thanks for your help anyway.

[Steven]

Hi Guys,

Maybe it's not brilliant but I came up with this code:

Code: [Select]

<?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, &#39;[if(class!=menu-expand){[li][a][menu_title]</a>}][if(class==menu-expand){[li]<a href=#>[menu_title]</a>}]&#39;, "\n</li>", false, false, false, &#39;<ul id="header_menu" class="menu">&#39;); ?>
It works for me. It doesn't affect the layout of the menu either because the <a href in the code makes it still act as a link which you have defined in the CSS for the menu....


Cheers,

Steven