Меню на javaScript

Valeriy · 12 Окт 2006

an_kalinovski · 12 Окт 2006

Забудь про array - напиши все в js и html и добейся корректной работы а потом лезь в array и уже пытайся данными динамическими кормить меню....

Shturm · 12 Окт 2006

Лчше всего в данной ситуации накопать в интернете яваскрипт,
отвечающий твоим критериям, а потом заставить свой php формировать этот скрипт с нужными тебе данными и отдавать браузеру.

Valeriy · 12 Окт 2006

одно уточнение - масив это результат php скрипта, потом масив разбираю с помощью цыкла и пытаюсь сформировать js код

-~{}~ 12.10.06 13:59:

Shturm пробовал - кул меню - создает код но очень долго это делает. Так что нужно саммому это сделать.

que_bunt · 12 Окт 2006

Valeriy я использую кул меню если надо внедрить ява-меню и пока тормозов не замечал.

Valeriy · 12 Окт 2006

Из этого всего одна проблема - есть уже созданые елементы которые будут вставлятся в этот <div>, и они вставляются но при попытке навести курсор на только что вставленный елемент как оно все исчезает. сутки уже с этим страдаю.

-~{}~ 12.10.06 16:49:

Ни у кого нету никаких идей??? Готов попробовать любые методы.

an_kalinovski · 12 Окт 2006

Дай сюда свой код который над которым ты сутки страдаешь а то по показаным двум функциям не очень понятно

SelenIT · 12 Окт 2006

Valeriy
По приведенным примерам видно, что у тебя большие проблемы с HTML - ну нельзя в нем куски таблиц вставлять в <div>.

А когда разберешься с HTML, поизучай http://forum.dklab.ru/js/advises/ - там куча примеров с подробными пояснениями.

Valeriy · 14 Окт 2006

Спасибо за, совет. SelenIT - елементы таблиц больше не вставляю
Ситуация такая -
с масива который выше, я свормировал дерево, те части дерева которые должны вставляться динамически при событии onmouseover я поместил в теги <div> и спрятал их за пределы екрана.
Там где должны появлятся меню 'оно как бы вставляется под тег который его вызвал', я поставил теги <div> , вставляю таким методом -
document.getElementById(nm).innerHTML= document.getElementById(code).innerHTML;
где nm целевой а code тот div с которого должно взятся информ.
Проблема в следуищем - в ставленом теге div, есть елементы третьего уровня, которые тоже должны вызыватся также, и как бы вставлятся в новый div который был занесен методом innerHtml -
примерно так
<tr><td> раздел 1</tr></td>
<tr><td><div id="div1">
<a>paздел 1.1</a>
<div id="div2" onmouseover=show('div3')> <a>paздел 1.2</a></div>
<div id=div3></div>
</div></td></tr>
почему то не срабатывает вот это onmouseover=show('div3')
в opere все мертво,
в ie&mozilla = если поводить мышкой то появится, но при наведении на paздел 1.2 оно не появляется, приходится искать тег div/
Не подскажете где проблема???

-~{}~ 16.10.06 21:10:

Люди на вас вся надежда, подскажыте где собака зарыта то???

Vladson · 16 Окт 2006

Забудь про таблицы, юзай списки
http://beholder-eye.info/2006/03/30/dropdown-menu-css

Valeriy · 16 Окт 2006

Вроде то, но дизайн страници не позволяет использовать такой метод, тоесть наложение слоя поверх.

-~{}~ 16.10.06 21:47:

да и еще оно должно быть вериткальным

boombick · 17 Окт 2006

но дизайн страници не позволяет использовать такой метод, тоесть наложение слоя поверх

Почему? Покажи дизайн...

sunchess · 17 Окт 2006

http://forum.dklab.ru/js/advises/ProjectCompleteMenuSolution.html - может поможет...

Valeriy · 17 Окт 2006

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title></title>
</head>
<body>

<style>
.div {
position:absolute;
left:-200px;
top:-1000px;
z-index:100;
}
</style>

<script language=javaScript>
function wiew_sub(nm, code)
{
document.getElementById(nm).innerHTML= document.getElementById(code).innerHTML;

}

function hide_sub(nm,nameHide,e) {

var ns = (navigator.appName.indexOf('Netscape')>-1);
var ie = (navigator.appName.indexOf('Microsoft Internet E[plorer')>-1);
if (ns)
{
var srcElement = e.target;
}
else
{
var srcElement = event.toElement;
}

//document.getElementById(nameHide).innerHTML = '';

}
</script>

