How do I add a drop down menu to an already live website menu (WB template)?

[Argos]

Have a look at my site (www.argosmedia.nl), and go the some subpage. You see a main dropdown menu and a childrens menu on the right. Is this what you have in mind? It's jQuery for the sliding effect, but based on a regular Showmenu2.

Main menu:

Code Select Expand

<div id="header">
 <div id="myslidemenu" class="jqueryslidemenu">
   <ul>
     <li> <a class="home" title="Home" href="/pages/home.php"></a> </li>
   </ul>
   <?php show_menu2(0,SM2_ROOT,SM2_START+2,SM2_ALL,'[if(id==1){<li class="hide">}else{[li]}][a][menu_title]</a>','</li>','<ul>','</ul>',false,false) ?>
 </div>
</div>

Sidemenu:

Code Select Expand

<?php 
// Submenu region, only shown when submenu's are available
ob_start();
show_menu2(0, SM2_ROOT+1, SM2_CURR+2, SM2_ALL|SM2_CURRTREE);
$childmenu=ob_get_contents();
ob_end_clean();
if ($childmenu!="") {
show_menu2(0,SM2_ROOT, SM2_MAX, SM2_CRUMB|SM2_CURRTREE,'<h3>CHILD PAGES</h3>','','','',false,false); 
show_menu2(0,SM2_ROOT+1,SM2_CURR+1,SM2_TRIM|SM2_CURRTREE,'[li][a][menu_title]</a>','</li>','<ul class="sidebar-menu">','</ul>',false,false); 
} 
?>


CSS:

Code Select Expand


.jqueryslidemenu {float:left;width:100%;background:url('../img/menu_bg.jpg') repeat-x 0 0;height:38px;}

.jqueryslidemenu ul {list-style-type:none;margin:0;padding:0;}
.jqueryslidemenu ul li {list-style-type:none;margin:0;padding:0;border-left:1px solid #5f5f5f;height:38px;position:relative;display:inline;float:left;z-index:100;font-size:13px;}
.jqueryslidemenu ul li.menu-last {border-right:1px solid #5f5f5f;}
.jqueryslidemenu ul li a {color:#fff;display:block;padding:0 15px;text-decoration:none;height:38px;line-height:38px;}
* html .jqueryslidemenu ul li a {display:inline-block;}/*IE6 hack to get sub menu links to behave correctly*/
.jqueryslidemenu ul li a:hover,
.jqueryslidemenu ul li.active,
.jqueryslidemenu ul li.menu-current,
.jqueryslidemenu ul li.menu-parent {background:url('../img/menu_bg-hover.jpg') repeat-x 0 0;}  

.jqueryslidemenu ul li li {padding:0;border:none;}
.jqueryslidemenu ul li ul {position:absolute;left:0;top:38px !important;display:block;visibility:hidden;padding:0 !important;margin-left:-1px;border:1px solid #5f5f5f;border-top:none;border-bottom:2px solid #db7030;}
.jqueryslidemenu ul li ul li {display:list-item;float:none;background:#4d4d4d;margin:0;padding:0 15px;}
.jqueryslidemenu ul li ul li a {width:160px;padding:0;margin:0;background:#4d4d4d;border-top:1px solid #5f5f5f;}
.jqueryslidemenu ul li ul li.menu-last {border-right:none;}
.jqueryslidemenu ul li ul li.menu-first a {border-top:1px solid #4d4d4d;}
.jqueryslidemenu ul li ul li.menu-last a {height:37px;line-height:37px;}
.jqueryslidemenu ul li ul li a:hover,
.jqueryslidemenu ul li ul li.active,
.jqueryslidemenu ul li ul li.menu-current {text-decoration:underline;background:#4d4d4d;border-bottom:none;}

/* .jqueryslidemenu ul li ul li ul {left:191px !important;top:-1px !important;padding-top:0 !important;border-top:solid 1px #e3e3e3;} */

.downarrowclass {position:absolute;top:17px;right:16px;}
.rightarrowclass {position:absolute;top:12px;right:5px;}

li.hide {display:none !important;} /* hide the home link in the menu, because an icon is used instead */
a.home {width:50px;height:38px;background:url("../img/home2.jpg") 50% 50% no-repeat;display:block;padding:0 !important;}
a.home:hover {width:50px;height:38px;background:url("../img/home_hover2.jpg") 50% 50% no-repeat !important;padding:0 !important;}

.sidebar-menu {list-style:none;margin-bottom:30px;}
.sidebar-menu li {border-bottom:1px solid #e7e7e7;}
.sidebar-menu li:hover,
.sidebar-menu li.menu-current {background:#f1f1f1 url('../img/bullets/arrow.png') no-repeat 0 11px;}
.sidebar-menu li a {color:#404040;display:block;height:30px;line-height:30px;padding-left:15px;}
.sidebar-menu li a:hover,
.sidebar-menu li.menu-current a {text-decoration:none;}


In the HEAD of your index.php:

Code Select Expand

<script type="text/javascript" src="<?php echo WB_URL; ?>/include/jquery/plugins/easing.js"></script>
<script type="text/javascript" src="<?php echo WB_URL; ?>/include/jquery/plugins/jqueryslidemenu.js"></script>

There are 3 hardcoded links to my domain in the jqueryslidemenu.js. Replace them with your own info.

[seanie_morris]

PLEASE DELETE.

Thanks Argos for your reply. I did find my own mistake in the end!

Sean.