hej sorry ze mnie dlugo nie bylo ,
nudzilo mi sie teraz chwilke to zrobilem jakies proste menu ...
erm wygląda to prosto :
mówię o tym menu na górze , hmm co jest w nim nowego ?? ta pomarańczowa linia to jest tak jak by animacja przesuwa się w raz z myszką :) zamiast się nagle pojawiać .
<div class="nav-wrap">
<ul class="group" id="example-one">
<li class="current_page_item"><a href="/strona">Strona</a></li>
<li><a href="http://poszkole.pl/strona/komponenty">Komponenty</a></li>
<li><a href="http://poszkole.pl/przyjaciele">Przyjaciele</a></li>
<li><a href="http://poszkole.pl/klasy">Klasy</a></li>
<li><a href="http://poszkole.pl/grupy">Grupy</a></li>
<li><a href="http://poszkole.pl/galerie/">Zdjęcia</a></li>
<li><a href="http://poszkole.pl/wiadomosci">Privy</a></li>
<li><a href="http://poszkole.pl/profil">Alerty</a></li>
</ul>
</div>
<style>
.nav-wrap { margin: 50px auto;
position: fixed;
top: 0px;
left: 510px; }
#example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; }
#example-one li { display: inline; }
#example-one li a { color:
#bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background:
#fe4902; }
</style>
<script>
$(function() {
var $el, leftPos, newWidth,
$mainNav = $("#example-one");
$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#example-one li a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});
</script>
kolor lini
kolor tekstu
