WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: ddombadoh on September 07, 2011, 02:12:49 PM

Title: Showmenu function
Post by: ddombadoh on September 07, 2011, 02:12:49 PM

Hello All,

Thank you for your support.

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

Code: [Select]

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

.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;
}
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]

Title: Re: Showmenu function
Post by: DarkViper on September 07, 2011, 02:39:35 PM

thats all you need to generate the menu:

Code: [Select]


<td valign="top" class="nav">

    <?php show_menu2(); ?>

</td>


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

Title: Re: Showmenu function
Post by: Paul - Westhouse IT on September 07, 2011, 06:18:36 PM

And here for some examples:

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

Title: Re: Showmenu function
Post by: ddombadoh on September 07, 2011, 11:22:05 PM

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