<div id="hide2" class="div"><table><tr><td>      <img src="images/arrow_w.gif" width="3" height="5" name="sm2_img2">  <a href="#" class="smmenu" >Âåðõíÿÿ îäåæäà!!</a><br>      <img src="images/arrow_w.gif" width="3" height="5" name="sm2_img2">  <a href="#" class="smmenu" >Çèìíÿÿ!</a><br></td></tr></table></div><div id="hide3" class="div"><table><tr><td>      <img src="images/arrow_w.gif" width="3" height="5" name="sm2_img2">  <a href="#" class="smmenu" >êóðòê³</a><br></td></tr></table></div><div id="hide1" class="div"><table><tr><td>

    <img src="images/sm1_arrow_w.gif" width="4" height="4" name="sm1_img1">
  <a onMouseOver=ChangeImg("sm1_img1","images/sm1_arrow_y.gif") onMouseOut=ChangeImg("sm1_img1","images/sm1_arrow_w.gif") href="#" class="smmenu" >test!</a></td></tr><tr><td><div id="sub_parent" onMouseOver=wiew_sub("div2","hide2"); onMouseOut="hide_sub(this,'div2',event)"; >
    <img src="images/sm1_arrow_w.gif" width="4" height="4" name="sm1_img2">
  <a onMouseOver=ChangeImg("sm1_img2","images/sm1_arrow_y.gif") onMouseOut=ChangeImg("sm1_img2","images/sm1_arrow_w.gif") href="#" class="smmenu" >Æåíñêàÿ</a></div></td></tr><tr><td>
<div id="div2" >
</div>
</td></tr>
<tr><td><div id="sub_parent" onMouseOver=wiew_sub("div3","hide3"); onMouseOut="hide_sub(this,'div3',event)"; >

    <img src="images/sm1_arrow_w.gif" width="4" height="4" name="sm1_img3">
  <a onMouseOver=ChangeImg("sm1_img3","images/sm1_arrow_y.gif") onMouseOut=ChangeImg("sm1_img3","images/sm1_arrow_w.gif") href="#" class="smmenu" >Äåòñêàÿ</a></div></td></tr><tr><td>
<div id="div3" >
</div>
</td></tr>
<tr><td>
    <img src="images/sm1_arrow_w.gif" width="4" height="4" name="sm1_img4">
  <a onMouseOver=ChangeImg("sm1_img4","images/sm1_arrow_y.gif") onMouseOut=ChangeImg("sm1_img4","images/sm1_arrow_w.gif") href="#" class="smmenu" >Ìóæñêàÿ!</a></td></tr></table></div><div id="hide4" class="div"><table><tr><td>

    <img src="images/sm1_arrow_w.gif" width="4" height="4" name="sm1_img1">
  <a onMouseOver=ChangeImg("sm1_img1","images/sm1_arrow_y.gif") onMouseOut=ChangeImg("sm1_img1","images/sm1_arrow_w.gif") href="#" class="smmenu" >test ñíàðÿæåíèå</a></td></tr></table></div><table width="780" height="100%" border="1" align="center" bgcolor="#2B2B2B" cellpadding="0" cellspacing="0">
<tr><td colspan="3" height="15"><img src="images/spacer.gif" height="15"></td></tr>
<tr>

<td width="205" valign="top">
<table width="193" height="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td valign="top" height="94">   <img src="images/logo.jpg" width="123" height="94" alt="Salewa"></td></tr>
<tr><td height="23"><img src="images/spacer.gif" height="23"></td></tr>
<tr><td bgcolor="#3A3A3A" height="1"><img src="images/spacer.gif" height="1"></td></tr>

<tr><td valign="top">
<table width="151" border="0" cellpadding="0" cellspacing="0" align="center">

<tr><td height="26" valign="middle" >  
<img src="images/m_arrow_w.gif" width="5" height="5" vspace="2" name="img1">  
<a onMouseOut=ChangeImg("img1","images/m_arrow_w.gif"); onMouseOver=ChangeImg("img1","images/m_arrow_y.gif"); href="index.php?patch=2&fid=1" class="mmenu" >Íîâîñòè!</a></td></tr>

<tr><td bgcolor="#3A3A3A"><img src="images/spacer.gif" height="1"></td></tr>

