30-05-2012, 14:09
Koledzy, po dodaniu js do rozwijanego menu mam taki problem, ze <li> wczytujac sie wyswietla sie mniejszej szerokosci niz zadana, a dopiero po chwili powieksza sie do wlasciwego wymiaru. Zobaczcie kod:
i css
Moge prosic o pomoc?
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<noscript>
<style type="text/css">
.level-1:hover .menu-level-2 {
display:block;
}
.level-2:hover .menu-level-3 {
display:block;
}
</style>
</noscript>
</head>
<body>
<div class="kontener">
<div class="menu">
<ul class="menu-level-1">
<li class="level-1"><a href="" title="" class="menu_poziom">Menu 1</a>
<ul class="menu-level-2">
<li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 1</a></li>
<li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 2</a></li>
</ul>
</li>
<li class="level-1"><a href="" title="" class="menu_poziom">Menu 2</a>
<ul class="menu-level-2">
<li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 1</a></li>
<li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 2</a></li>
</ul>
</li>
<li class="level-1"><a href="" title="" class="menu_poziom">Menu 3</a>
<ul class="menu-level-2">
<li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 1</a></li>
<li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 2</a></li>
</ul>
</li>
<li class="level-1"><a href="" title="" class="menu_poziom">Menu 4</a>
<ul class="menu-level-2">
<li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 1</a></li>
<li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 2</a></li>
</ul>
</li>
<li class="level-1"><a href="" title="" class="menu_poziom">Menu 5</a></li>
</ul>
</div>
<div class="lewa"><br/>
Lewa</div>
<div class="prawa"><br/>
Prawa</div>
<div class="stopka"><br/>
Stopka</div>
</div>
<script type="text/javascript">
$(function(){
function showIt(liClass){
$(liClass).hover(
function() {
$('ul',this).first().slideDown()
},
function() {
$('ul',this).first().slideUp()
}
)
}
showIt('.level-1')
showIt('.level-2')
})
</script>
</body>
</html>i css
Kod:
body {
margin: 0 auto;
background: #121212;
font-family: Arial, Helvetica;
font-size: 14px;
color: #FFFFFF;
}
.kontener {
width: 980px;
margin: 0 auto;
}
.menu {
width: 980px;
margin: 0 auto;
}
.lewa {
width: 270px;
float: left;
}
.prawa {
width: 700px;
float: right;
}
.stopka {
width: 980px;
clear: both;
}
a.menu_poziom {
display: block;
padding: 7px;
margin: 0;
background: #666666;
color: #FFFFFF;
text-decoration: none;
width: 150px;
text-align: center;
border-bottom: 1px dotted #1F1F1F;
border-right: 1px dotted #1F1F1F;
border-left: 1px dotted #1F1F1F;
}
a.menu_poziom:hover {
background: #1F1F1F;
}
ul {
list-style: none;
margin: 0 auto;
padding: 0;
width: 850px;
}
.menu-level-1 {}
.level-1 {
position: relative;
float: left;
}
.menu-level-2 {
position: absolute;
width: 150px;
display: none;
background: url(../);
margin-top: 5px;
margin-left: -1px;
}
.level-2 {
position: relative;
top: -5px;
}
.menu-level-3 {
position: absolute;
left: 164px;
top: 0;
display: none;
}Moge prosic o pomoc?
