Суббота, 27.04.2024, 00:11
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Мастерская сайта » Скрипты » Скрипты меню
Скрипты меню
•°•°-Girl-°•°•Дата: Среда, 07.04.2010, 18:12 | Сообщение # 1
Майор
Группа: Администраторы
Сообщений: 96
Статус:
Стильное выпадающее меню справа

Code
<UL id=menus>   
        <LI><A href="http://АДРЕС">Линка1</A></LI>   
        <LI><A href="http://..........">Линка2</A>   
        <UL>   
        <LI><A href="http://..........">Линка3</A></LI>   
        <LI><A href="http://...........">Линка4</A></LI>   
        <LI><A href="http://............">Линка5</A></LI>   
        </UL></LI>   
        <LI><A href="http://.............">Линка6</A>        
        <UL>   
        <LI><A href="http://.............">Линка7</A></LI>   
        <LI><A href="http://.............">Линка9</A></LI>   
        <LI><A href="http://..............">Линка10</A></LI>   
        <LI><A href="http://..............">Линка11</A></LI>   
        </UL></LI>   
</UL>   

<STYLE type=text/css>BODY {   
        FONT: 11px verdana   
}   
UL {   
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; LIST-STYLE-TYPE: none   
}   
UL LI {   
        POSITION: relative   
}   
LI UL {   
        DISPLAY: none; LEFT: 149px; POSITION: absolute; TOP: 0px   
}   
UL LI A {   
        BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #fff; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; COLOR: #777; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 0px solid; TEXT-DECORATION: none   
}   
        HTML UL LI {   
        FLOAT: left; HEIGHT: 1%   
}   
        HTML UL LI A {   
        HEIGHT: 1%   
}   
UL LI A:hover {   
        BACKGROUND: #f9f9f9; COLOR: red   
}   
LI UL LI A {   
        PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px   
}   
LI:hover UL {   
        DISPLAY: block   
}   
LI.over UL {   
        DISPLAY: block   
}   

</STYLE>   
<SCRIPT type=text/javascript>   

startList = function() {//fantasyflash.ru   
if (document.all&&document.getElementById) {   
menusRoot = document.getElementById("menus");   
for (i=0; i<menusRoot.childNodes.length; i++) {   
node = menusRoot.childNodes[i];   
if (node.nodeName=="LI") {   
node.onmouseover=function() {   
this.className+=" over";//osw   
        }   
        node.onmouseout=function() {   
        this.className=this.className.replace(" over", "");   
        }   
        }   
        }   
        }   
}   
window.onload=startList;</SCRIPT>