<tr><td height="26" valign="middle" >  
<img src="images/m_arrow_w.gif" width="5" height="5" vspace="2" name="img2">  
<a onMouseOut=ChangeImg("img2","images/m_arrow_w.gif"); onMouseOver=ChangeImg("img2","images/m_arrow_y.gif"); href="index.php?patch=3&id=2&fid=2" class="mmenu" >Î êîìïàíèè</a></td></tr>

<tr><td bgcolor="#3A3A3A"><img src="images/spacer.gif" height="1"></td></tr>

<tr><td height="26" valign="middle" ><div id="parent" onMouseOver=wiew_sub("div1","hide1"); onMouseOut="hide_sub(this, 'div1', event)">  
<img src="images/m_arrow_w.gif" width="5" height="5" vspace="2" name="img3">  
<a onMouseOut=ChangeImg("img3","images/m_arrow_w.gif"); onMouseOver=ChangeImg("img3","images/m_arrow_y.gif"); href=# class="mmenu" >Îäåæäà</a></div></td></tr>
<tr><td>
<div id="div1" onMouseOver=wiew_sub("div1","hide1"); onMouseOut="hide_sub(this, 'div1', event)" >

</div>
</td></tr>
<tr><td bgcolor="#3A3A3A"><img src="images/spacer.gif" height="1"></td></tr>

<tr><td height="26" valign="middle" ><div id="parent" onMouseOver=wiew_sub("div4","hide4"); onMouseOut="hide_sub(this, 'div4', event)">  

<img src="images/m_arrow_w.gif" width="5" height="5" vspace="2" name="img4">  
<a onMouseOut=ChangeImg("img4","images/m_arrow_w.gif"); onMouseOver=ChangeImg("img4","images/m_arrow_y.gif"); href=# class="mmenu" >Ñíàðÿæåíèå</a></div></td></tr>
<tr><td>
<div id="div4">

</div>
</td></tr>

<tr><td bgcolor="#3A3A3A"><img src="images/spacer.gif" height="1"></td></tr>

<tr><td height="26" valign="middle" >  
<img src="images/m_arrow_w.gif" width="5" height="5" vspace="2" name="img5">  

<a onMouseOut=ChangeImg("img5","images/m_arrow_w.gif"); onMouseOver=ChangeImg("img5","images/m_arrow_y.gif"); href="index.php?patch=3&id=24&fid=24" class="mmenu" >Ñûëêè</a></td></tr>

</table>
</td></tr>

<tr><td bgcolor="#3A3A3A" height="1"><img src="images/spacer.gif" height="1"></td></tr>
<tr><td height="100%"> </td></tr>
<tr><td height="40"><font class="copy"><b>   Copyright</b> © 2006 Salewa.<br>   Âñå ïðàâà çàùèùåíû<br><br>   <b>Ðàçðàáîòêà è ïîääåðæêà:</b><br>   </a></font></td></tr>
</table>
</body>
</html>

-~{}~ 17.10.06 11:12:

код страницы результат генерации php скрипта

sunchess спасибо за ссылку, вроде похожее, надо разобратся.

В динамике если навести на одежда - не происходит вызов функции wiew_sub(), и не подскажите как лучше сделать чтобы развернутый слой при навидении мишки не прятался??

boombick · 17 Окт 2006

развернутый слой при наведении мышки не прятался??

onMouseOver

svs82 · 19 Окт 2006

http://www.samstroy.net/scripts.html там много всяких меню, может найдешь что-то по душе.

autosoft · 22 Дек 2006

Попробуй меню на http://java.skyteam.ru.

Или несколько переделанный вариант.

Формирование меню:

PHP:

include("menu.php");

$menu = array(

    array("Новости", "news.html"),
    array("О компании", "about.html"),
    array("Одежда", NULL, NULL, array(

        array("Мужская", NULL, NULL, array(

            array("Зимняя", "clothes_man_winter.html"),
            array("Летняя", "clothes_man_summer.html"),
        )),

        array("Женская", NULL, NULL, array(

            array("Зимняя", "clothes_woman_winter.html"),
            array("Летняя", "clothes_woman_summer.html"),
        )),

        array("Детская", NULL, NULL, array(

            array("Зимняя", "clothes_children_winter.html"),
            array("Летняя", "clothes_children_summer.html"),
        ))
    )),

    array("???", "")

);

create_menu($menu);

menu.php:

PHP:

