Простенькое всплывающее меню в сабхедере. Это не релиз. Просто размышления на тему.
Usage:
На примере меню прописано ручками (без мускула). Пример:
//печатаем java-скрипт
menuScript();
//все, что надо, чтобы нарисовать меню
menu(Array(
Array("value" => "Персоналии", "menu" => Array(option("Чапаев","chapaev.php"),option("Пупкин", "pupkin.php"))),
Array("value" => "Навигация", "menu" => Array(option("Лучи", "generator.php"))),
Array("value" => "Сервис", "menu" => Array(option("Обратная связь", "contact.php")))));
Все простенько. Вот код php-функций:
function subMenu($menu_id, $options) {
echo "<div id=\"".$menu_id."\" style=\"left: -1000px;overflow: hidden;position: absolute;top: -1000px;\">\n<table cellpadding=1 cellspacing=0 width=200 onMouseOut=\"hidemenu()\" onMouseOver=\"cancelhide()\">\n";
foreach ($options as $value) {
echo "<tr>\n<td width=200 align=\"center\"";
//if ($value['sub_menu'] != null) {
// echo " onMouseOver=\"show(this,'".$value['sub_menu']."')\"";
//}
echo "><a href=\"".$value['link']."\">".$value['value']."</a></td>\n</tr>\n&q
uot;;
}
echo "</table>\n</div>\n\n";
return $menu_id;
}
function menu($sub_menu) {
$res = "<table width=\"600\" onMouseOut=\"hidemenu()\" onMouseOver=\"cancelhide()\" cellspacing=\"0\" cellpadding=\"0\"><tr>";
$i = 0;
foreach ($sub_menu as $value) {
$res .= "<td width=200 align=\"center\" onMouseOver=\"show(this,'".subMenu("Menu".$i, $value['menu'])."')\"><a href=\"\"><b><span style='color:red'>".$value['value']."</span></b></a></td>";
$i++;
}
$res .= "</tr></table>";
echo $res;
}
function option($value, $link) {
return Array("link" => $link, "value" => $value);
}
Вот код функций на java, оптимизированный под IE, NS, Opera.
function menuScript() {
echo '<Script Language="JavaScript">
cm=null;
hide_delay=500;
tstat=0;
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
function switchDiv(objElement,bolVisible){
if(isNS4||isIE4){
if(!bolVisible) {
objElement.visibility ="hidden"
} else {
objElement.visibility ="visible"
}
} else if (isIE5 || isNS6) {
if(!bolVisible){
objElement.style.display = "none";
} else {
objElement.style.display = "";
}
}
return 1;
}
function getPos(el,sProp) {
var iPos = 0;
while (el!=null) {
iPos+=el["offset" + sProp]
el = el.offsetParent
}
return iPos
}
function getelementbyid(myid) {
if (isNS4){
objElement = document.layers[myid];
}else if (isIE4) {
objElement = document.all[myid];
}else if (isIE5 || isNS6) {
objElement = document.getElementById(myid);
}
return(objElement);
}
function show(el,m) {
if (cm!=null) {
switchDiv(cm,false);
}
if (m!=null) {
m=getelementbyid(m);
m.style.left = getPos(el,"Left")+"px";
m.style.top = getPos(el,"Top")+el.offsetHeight+"px";
switchDiv(m,true);
cm=m;
}
}
function hidemenu() {
timer1=setTimeout("show(null,null)",hide_delay);
tstat=1;
return 1;
}
function cancelhide() {
if (tstat==1) {
clearTimeout(timer1);
tstat=0;
}
return 1;
}
</Script>';
}
В аттаче картинка. Внешний вид менюшек никак не оформлен. |
|