WebsiteBaker Logo
  • *
  • Templates
  • Help
  • Add-ons
  • Download
  • Home
*
Welcome, Guest. Please login or register.

Login with username, password and session length
 

News


WebsiteBaker 2.13.6 is now available!


Will it continue with WB? It goes on! | Geht es mit WB weiter? Es geht weiter!
https://forum.websitebaker.org/index.php/topic,32340.msg226702.html#msg226702


The forum email address board@websitebaker.org is working again
https://forum.websitebaker.org/index.php/topic,32358.0.html


R.I.P Dietmar (luisehahne) and thank you for all your valuable work for WB
https://forum.websitebaker.org/index.php/topic,32355.0.html


* Support WebsiteBaker

Your donations will help to:

  • Pay for our dedicated server
  • Pay for domain registration
  • and much more!

You can donate by clicking on the button below.


  • Home
  • Help
  • Search
  • Login
  • Register

  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Templates, Menus & Design »
  • Showmenu function
  • Print
Pages: [1]   Go Down

Author Topic: Showmenu function  (Read 5540 times)

Offline ddombadoh

  • Posts: 24
Showmenu function
« 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]
« Last Edit: September 08, 2011, 12:47:47 AM by Argos »
Logged

Offline DarkViper

  • Forum administrator
  • *****
  • Posts: 3087
  • Gender: Female
Re: Showmenu function
« Reply #1 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
« Last Edit: September 08, 2011, 12:47:57 AM by Argos »
Logged
Der blaue Planet - er ist nicht unser Eigentum - wir haben ihn nur von unseren Nachkommen geliehen

"We need education to cope with digitalization - and NOT the digitalization of education.!"

Tägliches Stoßgebet: Oh Herr, wirf Hirn vom Himmel !

Offline Paul - Westhouse IT

  • Posts: 75
    • Westhouse IT
Re: Showmenu function
« Reply #2 on: September 07, 2011, 06:18:36 PM »
And here for some examples:

http://code.jellycan.com/sm2test/
« Last Edit: September 08, 2011, 12:48:09 AM by Argos »
Logged
Westhouse IT - Professional WebsiteBaker developers for hire.

Offline ddombadoh

  • Posts: 24
Re: Showmenu function
« Reply #3 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
« Last Edit: September 08, 2011, 12:48:18 AM by Argos »
Logged

  • Print
Pages: [1]   Go Up
  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Templates, Menus & Design »
  • Showmenu function
 

  • SMF 2.0.19 | SMF © 2017, Simple Machines
  • XHTML
  • RSS
  • WAP2