function create_menu($menu, $prefix = "", $menu_name = "") {

    if (!($count = count($menu))) return;

    $menu_name = $menu_name == "" ? "menu" : $menu_name;

    if ($prefix == "") {

        echo "<link href='menu.css' rel='stylesheet' type='text/css'>";
        echo "<script language='JavaScript' src='menu.js'></script>";
        echo "<script language='JavaScript'>";
        echo "var {$menu_name} = new create_menu('{$menu_name}');";
    }

    $name = $prefix == "" ? "" : "_{$prefix}";

    for ($index = 1; $index <= $count; $index++) {

        $caption = NULL;
        $url = NULL;
        $sep = NULL;
        $sub_menu = NULL;

        $pos = $index - 1;

        switch(count($menu[$pos])) {

            case 4: $sub_menu = $menu[$pos][3];
            case 3: $sep = $menu[$pos][2];
            case 2: $url = $menu[$pos][1];
            case 1: $caption = $menu[$pos][0];
        }

        if (isset($caption)) echo "{$menu_name}.item{$name}_{$index}_caption = \"{$caption}\";";
        if (isset($url)) echo "{$menu_name}.item{$name}_{$index}_url = \"{$url}\";";
        if (isset($sep)) {

            if ($sep == 1 ? true : ($sep == 3 ? true : false))
            echo "{$menu_name}.item{$name}_{$index}_sep_top = true;";

            if ($sep == 2 ? true : ($sep == 3 ? true : false))
            echo "{$menu_name}.item{$name}_{$index}_sep_bottom = true;";
        }
        if (isset($sub_menu))
        create_menu($sub_menu, $prefix == "" ? $index : "{$prefix}_{$index}", $menu_name);
    }

    if ($prefix == "") {

        echo "{$menu_name}.open();";
        echo "</script>";
    }
}

menu.css:

PHP:

table.mainmenu, table.menu {

    background-color: #d0d0d0;
    border-color: #f0f0f0 #909090 #909090 #f0f0f0;
    z-index: 100;
    visibility: hidden;
}

table.menu {

    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #909090;
    border-bottom: 1px solid #909090;
    position: absolute;
}

table.mainmenu td {

    background-color: #d0d0d0;
    padding: 4px 8px 4px 8px;
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    white-space: nowrap;
    cursor: pointer;
}

table.menu td {

    background-color: #d0d0d0;
    padding: 4px 8px 4px 8px;
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    white-space: nowrap;
    cursor: pointer;
}

menu_arrow.gif:

PHP:

echo base64_decode("R0lGODlhEAAQAJECAIWFhQAAAP///wAAACH" .
                   "5BAEAAAIALAAAAAAQABAAAAIdlI+py83hUo" .
                   "DRTBovbnovDQDOFWZBmaGVWLXuaxQAOw==");

menu.js:

PHP:

