Weltenbastler
Hey Leute,
ich habe mir aus verschiedenen Scripten für jQ die hübschesten rausgepickt und irgendwie miteinander verwurschtelt. Bis auf einige kleine Unstimmigkeiten klappte bisher alles prima. Jetzt weiß ich allerdings nicht weiter. Meine Testseite ist diese hier: www.vermittelmich.de
Das Menü am oberen Rand kommt hereingeschwebt wie es soll. Wenn man dann mit der Maus drüber fährt, fahren die einzelnen Links allerdings nach rechts aus. Sie sollen aber nach unten ausfahren.
Der dazugehörige js Code sieht so aus:
Wenn ich paddingLeft in der unteren Spalte in paddingTop oder paddingBottom ändere, tut sich gar nichts mehr.
HTML sieht so aus:
Hat jemand eine Idee, wo der Fehler liegen könnte?
ich habe mir aus verschiedenen Scripten für jQ die hübschesten rausgepickt und irgendwie miteinander verwurschtelt. Bis auf einige kleine Unstimmigkeiten klappte bisher alles prima. Jetzt weiß ich allerdings nicht weiter. Meine Testseite ist diese hier: www.vermittelmich.de
Das Menü am oberen Rand kommt hereingeschwebt wie es soll. Wenn man dann mit der Maus drüber fährt, fahren die einzelnen Links allerdings nach rechts aus. Sie sollen aber nach unten ausfahren.
Der dazugehörige js Code sieht so aus:
Code:
$(document).ready(function()
{
slide("#menu", 25, 15, 150, .9);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";
// initiates the timer used for the sliding animation
var timer = 0;
// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-top","-120px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginTop: "0" }, timer);
$(this).animate({ marginTop: "15px" }, timer);
$(this).animate({ marginTop: "0" }, timer);
});
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 200);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 200);
});
});
}
HTML sieht so aus:
Code:
<ul id="menu">
<li value="1" class="sliding-element"><a href="#">Home</a></li>
<li class="sliding-element"><a href="#">Portfolio</a></li>
<li class="sliding-element"><a href="#">Contact</a></li>
<li class="sliding-element"><a href="#">Impressum</a></li>
</ul>
<div id="slide"><!-- --></div>
Hat jemand eine Idee, wo der Fehler liegen könnte?