В этой статье описывается метод реализации навигационных эффектов с помощью JS+CSS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
1. Программный код заключается в следующем:
Кода кода выглядит следующим образом: <! Doctype html public "-// w3c // dtd xhtml 1.1 // en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> CSS+JS реализует бесконечное раскрывающееся меню с хорошей совместимостью </title>
<стиль типа = "text/css">
*{маржа: 0; Заполнение: 0; граница: 0;}
Body {Font: 12px/130% Verdana, Женева, Ариал, Helvetica, Sans-Serif, 安体;} li {list-style: none;}
.clearfix: After {content: ""; Display: Block; Height: 0; Clear: оба; Visibility: Hidden;}. ClearFix {Display: Inline Block;}
A: Link {Color:#000; Текстовое декорация: нет; }
A: Посещено {Color:#000; Текстовое декорация: нет; }
A: Hover {Color:#000; Текстовое декорация: нет; }
.menu {ширина: 778px; Высота: 26px; Фон: #ffff; поля: 0 Auto;}
.menusel {float: left; ширина: 100px; позиция: относительно; Высота: 25px; Фон: #DDD; высота линии: 25px; Мяботая маржа: 1PX; *Margin-Left: 0px; _margin-left: -1px;}
.menusel h2 {font-size: 12px; }
.menusel a {display: block; text-align: center; Ширина: 100px; граница: 1px solid #a4a4a4; Высота: 25px; Пограничный подъем: 1px solid #a4a4a4; позиция: относительно; z-index: 2;}
.menusel a: Hover {Border: 1px Solid #A4A4A4; Пограничный подъем: 1PX. позиция: относительно; Z-Index: 2; Высота: 25px;}
.hover a {Border-Bottom: 1px пунктир #eeeeeeeeeeeeee; ПРИМЕНЕНИЕ: #EEEEEEEEE; }
.position {позиция: абсолют; z-index: 1;}
.menusel ul {ширина: 125px; Фон: #EEE; Граница: 1PX SOLIT #A4A4A4; маржинальная версия: -1px; позиция: относительно; z-index: 1; дисплей: нет;}
.menusel .block {display: block;}
.typeul li {border-bottom: 1px пунктир #a4a4a4; ширина: 125px; позиция: относительно; Плавание: осталось; }
.typeul li a {граница: нет; ширина: 125px; }
.typeul li a: Hover {граница: нет; Фон: #DDD;}
.typeul {margin-left: 0; }
.typeul ul {слева: 125px; Верх: 0; позиция: абсолютно;}
.fli {margin -left: -1px; РЕМЖА СЛЕДУ: #EEEEEE SOLID 1PX;}
.menusel .lli {граница: нет; }
</style>
<script type = "text/javascript"> document.execcommand ("founalImageCache", false, true); </script> <!-IE6.
</head>
<тело>
<div>
<div id = "menu1">
<h2> <a href = "/"> меню 1 </a> </h2>
<div>
<ul>
<li> <a href = "// www.vevb.com"> Параметр меню 1-2 </a> </li>
<li>
<a href = "#"> Опция меню 1-2 </a>
<ul>
<li> <a href = "#"> Опция меню 1-2-1 </a> </li>
<li> <a href = "#"> Опция меню 1-2-2 </a> </li>
</ul>
</li>
<li> <a href = "// www.vevb.com"> Параметр меню 1-2 </a> </li>
<li> <a href = "#"> Опция меню 1-2 </a> </li>
</ul>
</div> <!-позиция->
</div> <!-Menusel->
<div id = "menu2">
<h2> <a href = "#"> меню 2 </a> </h2>
<div>
<ul>
<li> <a href = "#"> Опция меню 2-2 </a> </li>
<li> <a href = "#"> Опция меню 2-2 </a>
<ul>
<li> <a href = "#"> Опция меню 2-2-1 </a> </li>
<li> <a href = "#"> Опция меню 2-2-2 </a>
<ul>
<li> <a href = "#"> Опция меню 2-2-1 </a> </li>
<li> <a href = "#"> Опция меню 2-2-2 </a>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> Опция меню 2-2 </a> </li>
<li> <a href = "#"> Опция меню 2-2 </a> </li>
</ul>
</div> <!-позиция->
</div> <!-Menusel->
<div id = "menu3">
<h2> <a href = "#"> меню 3 </a> </h2>
<div>
<ul>
<li> <a href = "#"> Опция меню 3-2 </a> </li>
<li> <a href = "#"> Опция меню 3-2 </a>
<ul>
<li> <a href = "#"> Опция меню 3-2-1 </a> </li>
<li> <a href = "#"> Опция меню 3-2-2 </a>
<ul>
<li> <a href = "#"> Опция меню 3-2-1 </a> </li>
<li> <a href = "#"> Опция меню 3-2-2 </a>
<ul>
<li> <a href = "#"> Опция меню 3-2-1 </a> </li>
<li> <a href = "#"> Опция меню 3-2-2 </a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> Опция меню 3-2 </a> </li>
<li> <a href = "#"> Опция меню 3-2 </a> </li>
</ul>
</div> <!-позиция->
</div> <!-Menusel->
</div> <!-меню->
<script type = "text/javascript">
для (var x = 1; x <4; x ++)
{
var menuid = document.getElementbyId ("меню"+x);
Menuid.num = x;
тип();
}
Тип функции ()
{
var menuh2 = menuid.getelementsbytagname ("h2");
var menuul = menuid.getelementsbytagname ("ul");
var menuli = menuul [0] .getelementsbytagname ("li");
menuh2 [0] .onmouseover = show;
menuh2 [0] .onmouseout = unshow;
меню [0] .onmouseover = show;
меню [0] .onmouseout = unshow;
Функция show ()
{
Менюль [0] .classname = "blayfix typeul Block"
}
функция Unshow ()
{
меню [0] .classname = "typeul"
}
для (var i = 0; i <menuli.length; i ++)
{
Менули [i] .num = i;
var liul = menuli [i] .getelementsbytagname ("ul") [0];
if (liul)
{
typeShow ()
}
}
Функция typeShow ()
{
Menuli [i] .onmouseover = showul;
Menuli [i] .onmouseout = unshowul;
}
функция Showul ()
{
menuli [this.num] .getelementsbytagname ("ul") [0] .classname = "block";
}
Функция unshowul ()
{
menuli [this.num] .getelementsbytagname ("ul") [0] .classname = "";
}
}
</script>
</body>
</html>
2. Программные эффекты
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.