function create_menu(name_menu) {

    this.name_menu = name_menu;

    this.horizontal = false;
    this.text_color = "#000000";
    this.background_color = "#d0d0d0";
    this.highlight_text_color = "#ffffff";
    this.highlight_background_color = "#0a246a";

    this.time_header = -1;
    this.time_out = 250;

    this.item_selected = null;

    this.select = new function select() {

        this.select_hided = 0;
        this.save_select = new Array();

        this.browser = new function () {

            var ua, i;

            this.isIE = false;
            this.isGecko = false;
            this.isOpera = false;

            ua = navigator.userAgent;

            if ((i = ua.indexOf("Opera")) >= 0) this.isOpera = true;

            if ((i = ua.indexOf("MSIE")) >= 0) this.isIE = true;

            if ((i = ua.indexOf("Gecko")) >= 0) this.isGecko = true;
        }

        this.hide = function () {

            if (!this.browser.isIE) return;
            if (this.select_hided) return;

            var allSelect = document.all.tags("SELECT");
            var index1, index2 = 0;

            this.save_select = new Array();

            for (index1 = 0; index1 < allSelect.length; index1++) {

                if (allSelect.item(index1).style.visibility != "hidden") {

                    this.save_select[index2] = allSelect.item(index1);
                    this.save_select[index2].visSave = this.save_select[index2].style.visibility;
                    allSelect.item(index1).style.visibility = "hidden";
                    index2++;
                }
            }

            this.select_hided = true;
        }

        this.show = function () {

            if (!this.browser.isIE) return;
            if (!this.select_hided) return;

            var index;

            for (index = 0; index < this.save_select.length; index++)
            this.save_select[index].style.visibility = this.save_select[index].visSave;

            this.select_hided = false;
        }
    }

    this.show = function (item) {

        var prefix_name = this.name_menu + "_td_";
        var item_name = item.id.indexOf(prefix_name) == 0 ? item.id.substr(prefix_name.length) : "";

        if (item_name == "") return;

        clearTimeout(this.time_header);

        item.style.backgroundColor = this.highlight_background_color;
        item.style.color = this.highlight_text_color;

        var item_name_share = item_name.split("_");
        var object;

        if (this.item_selected != null) {

            var item_selected_name = this.item_selected.id.substr(prefix_name.length);
            var item_selected_name_share = item_selected_name.split("_");
            var index, count = item_selected_name_share.length, content = "";

            for (index = 0; index < count; index++) {

                content += "_" + item_selected_name_share[index];

                if (item_name_share[index] != item_selected_name_share[index]) {

                    object = document.getElementById(this.name_menu + "_td" + content);
                    object.style.backgroundColor = this.background_color;
                    object.style.color = this.text_color;

                    if ((object = document.getElementById(this.name_menu + "_table" + content)) != null)
                    object.style.visibility = "hidden";
                }
            }
        }

        this.item_selected = item;

        if ((object = document.getElementById(this.name_menu + "_table_" + item_name)) != null) {

            this.select.hide();
            this.set_coord(item_name);
            object.style.visibility = "visible";
        }
    }

    this.hide = function () {

        if (this.item_selected != null) {

            var prefix_name = this.name_menu + "_td_";
            var item_name = this.item_selected.id.substr(prefix_name.length);
            var item_name_share = item_name.split("_");
            var index, count = item_name_share.length, content = "";

            for (index = 0; index < count; index++) {

                content += "_" + item_name_share[index];

                object = document.getElementById(this.name_menu + "_td" + content);
                object.style.backgroundColor = this.background_color;
                object.style.color = this.text_color;

                if ((object = document.getElementById(this.name_menu + "_table" + content)) != null)
                object.style.visibility = "hidden";
            }

            this.item_selected = null;
            this.select.show();
        }
    }

    this.run = function (url) {

        location.href = url;
    }

    this.set_coord = function (item_name) {

        var item_name_share = item_name.split("_");
        var x, y;

        if (item_name_share.length > 1) {

            item_name_share = item_name_share.slice(0, -1);
            item_top_name = item_name_share.join("_");

            y = document.getElementById(this.name_menu + "_table_" + item_top_name).offsetTop +
            document.getElementById(this.name_menu + "_td_" + item_name).offsetTop;
            x = document.getElementById(this.name_menu + "_table_" + item_top_name).offsetLeft +
            document.getElementById(this.name_menu + "_td_" + item_name).offsetWidth;

            if (x + document.getElementById(this.name_menu + "_table_" + item_name).offsetWidth > document.body.clientWidth)
            x = document.getElementById(this.name_menu + "_table_" + item_top_name).offsetLeft -
            document.getElementById(this.name_menu + "_table_" + item_name).offsetWidth;

            if (x < 0) x = 0;

        } else {

            var object = document.getElementById(this.name_menu + "_td_" + item_name);

            if (this.horizontal) {

                x = object.offsetLeft;
                y = object.offsetTop + object.offsetHeight;

                while (object.offsetParent != null) {

                    object = object.offsetParent;
                    x += object.offsetLeft;
                    y += object.offsetTop;
                }

                if (x + document.getElementById(this.name_menu + "_table_" + item_name).offsetWidth > document.body.clientWidth)
                x += document.getElementById(this.name_menu + "_td_" + item_name).offsetWidth -
                document.getElementById(this.name_menu + "_table_" + item_name).offsetWidth;

                if (x < 0) x = 0;

            } else {

                x = object.offsetLeft + object.offsetWidth;
                y = object.offsetTop;

                while (object.offsetParent != null) {

                    object = object.offsetParent;
                    x += object.offsetLeft;
                    y += object.offsetTop;
                }

                if (x + document.getElementById(this.name_menu + "_table_" + item_name).offsetWidth > document.body.clientWidth)
                x -= document.getElementById("mainmenu").offsetWidth +
                document.getElementById(this.name_menu + "_table_" + item_name).offsetWidth;
            }
        }

        document.getElementById(this.name_menu + "_table_" + item_name).style.left = x + "px";
        document.getElementById(this.name_menu + "_table_" + item_name).style.top = y + "px";
    }

    this.open = function () {

        if (document.getElementById) {

            var content = "<table class=mainmenu id=" + this.name_menu + "_mainmenu cellspacing=0" +
            (this.horizontal ? "" : " style='float:left'") + ">" + (this.horizontal ? "<tr>" : "");

            var item_ext = new Array();
            var index = 1, pos = 0, pos_ext = 0;

            while (eval("typeof(" + this.name_menu + ".item_" + index + "_caption) != 'undefined'")) {

                var style = "";

                if (eval("typeof(" + this.name_menu + ".item_" + index + "_1_caption) != 'undefined'")) {

                    if (!this.horizontal)
                    style += "padding: 4px 20px 4px 8px;background-image: url(menu_arrow.gif);" +
                    "background-position: right center;background-repeat: no-repeat;";

                    item_ext[pos] = index;
                    pos++;
                }

                content += (this.horizontal ? "" : "<tr>") + "<td id=" + this.name_menu + "_td_" + index +

                " onmouseover='" + this.name_menu + ".show(this)'" +

                " onmouseout='" + this.name_menu +
                ".time_header = setTimeout(\"" + this.name_menu + ".hide()\", " + this.time_out + ")'" +
                (eval("typeof(" + this.name_menu + ".item_" + index + "_url) != 'undefined'") ?

                " onclick='" + this.name_menu + ".run(\"" +
                eval(this.name_menu + ".item_" + index + "_url") + "\")'" : "") +

                (style == "" ? "" : " style='" + style + "'") + ">" +

                eval(this.name_menu + ".item_" + index + "_caption") +

                "</td>" + (this.horizontal ? "" : "</tr>");

                index++;
            }

            content += (this.horizontal ? "</tr>" : "") + "</table>";

            document.write(content);

            var prefix_name;

            for (pos_ext = 0; typeof(item_ext[pos_ext]) != 'undefined'; pos_ext++) {

                index = 1;

                prefix_name = item_ext[pos_ext];

                content = "<table class=menu id=" + this.name_menu + "_table_" + prefix_name + " cellspacing=0>";

                while (eval("typeof(" + this.name_menu + ".item_" + prefix_name + "_" + index + "_caption) != 'undefined'")) {

                    var style = "";

                    if (eval("typeof(" + this.name_menu + ".item_" + prefix_name + "_" + index + "_sep_top) != 'undefined'"))
                    style += "border-top: 2px groove #ffffff;";

                    if (eval("typeof(" + this.name_menu + ".item_" + prefix_name + "_" + index + "_sep_bottom) != 'undefined'"))
                    style += "border-bottom: 2px groove #ffffff;";

                    if (eval("typeof(" + this.name_menu + ".item_" + prefix_name + "_" + index + "_1_caption) != 'undefined'")) {

                        style += "padding: 4px 20px 4px 8px;background-image: url(menu_arrow.gif);" +
                        "background-position: right center;background-repeat: no-repeat;";

                        item_ext[pos] = prefix_name + "_" + index;
                        pos++;
                    }

                    content += "<tr><td id=" + this.name_menu + "_td_" + prefix_name + "_" + index +

                    " onmouseover='" + this.name_menu + ".show(this)'" +

                    " onmouseout='" + this.name_menu +
                    ".time_header = setTimeout(\"" + this.name_menu + ".hide()\", " + this.time_out + ")'" +
                    (eval("typeof(" + this.name_menu + ".item_" + prefix_name + "_" + index + "_url) != 'undefined'") ?

                    " onclick='" + this.name_menu + ".run(\"" +
                    eval(this.name_menu + ".item_" + prefix_name + "_" + index + "_url") + "\")'" : "") +

                    (style == "" ? "" : " style='" + style + "'") + ">" +

                    eval(this.name_menu + ".item_" + prefix_name + "_" + index + "_caption") +

                    "</td></tr>";

                    index++;
                }

                content += "</table>";

                document.write(content);
            }

            document.getElementById(this.name_menu + "_mainmenu").style.visibility = "visible";

        } else
        document.write("<p>This page uses DHTML and DOM, but your browser doesn't support them.</p>");
    }
}

Если изенить this.horizontal = false; на this.horizontal = true; то можно получить горизонтальное меню.

Меню на javaScript

Valeriy

Новичок

an_kalinovski

Новичок

Shturm

Гигант мысли

Valeriy

Новичок

que_bunt

Новичок

Valeriy

Новичок

an_kalinovski

Новичок

SelenIT

IT-лунатик :)

Valeriy

Новичок

Vladson

Сильнобухер

Valeriy

Новичок

boombick

boombick.org

sunchess

Новичок

Valeriy

Новичок

boombick

boombick.org

svs82

Новичок

autosoft

Новичок