Welcome, Guest. Please login or register.
Did you miss your activation email?
May 26, 2012, 08:13:46 PM

Login with username, password and session length
Search:     Advanced search
Interested in joining the WebsiteBaker team?
For more Information read here or on our new website.
155551 Posts in 21715 Topics by 7737 Members
Latest Member: gx-world
* Home Help Search Login Register
Pages: [1]   Go Down
Print
Author Topic: Showmenu function  (Read 642 times)
ddombadoh

Offline Offline

Posts: 24


« on: September 07, 2011, 01:12:49 PM »

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>

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

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]
« Last Edit: September 07, 2011, 11:47:47 PM by Argos » Logged
DarkViper
Development Team
*****
Offline Offline

Posts: 1253


« Reply #1 on: September 07, 2011, 01:39:35 PM »

thats all you need to generate the menu:

Code:

<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 07, 2011, 11:47:57 PM by Argos » Logged

Anleitungen lesen und selber nachdenken ist anstrengend...  Da lass ich doch lieber andere für mich denken...

In 1984:  Nineteen Eighty-Four is a unrealistic utopia!!
In 2012:  Nineteen Eighty-Four is a little piece only of our reality!!
Paul - Westhouse IT

Offline Offline

Posts: 63


WWW
« Reply #2 on: September 07, 2011, 05:18:36 PM »

And here for some examples:

http://code.jellycan.com/sm2test/
« Last Edit: September 07, 2011, 11:48:09 PM by Argos » Logged

Westhouse IT - Professional WebsiteBaker developers for hire.
ddombadoh

Offline Offline

Posts: 24


« Reply #3 on: September 07, 2011, 10: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 07, 2011, 11:48:18 PM by Argos » Logged
Pages: [1]   Go Up
Print
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.16 | SMF © 2011, Simple Machines Valid XHTML 1.0! Valid CSS!