|
Листинг меню.
<!-- Определение меню и внедрение Embedded Open Type
(EOT)
и True Type (TTF) шрифтов --> <style> #ZodiacMenu div {Z-INDEX: 100; POSITION: relative; width:100%} #ZodiacMenu a {text-decoration: none; color: Blue} #ZodiacMenu a:hover {color: Red} #ZodiacMenu ul {margin: 0; padding: 0; list-style-type:none; list-style-image:url(''); /* Здесь и далее отключение маркеров */} #ZodiacMenu li{border-style:outset; height:38pt; border-width:1px; font-family: GothicRus, Arial; font-size:16pt;float:left; padding:0; margin:0; width:120pt; text-align:center; position:relative; list-style-type:none; list-style-image:url(''); background-color: Khaki} #ZodiacMenu li ul{list-style-image:url(""); list-style:none; padding:0; margin:0; display: none; position:absolute; left:1; top:30pt} #ZodiacMenu li ul li {height:25px; margin:0; text-align:left; background: Khaki; list-style-type:none; list-style-image:url("");} #ZodiacMenu li a {display:block} #ZodiacMenu li ul li a:visited {color: DarkKhaki} /* Здесь и далее переменная GoodPC используется для управления IE */ #ZodiacMenu li:hover ul, #ZodiacMenu li.GoodPC ul{display:block;} #ZodiacMenu li:hover, #ZodiacMenu li.GoodPC{background: Yellow} @font-face { /* Шрифт переработан автором */ font-family: GothicRus; font-style: normal; font-weight: normal; src: url("http://www.goodpc.narod.ru/img/gotrus.eot");} @font-face { /* Шрифт переработан автором */ font-family: GothicRus; src: local("GothicRus"), local("GothicRus"), url("http://www.goodpc.narod.ru/img/GothicRus.TTF") format("truetype");} </style> <!-- Вызов новых (дочерних) страниц, в одном и том же окне.--> <script language=javascript> function OpNewWin(oPageUrl) {// Открыть новое окно MyOpWin=window.open(oPageUrl,"WinFirstName") MyOpWin.focus() // Окно на передний план window.event.returnValue = false } </script> <!-- Собственно структура меню.--> <div class=ZodiacMenu id=ZodiacMenu> <ul> <li><a href="./">Домой</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/index.htm">Зодиакальные созвездия</a> <ul> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/oven.htm">Овен</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/telec.htm">Телец</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/bliznec.htm">Близнецы</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/rak.htm">Рак</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/lev.htm">Лев</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/deva.htm">Дева</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/vesi.htm">Весы</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/scorpion.htm">Скорпион</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/strelec.htm">Стрелец</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/kozerog.htm">Козерог</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/vodolei.htm">Водолей</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/ribi.htm">Рыбы</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href ="http://www.goodpc.narod.ru/other/zodiac/zmey.htm">Змееносец</a></li> </ul> </li> <li><a onclick="OpNewWin(this.href)" target="_top" href="http://www.goodpc.narod.ru/fotki/zodiac.htm">Рисунки знаков Зодиака</a></li> <li><a onclick="OpNewWin(this.href)" target="_top" href="http://www.goodpc.narod.ru/fotki/photoshop.htm">Шаблоны Photoshop</a></li> </ul> </div> <!-- Конец меню.--> <!-- Программа управления Меню для IE.--> <script language=javascript> // Объект GoodPC см. Стиль jsHoverZodiacMenu = function() { var MenuElement = document.getElementById("ZodiacMenu").getElementsByTagName("li"); for (var i=0, len=MenuElement.length; i<len; i++) { MenuElement[i].onmouseover=function() { this.className+=" GoodPC"} MenuElement[i].onmouseout=function() { this.className=this.className.replace(" GoodPC", "")} } } <!-- Активировать Обработчик Меню для IE. --> if ((navigator.appVersion.indexOf("MSIE") > 0)) jsHoverZodiacMenu() </script>
To be continue...HTML Меню •
|
|