Стабильное горизонтальное меню

Горизонтальное меню вверху

Главная Контакты Софт Термины Неисправности Поисковики Шаблоны Хостинг Домен Безопасность Переводчик Советы

Просмотр скрипта

<style>
all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px Arial; color:red; cursor: hand; z-index:100}
#MainTable A:hover {color:green;}
</style>
<script language="JavaScript">
var keepstatic=1
var menucolor="#FDFA02"
var submenuwidth=140
</script>
<title>Стабильное горизонтальное меню</title>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<script language="JavaScript" >
if (document.all)    {n=0;ie=1;ns6=0;fShow="visible";fHide="hidden";}
if (document.getElementById&&!document.all)    {n=0;ie=0;ns6=1;fShow="visible";fHide="hidden";}
if (document.layers) {n=1;ie=0;ns6=0;fShow="show";fHide="hide";}
opr6=ie&&navigator.userAgent.indexOf("Opera")!=-1
window.onerror=new Function("return true")
rightX = 0;
function Menu()
{
    this.bgColor     = menucolor;
    if (ie) this.menuFont = "bold 12px Arial";
    if (n)  this.menuFont = "bold 12px Verdana";
    this.fontColor   = "black";
    this.addItem    = addItem;
    this.addSubItem = addSubItem;
    this.showMenu   = showMenu;
    this.mainPaneBorder = 0;
    this.subMenuPaneBorder = 0;
    this.subMenuPaneWidth = submenuwidth;
    lastMenu = null;
    rightY = 0;
    leftY = 0;
    leftX = 0;
    HTMLstr = "";
    HTMLstr += "\n";
    HTMLstr += "\n";
    if (ie||ns6) HTMLstr += "<div id='MainTable' style='position:absolute;top:0;left:0;'>\n";
//    if (n)  HTMLstr += "<layer name='MainTable'>\n";
    HTMLstr += "<table width='100%' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";
    HTMLstr += "<tr>";
    if (n) HTMLstr += "<td> ";
    HTMLstr += "\n";
    HTMLstr += "\n";
    HTMLstr += "\n";
    if (n) HTMLstr += "</td>";
    HTMLstr += "</tr>\n";
    HTMLstr += "</table>\n";
    HTMLstr += "\n";
    HTMLstr += "\n";
    HTMLstr += "\n";
    HTMLstr += "\n";
    HTMLstr += "\n";
    if (ie||ns6) HTMLstr+= "</div>\n";
//    if (n)  HTMLstr+= "</layer>\n";
    HTMLstr += "\n";
}
function addItem(idItem, text, hint, location, altLocation)
{
    var Lookup = "";
    if (HTMLstr.indexOf(Lookup) != -1)
    {
        alert(idParent + " already exist");
        return;
    }
    var MENUitem = "";
    MENUitem += "\n\n";
    if (n)
    {
        MENUitem += "<ilayer name="+idItem+">";
        MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
        MENUitem += "| ";
        MENUitem += text;
        MENUitem += "</a>";
        MENUitem += "</ilayer>";
    }
    if (ie||ns6)
    {
        MENUitem += "<td>\n";
        MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n";
        MENUitem += "<a ";
        MENUitem += "class=clsMenuItemIE ";
//        MENUitem += "style='text-decoration: none; font: "+this.menuFont+"; color: "+this.fontColor+"; cursor: hand;' ";
        if (hint != null)
            MENUitem += "title='"+hint+"' ";
        if (location != null)
        {
            MENUitem += "href='"+location+"' ";
            MENUitem += "onmouseover=\"hideAll()\" ";
        }
        else
        {
            if (altLocation != null)
                MENUitem += "href='"+altLocation+"' ";
            else
                MENUitem += "href='.' ";
            MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" ";
            MENUitem += "onclick=\"return false;\" "
        }
        MENUitem += ">";
        MENUitem += "| \n";
        MENUitem += text;
        MENUitem += "</a>\n";
        MENUitem += "</div>\n";
        MENUitem += "</td>\n";
    }
    MENUitem += "\n\n";
    MENUitem += "\n";
    HTMLstr = HTMLstr.replace("\n", MENUitem);
}
function addSubItem(idParent, text, hint, location, linktarget)
{
    var MENUitem = "";
    Lookup = "";
    if (HTMLstr.indexOf(Lookup) == -1)
    {
        alert(idParent + " not found");
        return;
    }
    Lookup = "";
    if (HTMLstr.indexOf(Lookup) == -1)
    {
        if (n)
        {
            MENUitem += "\n";
            MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n";
            MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
            MENUitem += "\n";
            MENUitem += "</table>\n";
            MENUitem += "</layer>\n";
            MENUitem += "\n";
        }
        if (ie||ns6)
        {
            MENUitem += "\n";
            MENUitem += "<div id='"+idParent+"submenu' onmouseout=operahide() style='position:absolute; visibility: hidden; z-index:100; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n";
            MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
            MENUitem += "\n";
            MENUitem += "</table>\n";
            MENUitem += "</div>\n";
            MENUitem += "\n";
        }
        MENUitem += "\n";
        HTMLstr = HTMLstr.replace("\n", MENUitem);
    }
    Lookup = "\n";
    if (n)  MENUitem = "<tr><td><a class=clsMenuItemNS title='"+hint+"' href='"+location+"' target='"+linktarget+"'>"+text+"</a><br></td></tr>\n";
    if (ie||ns6) MENUitem = "<tr><td><a class=clsMenuItemIE title='"+hint+"' href='"+location+"' target='"+linktarget+"'>"+text+"</a><br></td></tr>\n";
    MENUitem += Lookup;
    HTMLstr = HTMLstr.replace(Lookup, MENUitem);
}
function showMenu()
{
    document.writeln(HTMLstr);
}
function displaySubMenu(idMainMenu)
{
    var menu;
    var submenu;
    if (n)
    {
        submenu = document.layers[idMainMenu+"submenu"];
        if (lastMenu != null && lastMenu != submenu) hideAll();
        submenu.left = document.layers[idMainMenu].pageX;
        submenu.top  = document.layers[idMainMenu].pageY + 25;
        submenu.visibility = fShow;
        leftX  = document.layers[idMainMenu+"submenu"].left;
        rightX = leftX + document.layers[idMainMenu+"submenu"].clip.width;
        leftY  = document.layers[idMainMenu+"submenu"].top+
            document.layers[idMainMenu+"submenu"].clip.height;
        rightY = leftY;
    } else if (ie||ns6) {
//alert(document.getElementById(idMainMenu+"submenu").id)
        menu = ie? eval(idMainMenu) : document.getElementById(idMainMenu);
        submenu = ie? eval(idMainMenu+"submenu.style") : document.getElementById(idMainMenu+"submenu").style;
        submenu.left = calculateSumOffset(menu, 'offsetLeft');
//        submenu.top  = calculateSumOffset(menu, 'offsetTop') + 30;
        submenu.top  = menu.style.top+23;
        submenu.visibility = fShow;
        if (lastMenu != null && lastMenu != submenu) hideAll();
        leftX  = ie? document.all[idMainMenu+"submenu"].style.posLeft : parseInt(document.getElementById(idMainMenu+"submenu").style.left);
        rightX = ie? leftX + document.all[idMainMenu+"submenu"].offsetWidth : leftX+parseInt(document.getElementById(idMainMenu+"submenu").offsetWidth);
        leftY  = ie? document.all[idMainMenu+"submenu"].style.posTop+
            document.all[idMainMenu+"submenu"].offsetHeight : parseInt(document.getElementById(idMainMenu+"submenu").style.top)+parseInt(document.getElementById(idMainMenu+"submenu").offsetHeight);
        rightY = leftY;
    }
    lastMenu = submenu;
}
function hideAll()
{
    if (lastMenu != null) {lastMenu.visibility = fHide;lastMenu.left = 0;}
}
function calculateSumOffset(idItem, offsetName)
{
    var totalOffset = 0;
    var item = eval('idItem');
    do
    {
        totalOffset += eval('item.'+offsetName);
        item = eval('item.offsetParent');
    } while (item != null);
    return totalOffset;
}
function updateIt(e)
{
    if (ie&&!opr6)
    {
        var x = window.event.clientX;
        var y = window.event.clientY;
        if (x > rightX || x < leftX) hideAll();
        else if (y > rightY) hideAll();
    }
    if (n||ns6)
    {
        var x = e.pageX;
        var y = e.pageY;
        if (x > rightX || x < leftX) hideAll();
        else if (y > rightY) hideAll();
    }
}
function operahide(){
        if (opr6){
        if (!MainTable.contains(event.toElement))
        hideAll()
}
}
if (ie||ns6)
{
    document.body.onclick=hideAll;
    document.body.onscroll=hideAll;
    document.body.onmousemove=updateIt;
}
if (document.layers)
{
    window.captureEvents(Event.MOUSEMOVE);
    window.captureEvents(Event.CLICK);
    window.onmousemove=updateIt;
    window.onclick=hideAll;
}
</script>
 <script language="JavaScript" >
