Ich möchte einer Liste eine Eigenschaft mitgeben, die nichts Anderes macht, als zu überprüfen, ob ein Listeneintrag Untermenüs hat, und wenn er welche hat, dann soll das Listenelement auf die Größe der Untermenüs erweitert werden.
Heißt die height-Eigenschaft soll die Größe der <ul> innerhalb des <li> - Tags übernehmen. Ich scheitere an JQuery...
Hier mein Kot:
Code: Alles auswählen
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
ul
{
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
li
{
height:30px;
}
ul li
{
position: relative;
}
li ul
{
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a
{
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
li:hover ul
{
display: block;
}
</style>
<script type="text/javascript">
$(function()
{
$("#menu li").hover(function()
{
var len = $(this).children(".test").$("li").size();
var ulHeight = 30*len;
alert(len);
//alert(ulHeight);
$(this).children(".submenu").stop().animate({"height": ulHeight}, "fast");
},function()
{
$(this).children(".submenu").stop().animate({"height": "30"}, "fast");
})
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li id="submenu"><a href="#">About</a>
<ul ="test">
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li id="submenu"><a href="#">Services</a>
<ul id="test">
<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 id="submenu"><a href="#">Contact Us</a>
<ul id="test">
<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>
</body>
</html>
Sukka
