WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Showmenu function

(1/1)

ddombadoh:
Hello All,

Thank you for your support.

I am building a site which has the menu system as shown below:


--- Code: ---<td valign="top" class="nav">
<ul>
            <li><a href="../home/index.html">Home</a></li>
            <li><a href="../aboutus/">About Us</a>
           <ul class="hide subnav">
           <li><a href="../aboutus/">Overview</a></li>
           <li><a href="../aboutus/mission.html">Our Mission &amp; Vision</a></li>
           <li><a href="../aboutus/ceo.html">Message from CEO</a></li>
           </ul>
            </li>
            <li class="active"><a href="./">Products &amp; Services</a>
             <ul>
           <li><a href="./">Overview</a></li>
           <li><a href="logistics.html">Logistics</a></li>
           <li><a href="travel.html">Travel </a></li>
           <li><a class="activesub" href="hospitality.html">Hospitality</a>
            <ul>
            <li><a href="champs.html">Champs Sports Bar</a></li>
            <li><a href="chandler.html">Ships Chandler</a></li>
            </ul>
           </li>
           <li><a href="retail.html">Retail</a></li>
           <li><a href="propertyservices.html">Property Services</a></li>
           <li><a href="shipbroking.html">Ship Broking</a></li>
             </ul>          
            </li>
<li><a href="../news/">News &amp; Events</a>
<ul class="hide subnav">
<li><a href="../news/companynews.html">Company News</a></li>
<li><a href="../news/generalnews.html">General News</a></li>
</ul>
</li>
            <li><a href="../downloads/">Downloads</a>
             <ul class="hide subnav">
           <li><a href="../downloads/brochure.html">Corporate Brochure</a></li>
           <li><a href="../downloads/industryinfo.html">Industry Information</a></li>
             </ul>
            </li>
            <li><a href="../contact/">Contact</a>
             <ul class="hide subnav">
           <li><a href="../contact/contactinfo.html">Contact Information</a></li>
           <li><a href="../contact/onlineform.html">Online Form</a></li>
           <li><a href="../contact/maps.html">Directions &amp; Maps</a></li>
             </ul>
            </li>
          </ul>
</td>
--- End code ---

I want to achieve this menu system using the Showmenu2() function. On the current page as can be seen from the attached screenshot, when the user hovers the mouse on any other page, the display is as shown.
The various css classes for the menu are as below:


--- Code: ---.nav a {
color: #000;
text-decoration: none;
}
.nav ul {
margin: 0px;
padding: 0px;
}
.nav ul li {
list-style-type: none;
padding-top: 5px;
padding-bottom: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
margin: 0px;
cursor:pointer;
}
.nav ul li a {
padding-left:5px;
}
.nav ul li:hover {
background:#0099cc;
}
.nav ul li:hover a {
color:#fff;
}
.nav ul li:hover ul.subnav {
display:block;
}
.nav ul li ul.subnav:hover {
display:block;
}
.nav ul li ul.hide {
display:none;
}
.nav ul li ul.subnav {
position:absolute;
margin-left:195px;
margin-top:-22px;
background:#0099cc;
border:1px #ccc solid;
border-left:0;
border-bottom:0;
padding:0;
z-index:9999;
}
.nav ul li ul.subnav li {
padding:5px 15px;
}
.nav ul li:hover ul.subnav li a {
color:#000!important;
}
.nav ul li ul.subnav li:hover a {
color:#fff!important;
}
--- End code ---

Please, any help on this will be appreciated.
Thank you

[EDIT - kweitzel] Usage of the Code Hoghlighting (# Button) makes a post easier to read. Thanks[/EDIT]

[gelöscht durch Administrator]

DarkViper:
thats all you need to generate the menu:


--- Code: ---
<td valign="top" class="nav">

    <?php show_menu2(); ?>

</td>


--- End code ---

Additional you need some CSS to format the output.
At best is to explore the generated html-code using firebug to see which classes are placed by SM2 to the different items.

more information about SM2 you can find in /wb/modules/show_menu2/README.en.txt

Paul - Westhouse IT:
And here for some examples:

http://code.jellycan.com/sm2test/

ddombadoh:
Thanks DarkViper,

When I do that, it works fine for the active pages, but the hover on inactive pages don't work.
This is how far I tried, but it doesn't work well:

show_menu2(
             $aMenu          =1,
         $aStart         = SM2_ROOT,
         $aMaxLevel      = SM2_CURR+2,
         $aOptions       = SM2_ALL|SM2_NUMCLASS,
         $aItemOpen      = '
         <li class="[class]"><a href="[url]" class="[class]" title="[menu_title]">[menu_title]</a>
         ',
         $aItemClose     = '</li>',
         $aMenuOpen      = '
         [if(level==1){<ul class="hide subnav">}
         else{<ul  >}]',
         $aMenuClose     = '</ul>',
         $aTopItemOpen   = '<li><a href="[url]" title="[menu_title]">[menu_title]</a>',
         $aTopMenuOpen   = false
           );

Thanks

Navigation

[0] Message Index