| | Помогите найти выпадающее меню, которое бы работало в IE, в том числе в версии 7, в Опере, Сафари и Файерфоксе.
За неделю перепробовал десятки скриптов и на DIV, и на яве... Ничего не получается. Я не могу потратить всю жизнь на это меню. Выручайте, друзья.
У меня есть подобного рода конструкция, которая наотрез отказывается работать в IE 7.
<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace »
(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
li:hover ul, li.over ul {
display: block;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
</style>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet
Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
Добавлю еще одно подобного же рода меню. Если прежняя конструкция не открывается в IE вовсе, то это вываливается, но на ссылки невозможно нажать, поскольку тут-же меню сворачивается.
<script>
navHover = function() {
var lis = document.getElementById("navmenu-ha").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
</script>
ul#navmenu-ha ul
{
margin: 0;
border: 0 none;
padding: 0;
width: 260px;
list-style: none;
display: none;
position: absolute;
top: 20px;
left: 0;
border-left: 0px solid #105BAC;
border-right: 0px solid #105BAC;
border-bottom: 0px solid #105BAC;
Z-INDEX: 2;
}
ul#navmenu-ha ul li
{
width: 260px;
float: left;
Z-INDEX: 2;
}
/* Root Menu */
ul#navmenu-ha a
{
padding: 0px 12px 0 12px;
float: none !important;
/*For Opera*/
/*For IE*/
display: block;
background: #105BAC;
color: #FFF;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
Z-INDEX: 2;
/*For IE*/
}
<style>
/* Root Menu Hover Persistence */
ul#navmenu-ha a:hover,
ul#navmenu-ha li:hover a,
ul#navmenu-ha li.iehover a
{
background: #105BAC;
color: #fff;
}
/* 2nd Menu */
ul#navmenu-ha li:hover li a,
ul#navmenu-ha li.iehover li a {
float: none;
background: #105BAC;
color: #FFF;
Z-INDEX: 2;
}
/* 2nd Menu Hover Persistence */
ul#navmenu-ha li:hover li a:hover,
ul#navmenu-ha li:hover li:hover a,
ul#navmenu-ha li.iehover li a:hover,
ul#navmenu-ha li.iehover li.iehover a {
background: #105BAC;
color: #FFF;
Z-INDEX: 2;
}
ul#navmenu-ha ul ul,
ul#navmenu-ha ul ul ul {
display: none;
position: absolute;
top: 0;
left: 300px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-ha li:hover ul ul,
ul#navmenu-ha li:hover ul ul ul,
ul#navmenu-ha li.iehover ul ul,
ul#navmenu-ha li.iehover ul ul ul {
display: block;
}
ul#navmenu-ha li:hover ul,
ul#navmenu-ha ul li:hover ul,
ul#navmenu-ha ul ul li:hover ul,
ul#navmenu-ha li.iehover ul,
ul#navmenu-ha ul li.iehover ul,
ul#navmenu-ha ul ul li.iehover ul {
display: block;
}
</style>
<ul id=navmenu-ha>
echo " <li><a class=a href=#>".$menu['name']."
<ul>
".$menu['body']." ( здесь <li></li> подставится в БД, иначе не работает в Опере и Сафари )
</ul>
</li></a>";
</ul> | |