//Top Nav bar script v2.1- http://www.dynamicdrive.com/dynamicindex1/sm/index.htm
function showToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location, linktarget);
    menu = new Menu();
    menu.addItem("webmasterid", "Меню 1", "",  null, null);
    menu.addItem("newsid", "Меню 2", "",  null, null);
    menu.addItem("freedownloadid", "Меню 3", "",  null, null);
    menu.addItem("searchengineid", "Меню 4", "",  null, null);
    menu.addItem("miscid", "Мое меню", "",  null, null);
    menu.addSubItem("webmasterid", "Ссылка 1", "",  "", "");
    menu.addSubItem("webmasterid", "Ссылка 2", "",  "", "");
    menu.addSubItem("webmasterid", "Ссылка 3", "",  "", "");
    menu.addSubItem("webmasterid", "Ссылка 4", "",  "../index.html", "");
   
    menu.addSubItem("newsid", "Ссылка 1", "",  "", "");
    menu.addSubItem("newsid", "Ссылка 2", "",  "", "");
    menu.addSubItem("newsid", "Ссылка 3", "",  "", "");
   
    menu.addSubItem("freedownloadid", "Ссылка 1", "",  "", "");
    menu.addSubItem("freedownloadid", "Ссылка 2", "",  "", "");
    menu.addSubItem("freedownloadid", "Ссылка 3", "",  "", "");
    menu.addSubItem("freedownloadid", "Ссылка 4", "",  "", "");
   
    menu.addSubItem("searchengineid", "Ссылка 1", "",  "../AnimGIF/Animgif.html", "");
    menu.addSubItem("searchengineid", "Ссылка 2", "",  "../AnimGIF/Animgif.html", "");
    menu.addSubItem("searchengineid", "Ссылка 3", "",  "../AnimGIF/Animgif.html", "");
    menu.addSubItem("searchengineid", "Ссылка 4", "",  "../AnimGIF/Animgif.html", "");
   
    menu.addSubItem("miscid", "Говорящий попугай", "",  "http://schavkat.land.ru/", "");
    menu.addSubItem("miscid", "Размеры нашего мира", "",  "http://sabangi.land.ru/", "");
    menu.addSubItem("miscid", "Просмотр фото", "", "foto.html/", "");
    menu.addSubItem("miscid", "Динамика JavaScript", "", "JSdinamic.html/", "");
    menu.showMenu();
}
</script>
<script language="JavaScript">
showToolbar();
</script>
<script language="JavaScript">
function UpdateIt(){
if (ie&&keepstatic&&!opr6)
document.all["MainTable"].style.top = document.body.scrollTop;
setTimeout("UpdateIt()", 200);
}
UpdateIt();
</script>

Пример создания сайта
Размещение сайта в Интернете
Раскрутка сайта в Интернете
Заработок в Интернете
Visual Basic 6.0 с примерами
VBScript
Руководство по C++
JavaScript
Анимация в формате GIF
Вставка видео SWF в сайт.
Пиктограмма сайта (favicon)

Оригинальные меню

Анимированный текст

Календари и часы

Эффектная графика

Дополнительные окна

Таблицы

Таблица с закругленными уголками

Калькуляторы

Кнопки

Разное