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

Members area of website with different menu

<< < (2/2)

Argos:
Working with show_menu2 can be daunting that's for sure. Here's a call from + HTML one of my sites that uses a (jQuery) dropdown menu:


--- Code: ---<div id="topnav">
      <div id="myslidemenu" class="jqueryslidemenu">
        <?php show_menu2(0,SM2_ROOT,SM2_START+2,SM2_ALL,&#39;<li>[a][menu_title]</a>&#39;,&#39;</li>&#39;,&#39;<ul>&#39;,&#39;</ul>&#39;,false,false) ?>
      </div>
 </div>

--- End code ---

Here's the CSS:


--- Code: ---/* TOP NAVIGATION */
#topnav {float:left;width:100%;background:#404040;}
#topnav ul {list-style-type:none;margin:0;padding:0;}
#topnav ul li {list-style-type:none;margin:0;padding:0;background:#404040;border-left:1px solid #666;}
#topnav ul li.active {background:#666;}
#topnav ul li a {color:#fff;}
#topnav ul li a:hover {background:#666;}
#topnav ul li li {padding:0;border:none;}

/*Top level list items*/
.jqueryslidemenu ul li {
position:relative;
display:inline;
float:left;
z-index:100;
font-size:13px;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a {
display:block;
padding:10px 15px 10px 15px;
text-decoration:none;
}

* html .jqueryslidemenu ul li a {/*IE6 hack to get sub menu links to behave correctly*/
display:inline-block;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul {
position:absolute;
left:0;
top:25px !important;
display:block;
visibility:hidden;
padding:0 !important;
padding-top:15px !important;
margin-left:-1px;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li {display:list-item;float:none;border:none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul {
left:191px !important;
top:-1px !important;
padding-top:0 !important;
border-top:solid 1px #e3e3e3;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a {
width:160px;/*width of sub menus*/
padding:6px 15px;
margin:0;
border-top-width:0 !important;
background:#404040; /*background of sub level (default state)*/
}
.jqueryslidemenu ul li ul li a:hover {background:#666;} /*background of sub level (hover state)*/

.jqueryslidemenu ul li ul li li a {border-width:0 1px 1px 1px;}

/* ######### CSS classes applied to down and right arrow images ######### */

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

--- End code ---

And the jQuery lines that should be in the HEAD of your template:


--- Code: ---<?php 
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists(&#39;register_frontend_modfiles&#39;)) {
register_frontend_modfiles(&#39;css&#39;);
register_frontend_modfiles(&#39;jquery&#39;);
register_frontend_modfiles(&#39;js&#39;);
} 
?>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/js/jqueryslidemenu.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/js/jquery.easing.1.3.js" ></script>

--- End code ---

Use the attached files. In file jqueryslidemenu.js change the lines in the top to your own domain and template names.

[gelöscht durch Administrator]

Navigation

[0] Message Index

[*] Previous page