I use the bellow code to load the main menu elements from some CMS, the present code is perfect except that it loads ALL the main items on a single line of menu - which will make the width of it unusable in any centered design (under 1000px).. I want to change this script so after 15 main elements will add a "MORE" button under which the rest of the main menu items will show as sub-items of this "MORE" button (they will no开发者_如何学运维t have their own sub-items as the first 15 do).. How can I do it? Thanks!
<?php
require_once( '../../../inc/header.inc.php' );
require_once( DIRECTORY_PATH_INC . 'membership_levels.inc.php' );
require_once( DIRECTORY_PATH_ROOT . "templates/tmpl_{$tmpl}/scripts/TemplMenu.php" );
class SimpleMenu extends TemplMenu
{
function getCode()
{
$this->iElementsCntInLine = 100;
$this->getMenuInfo();
$this->genTopItems();
return $this->sCode;
}
function genTopItem($sText, $sLink, $sTarget, $sOnclick, $bActive, $iItemID, $isBold = false, $sPicture = '')
{
$sActiveStyle = ($bActive) ? ' id="tm_active"' : '';
if (!$bActive) {
$sAlt= $sOnclick ? ( ' alt="' . $sOnclick . '"' ) : '';
$sTarget = $sTarget ? ( ' target="_parent"' ) : '';
}
$sLink = (strpos($sLink, 'http://') === false && !strlen($sOnclick)) ? $this->sSiteUrl . $sLink : $sLink;
$sSubMenu = $this->getAllSubMenus($iItemID);
$sImgTabStyle = $sPictureRep = '';
if ($isBold && $sPicture != '') {
$sPicturePath = getTemplateIcon($sPicture);
$sPictureRep = "<img src='{$sPicturePath}' style='vertical-align:middle;width:16px;height:16px;' />";
$sText = ' ';
$sImgTabStyle = 'style="width:38px;"';
}
$sMainSubs = ($sSubMenu=='') ? '' : " {$sSubMenu} </a>";
$this->sCode .= "
<li><a href='{$sLink}' {$sOnclick} target='_parent'>{$sPictureRep}{$sText}</a>
<div id='submenu'>
<ul>
<li>{$sMainSubs}</li>
</ul>
</div>
</li>
";
}
}
$objMenu = new SimpleMenu();
echo "<ul id='ddmenu'>";
echo $objMenu->getCode();
echo "</ul>";
?>
Personally I'd use CSS and Javascript (+jQuery) to do this.
Use Javascript to find any li
s within ul#ddmenu
that have an index of 15 or more, and give them a different class. Then, add your "More" button, and use onclick/hover etc to display the remaining li
s.
精彩评论