Меню
Что нового?

Меню на javaScript

  • Автор темы Автор темы Valeriy
  • Дата начала Дата начала

Valeriy

Новичок
Меню на javaScript

в поиске не нашел, хочу спросить у вас

Array
(
[1] => Array
(
[name] => Новости
[status] => main
)
[2] => Array
(
[name] => О компании
[status] => main
)
[3] => Array
(
[name] => Одежда
[status] => main
)
[4] => Array
(
[name] => Мужская!
[status] => pid
)
[5] => Array
(
[name] => Женская
[status] => pid
)
[6] => Array
(
[name] => begin
)
[7] => Array
(
[name] => Верхняя одежда!!
[status] => pid
)
[8] => Array
(
[name] => Зимняя
[status] => pid
)
[9] => Array
(
[name] => end
)
[10] => Array
(
[name] => Детская
[status] => pid
)
[11] => Array
(
[name] => test
[status] => main
)
)

ис этого масива я хочу свормирвать меню. Меню размещено в таблице, когда наводиш на елемент скажем- одежда- должно
появлятся следуищие елементы под етим елементом, тоесть вст - <tr><td> Мужская<td></tr>. <tr><td> Женская<td></tr>,
если навести на женская дожно появлятся <tr><td>Зимняя<td></tr>
<tr><td>Верхняя одежда!!<td></tr> , тоесть должна получатся цепоцка -
Окомпании
Одежда
женская
зимняя
верхняя
мужская

я пробовал сделать так поместить тег <div> после одежда , и вставлять туда эти елементы таблицы.
функции
function wiew_sub(nm)
{

document.getElementById(nm).innerHTML= "<tr><td>code</td></tr>";
}

function hide_sub(nm) {
document.getElementById(nm).innerHTML = "";
}
</script>
проблема в том что как только навожу на зимняя все исчезает.
пробовал<tr> Одежда <tr> закатать в тег <div> как родительський эфект тот же.
Подскажите что делать???
 
Забудь про array - напиши все в js и html и добейся корректной работы а потом лезь в array и уже пытайся данными динамическими кормить меню....
 
Лчше всего в данной ситуации накопать в интернете яваскрипт,
отвечающий твоим критериям, а потом заставить свой php формировать этот скрипт с нужными тебе данными и отдавать браузеру.
 
одно уточнение - масив это результат php скрипта, потом масив разбираю с помощью цыкла и пытаюсь сформировать js код

-~{}~ 12.10.06 13:59:

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

-~{}~ 12.10.06 16:49:

Ни у кого нету никаких идей??? Готов попробовать любые методы.
 
Дай сюда свой код который над которым ты сутки страдаешь а то по показаным двум функциям не очень понятно
 
Valeriy
По приведенным примерам видно, что у тебя большие проблемы с HTML - ну нельзя в нем куски таблиц вставлять в <div>.

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

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

-~{}~ 16.10.06 21:47:

да и еще оно должно быть вериткальным
 
<!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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/arrow_w.gif" width="3" height="5" name="sm2_img2">&nbsp;&nbsp;<a href="#" class="smmenu" >&#194;&#229;&#240;&#245;&#237;&#255;&#255; &#238;&#228;&#229;&#230;&#228;&#224;!!</a><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/arrow_w.gif" width="3" height="5" name="sm2_img2">&nbsp;&nbsp;<a href="#" class="smmenu" >&#199;&#232;&#236;&#237;&#255;&#255;!</a><br></td></tr></table></div><div id="hide3" class="div"><table><tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/arrow_w.gif" width="3" height="5" name="sm2_img2">&nbsp;&nbsp;<a href="#" class="smmenu" >&#234;&#243;&#240;&#242;&#234;&#179;</a><br></td></tr></table></div><div id="hide1" class="div"><table><tr><td>

&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/sm1_arrow_w.gif" width="4" height="4" name="sm1_img1">
&nbsp;&nbsp;<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><!-- sub_parent 2 --><div id="sub_parent" onMouseOver=wiew_sub("div2","hide2"); onMouseOut="hide_sub(this,'div2',event)"; >
&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/sm1_arrow_w.gif" width="4" height="4" name="sm1_img2">
&nbsp;&nbsp;<a onMouseOver=ChangeImg("sm1_img2","images/sm1_arrow_y.gif") onMouseOut=ChangeImg("sm1_img2","images/sm1_arrow_w.gif") href="#" class="smmenu" >&#198;&#229;&#237;&#241;&#234;&#224;&#255;</a></div><!-- end_sub_parent 2 --></td></tr><tr><td>
<div id="div2" >
</div>
</td></tr>
<tr><td><!-- sub_parent 3 --><div id="sub_parent" onMouseOver=wiew_sub("div3","hide3"); onMouseOut="hide_sub(this,'div3',event)"; >

