|
Сообщение от Shaci
|
|
в ie верстка разваливается
|
Вижу 2 проблемы...
1. отступ сиреневого блока сверху
2. не верное позиционирование субменю
Как вариант (смотрел в ИЕ7 и Опере)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrap, #content, ul, ul li {
overflow: hidden;
position: relative;
}
#wrap {
margin:0 auto;
background: gray;
width: 408px;
height: auto;
}
#content {
background: #330033;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 80px;
}
ul, ul li {
margin: 0px;
padding: 0px;
}
ul {
width: 408px;
height: 20px;
}
ul li {
background: #35C;
border: solid 1px;
border-color: #46F #238 #238 #46F;
display: block;
list-style: none;
text-align: center;
float: left;
width: 100px;
}
ul li a {
color: #fff;
font: 300 14px/14px arial, tahoma, verdana, sans-serif;
text-decoration: none;
}
#first, #second, #third, #fourth {
height:20px;
border:solid 0px 1px 0px 1px;
background:#330066;
}
#submenu {
position:absolute;
top: 22px;
left: 0;
height:0px;
overflow:visible;
}
#tab {
height: 40px;
}
</style>
<script type="text/javascript">
window.onload = function() {
//addEvent
function addEvent(elem, type, handler){
if (elem.addEventListener){
elem.addEventListener(type, handler, false)
} else {
elem.attachEvent("on"+type, function () {handler.apply(elem)})
}
}
var childs = document.getElementById("submenu").getElementsByTagName("li");
for (var i = 0; i < childs.length; i++) {
childs[i].style.height = "0px";
}
var animating = false;
var menuLi = document.getElementById("menu").getElementsByTagName("li");
var submenu, str, id;
for (var i = 0; i < menuLi.length; i++) {
var a = menuLi[i].getElementsByTagName("a")[0];
addEvent(a, "click", incDec);
}
function incDecInner() {
if (str == "+") {
if (submenu.style.height != "20px") {
submenu.style.height = parseInt(submenu.style.height) + 2 + "px";
}
else {
animating = false;
clearInterval(id);
}
}
else {
if (submenu.style.height != "0px") {
submenu.style.height = parseInt(submenu.style.height) - 2 + "px";
}
else {
animating = false;
clearInterval(id);
}
}
}
function incDec(event) {
event = event || window.event
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
if (animating) return;
else {
animating = true;
var array = /#(.+)/.exec(this.href);
var pointer = array[1];
submenu = document.getElementById(pointer);
if (submenu.style.height == "0px") {
str = "+";
id = setInterval(incDecInner,50);
}
else {
str = "-";
id = setInterval(incDecInner, 50);
}
}
}
}
</script>
</head>
<body>
<div id="wrap">
<ul id="menu">
<li><a href="#first">1</a></li>
<li><a href="#second">2</a></li>
<li><a href="#third">3</a></li>
<li><a href="#fourth">4</a></li>
</ul>
<ul id ="submenu">
<li id="first"><a href="#">1</a></li>
<li id="second"><a href="#">2</a></li>
<li id="third"><a href="#">3</a></li>
<li id="fourth"><a href="#">4</a></li>
</ul>
<div id='tab'></div>
<div id="content"></div>
</div>
</body>
</html>