ВИД СКРИПТА

  • Линка1
  • Линка2

    • Линка3
    • Линка4
    • Линка5

  • Линка6

    • Линка7
    • Линка8
    • Линка9
    • Линка10
  •  
    •°•°-Girl-°•°•Дата: Среда, 07.04.2010, 18:12 | Сообщение # 2
    Майор
    Группа: Администраторы
    Сообщений: 96
    Статус:
    Выпадающее меню-список

    Code
    <FORM><SELECT size=1 name=menushka>           
    <OPTION value=http://АДРЕС/selected>Linka1</OPTION>   
    <OPTION value=http://..........>Linka2</OPTION>   
    <OPTION value=http://............>Linka3</OPTION>   
    <OPTION value=http://............>Linka4</OPTION>   
    <OPTION value=http://.............>Linka5 home</OPTION>   
    </SELECT><INPUT class=but onclick="location.href =           

    this.form.menushka.options[this.form.menushka.selectedIndex].value" type=button value="перейти" name=button></FORM>
     
    •°•°-Girl-°•°•Дата: Среда, 07.04.2010, 18:13 | Сообщение # 3
    Майор
    Группа: Администраторы
    Сообщений: 96
    Статус:
    Прикольное летающее меню

    Code
    <SCRIPT LANGUAGE = "JavaScript">   
            function showObject(object) {   
            object.visibility = VISIBLE;   
            }   
            function hideObject(object) {   
            object.visibility = HIDDEN;   
            }   
            function slideLogo(from, to) {   
            if (from < to) {   
            company.top = (from += 10);   
            setTimeout('slideLogo(' + from + ',' + to + ')', 75);//fantasyflash.ru   
            }   
            else initObjects();   
            }   

            function rotateObjects() {   
            for (var i = 0; i < pos.length; i++) {   
            pos[i] += inc; objects[i].visibility = 'visible';//osw   
            objects[i].left = (r * Math.cos(pos[i])) + xoff   
            objects[i].top = (r * Math.sin(pos[i])) + yoff;   
            }   
            rotateTimer = setTimeout("rotateObjects()", 70);   
            }   

            function initObjects() {   
            objects = new Array(fly1, fly2, fly3, fly4);   
            pos = new Array();   
            pos[0] = 0;   
            for (var i = 1; i < objects.length; i++) {   
            pos[i] = parseFloat(pos[i - 1] + ((2 * pi) / objects.length));   
            }   
            rotateObjects();   
            }   
            var objects;   
            var pos;   
            var r = 160; // радиус   
            var xoff = 400;        
            var yoff = 170;        
            var pi = Math.PI;        
            var inc = pi / 180;        
            var objects;        
            var pos;        
    </SCRIPT>   
    <DIV ID = "fly1" CLASS = "fly"> <A HREF = "http://komu-za-40.ucoz.kz/" onMouseOver = "showObject(desc1)" onMouseOut = "hideObject(desc1)">Линка1</A><BR></DIV>       
    <DIV ID = "fly2" CLASS = "fly">  <A HREF = "http://komu-za-40.ucoz.kz/" onMouseOver = "showObject(desc2)" onMouseOut = "hideObject(desc2)">Линка2</A><BR> </DIV>        
    <DIV ID = "fly3" CLASS = "fly"> <A HREF = "http://komu-za-40.ucoz.kz/" onMouseOver = "showObject(desc3)" onMouseOut = "hideObject(desc3)">Линка3</A><BR> </DIV>        
    <DIV ID = "fly4" CLASS = "fly"> <A HREF = "http://komu-za-40.ucoz.kz/" onMouseOver = "showObject(desc4)" onMouseOut = "hideObject(desc4)">Линка4</A><BR> </DIV>        
    <DIV ID = "company" CLASS = "logo">.:Меню:.</DIV>   
    <DIV ID = "desc1" CLASS = "desc"> Описание первой ссылки </DIV>       
    <DIV ID = "desc2" CLASS = "desc"> А это Описание второй ссылки</DIV>       
    <DIV ID = "desc3" CLASS = "desc"> Описание третьей ссылки </DIV>       
    <DIV ID = "desc4" CLASS = "desc"> А это Описание четвертой ссылки </DIV>        
    <SCRIPT LANGUAGE = "JavaScript">   
            var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);   
            var HIDDEN = (isNS) ? 'hide' : 'hidden';   
            var VISIBLE = (isNS) ? 'show' : 'visible';   
            var fly1 = (isNS) ? document.fly1 : document.all.fly1.style;   
            var fly2 = (isNS) ? document.fly2 : document.all.fly2.style;   
            var fly3 = (isNS) ? document.fly3 : document.all.fly3.style;   
            var fly4 = (isNS) ? document.fly4 : document.all.fly4.style;   
            var company = (isNS) ? document.company : document.all.company.style;   
            var desc1 = (isNS) ? document.desc1 : document.all.desc1.style;   
            var desc2 = (isNS) ? document.desc2 : document.all.desc2.style;   
            var desc3 = (isNS) ? document.desc3 : document.all.desc3.style;   
            var desc4 = (isNS) ? document.desc4 : document.all.desc4.style;   
            slideLogo(0, 140);   
    </SCRIPT></CENTER>   

    <STYLE>   
    .fly {   
    color: aqua;   
    font-family: arial;   
    font-size: 24px;   
    position: absolute;   
    visibility: hidden;   
    z-index: 2;   
    }   
    .logo {   
    font-family: arial;   
    font-size: 30px;   
    color: pink;   
    position: absolute;   
    top: 0px;   
    left: 200px;   
    visibility: visible;   
    z-index: 1;   
    }   
    .desc {   
    text-align: center;   
    font-family: arial;   
    font-size: 12px;   
    color: red;   
    position: absolute;   
    top: 220px;   
    left: 240px;   
    width: 400px;   
    visibility: hidden;   
    z-index: 0;   
    }   
    A {   
    color: #9933CC;}   
    </STYLE>
     
    •°•°-Girl-°•°•Дата: Среда, 07.04.2010, 18:13 | Сообщение # 4
    Майор
    Группа: Администраторы
    Сообщений: 96
    Статус:
    Вертикальное меню с подсказками

    Code
    <SCRIPT language=JavaScript1.2>   
    offMessage = "здесь можно почитать подсказку"   

    function menuOn(which,message){   
         if (document.all||document.getElementById){   
         which.className='BorderOn'//osw   
         if (document.getElementById) {document.getElementById("Message").innerHTML = message}   
         else {Message.innerHTML = message}   
         }   
    }   
    function menuOff(which){   
         if (document.all||document.getElementById){   
         which.className='BorderOff'   
         if (document.getElementById) {document.getElementById("Message").innerHTML = offMessage}   
         else {Message.innerHTML = offMessage}   
         //http://komu-za-40.ucoz.kz/-(ЗАМЕНИ НА СВОЙ АДРЕС)   
         }   
    }   
    //-->   
    </SCRIPT>   
    <TABLE align=center class=BorderOff onmouseover="menuOn(this,'Подсказка для ссылки1')"     
         onmouseout=menuOff(this) cellSpacing=0 cellPadding=3>   
         <TR>   
         <TD><A href="http://АДРЕС"><FONT face=Tahoma     
         size=2><B>Линка1</B></FONT></A></TD></TR></TABLE>   
    <TABLE align=center onmouseover="menuOn(this,'А это Подсказка для ссылки2')"     
         onmouseout=menuOff(this) cellSpacing=0 cellPadding=3>   
         <TR>   
         <TD><A class=mBlue href="http://АДРЕС"><FONT     
         face=Tahoma size=2><B>Линка2</B></FONT></A></TD></TR></TABLE>   
    <TABLE align=center class=BorderOff onmouseover="menuOn(this,'Подсказка для ссылки3')"     
         onmouseout=menuOff(this) cellSpacing=0 cellPadding=3>   
         <TR>   
         <TD><A class=mGreen href="АДРЕС"><FONT     
         face=Tahoma size=2><B>Линка3</B></FONT></A></TD></TR></TABLE>   
    <br>     
    <TABLE align=center cellSpacing=0 cellPadding=1 bgColor=#ffffff>   
         <TR><TD vAlign=top align=left width=241 height=35><FONT id=Message face=Tahoma color=#0000ff size=1>меню с подсказками с </FONT></TD></TR></TABLE>
     
    •°•°-Girl-°•°•Дата: Среда, 07.04.2010, 18:13 | Сообщение # 5
    Майор
    Группа: Администраторы
    Сообщений: 96
    Статус:
    Выдвежное меню
    Первая часть ставится после кода:
    Code
    <html>      
          <head>

    Code
    <title>JavaScript - Tree Menu</title>      

    <!-- HEAD STARTS HERE -->      

    <SCRIPT language=JavaScript>      
          var img1 = new Image();      
          img1.src = "http://i051.radikal.ru/0806/56/34b976fddd52.jpg";      
          var img2 = new Image();      
          img2.src = "http://i012.radikal.ru/0806/a0/1e856a660643.jpg";      
               
          function doOutline() {      
          var srcId, srcElement, targetElement;      
          srcElement = window.event.srcElement;      
          if (srcElement.className.toUpperCase() == "LEVEL1" || srcElement.className.toUpperCase() == "FAQ") {      
          srcID = srcElement.id.substr(0, srcElement.id.length-1);      
          targetElement = document.all(srcID + "s");      
          srcElement = document.all(srcID + "i");      
               
          if (targetElement.style.display == "none") {      
          targetElement.style.display = "";      
          if (srcElement.className == "LEVEL1") srcElement.src = img2.src;      
          } else {      
          targetElement.style.display = "none";      
          if (srcElement.className == "LEVEL1") srcElement.src = img1.src;      
          }      
          }      
          }      
               
          document.onclick = doOutline;      
          </SCRIPT>      

    <!-- HEAD ENDS HERE -->    

    Вторая часть после тега:

    Code
    </head>      
          <body bgcolor="#EDEDED" text="#000000" link="#000000">

    Code
    <!-- BODY STARTS HERE -->      

    <TABLE border=0 cellPadding=0 cellSpacing=0 style="margin-left: 50; margin-top: 15">      
          <TR vAlign=top>      
          <TD width=180><A class=Level1 id=OUT0t><IMG border=0 class=LEVEL1 id=OUT0i src="http://i051.radikal.ru/0806/56/34b976fddd52.jpg"> ССЫЛКА 1</A><BR>      
          <DIV id=OUT0s style="DISPLAY: none">      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 1</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 2</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 3</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 4</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 5</A><BR>      
          </DIV>      
          <A class=Level1 id=OUT1t><IMG border=0 class=LEVEL1 id=OUT1i src="http://i051.radikal.ru/0806/56/34b976fddd52.jpg"> ССЫЛКА 2</A><BR>      
          <DIV id=OUT1s style="DISPLAY: none">      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 1</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 2</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 3</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 4</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 5</A><BR>      
          </DIV>      
          <A class=Level1 id=OUT2t><IMG border=0 class=LEVEL1 id=OUT2i src="http://i051.radikal.ru/0806/56/34b976fddd52.jpg"> ССЫЛКА 3</A><BR>      
          <DIV id=OUT2s style="DISPLAY: none">      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 1</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 2</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 3</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 4</A><BR>      
          </DIV>      
          <A class=Level1 id=OUT3t><IMG border=0 class=LEVEL1 id=OUT3i src="http://i051.radikal.ru/0806/56/34b976fddd52.jpg"> ССЫЛКА 4</A><BR>      
          <DIV id=OUT3s style="DISPLAY: none">      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 1</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 2</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 3</A><BR>      
          <IMG src="none.gif" width="9" height="9"><A class=Level2 href="http://АДРЕС ВАШ">ссылка 4</A><BR>      
          </DIV>      
          </table>      

    <!-- BODY ENDS HERE -->    
     
    Форум » Мастерская сайта » Скрипты » Скрипты меню
    • Страница 1 из 1
    • 1
    Поиск:

    Все материалы принадлежат сайту GRAPHIC.AT.UA! Копирование строго запрещено!!! 2024
    Сделать бесплатный сайт с uCoz