&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/sm1_arrow_w.gif" width="4" height="4" name="sm1_img3">
&nbsp;&nbsp;<a onMouseOver=ChangeImg("sm1_img3","images/sm1_arrow_y.gif") onMouseOut=ChangeImg("sm1_img3","images/sm1_arrow_w.gif") href="#" class="smmenu" >&#196;&#229;&#242;&#241;&#234;&#224;&#255;</a></div><!-- end_sub_parent 3 --></td></tr><tr><td>
<div id="div3" >
</div>
</td></tr>
<tr><td>
&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/sm1_arrow_w.gif" width="4" height="4" name="sm1_img4">
&nbsp;&nbsp;<a onMouseOver=ChangeImg("sm1_img4","images/sm1_arrow_y.gif") onMouseOut=ChangeImg("sm1_img4","images/sm1_arrow_w.gif") href="#" class="smmenu" >&#204;&#243;&#230;&#241;&#234;&#224;&#255;!</a></td></tr></table></div><div id="hide4" class="div"><table><tr><td>

&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/sm1_arrow_w.gif" width="4" height="4" name="sm1_img1">
&nbsp;&nbsp;<a onMouseOver=ChangeImg("sm1_img1","images/sm1_arrow_y.gif") onMouseOut=ChangeImg("sm1_img1","images/sm1_arrow_w.gif") href="#" class="smmenu" >test &#241;&#237;&#224;&#240;&#255;&#230;&#229;&#237;&#232;&#229;</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>
<!-- BEGIN left block -->
<td width="205" valign="top">
<table width="193" height="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td valign="top" height="94">&nbsp;&nbsp;&nbsp;<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" >&nbsp;&nbsp;
<img src="images/m_arrow_w.gif" width="5" height="5" vspace="2" name="img1">&nbsp;&nbsp;
<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" >&#205;&#238;&#226;&#238;&#241;&#242;&#232;!</a></td></tr>

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

<tr><td height="26" valign="middle" >&nbsp;&nbsp;
<img src="images/m_arrow_w.gif" width="5" height="5" vspace="2" name="img2">&nbsp;&nbsp;
<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" >&#206; &#234;&#238;&#236;&#239;&#224;&#237;&#232;&#232;</a></td></tr>

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


<tr><td height="26" valign="middle" ><!-- parent 1 --><div id="parent" onMouseOver=wiew_sub("div1","hide1"); onMouseOut="hide_sub(this, 'div1', event)">&nbsp;&nbsp;
<img src="images/m_arrow_w.gif" width="5" height="5" vspace="2" name="img3">&nbsp;&nbsp;
<a onMouseOut=ChangeImg("img3","images/m_arrow_w.gif"); onMouseOver=ChangeImg("img3","images/m_arrow_y.gif"); href=# class="mmenu" >&#206;&#228;&#229;&#230;&#228;&#224;</a></div><!-- end_parent 1 --></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" ><!-- parent 4 --><div id="parent" onMouseOver=wiew_sub("div4","hide4"); onMouseOut="hide_sub(this, 'div4', event)">&nbsp;&nbsp;

<img src="images/m_arrow_w.gif" width="5" height="5" vspace="2" name="img4">&nbsp;&nbsp;
<a onMouseOut=ChangeImg("img4","images/m_arrow_w.gif"); onMouseOver=ChangeImg("img4","images/m_arrow_y.gif"); href=# class="mmenu" >&#209;&#237;&#224;&#240;&#255;&#230;&#229;&#237;&#232;&#229;</a></div><!-- end_parent 4 --></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" >&nbsp;&nbsp;
<img src="images/m_arrow_w.gif" width="5" height="5" vspace="2" name="img5">&nbsp;&nbsp;

<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" >&#209;&#251;&#235;&#234;&#232;</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%">&nbsp;</td></tr>
<tr><td height="40"><font class="copy"><b>&nbsp;&nbsp;&nbsp;Copyright</b>&nbsp;&copy;&nbsp;2006 Salewa.<br>&nbsp;&nbsp;&nbsp;&#194;&#241;&#229; &#239;&#240;&#224;&#226;&#224; &#231;&#224;&#249;&#232;&#249;&#229;&#237;&#251;<br><br>&nbsp;&nbsp;&nbsp;<b>&#208;&#224;&#231;&#240;&#224;&#225;&#238;&#242;&#234;&#224; &#232; &#239;&#238;&#228;&#228;&#229;&#240;&#230;&#234;&#224;:</b><br>&nbsp;&nbsp;&nbsp;</a></font></td></tr>
</table>
</body>
</html>

-~{}~ 17.10.06 11:12:

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

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

В динамике если навести на одежда - не происходит вызов функции wiew_sub(), и не подскажите как лучше сделать чтобы развернутый слой при навидении мишки не прятался??
 
http://www.samstroy.net/scripts.html там много всяких меню, может найдешь что-то по душе.
 
Попробуй меню на 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; то можно получить горизонтальное меню.
 
Войдите или зарегистрируйтесь для ответа.
Сверху