Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
[jQuery]- aktywne menu - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [jQuery]- aktywne menu (/thread-jquery-aktywne-menu)



[jQuery]- aktywne menu - Haden - 15-10-2011

Witam. W jaki sposób przerobić to menu aby było aktywne ? Menu robione na podstawie tutka.

Kod:
<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>


Kod:
ul#topnav {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font-size: 1.1em;
}
ul#topnav li{
    margin: 0;
    padding: 0;
    overflow: hidden;  
    float: left;
    height:40px;
}
ul#topnav a, ul#topnav span {
    padding: 10px 20px;
    float: left;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    clear: both;
    width: 100%;
    height: 20px;
    line-height: 20px;
}
ul#topnav a{
    color: #555;
    background-position: left bottom;
}

Kod:
$(document).ready(function() {

    $("#topnav li").prepend("<span></span>");

    $("#topnav li").each(function() {
        var linkText = $(this).find("a").html();
        $(this).find("span").show().html(linkText);
    });

    $("#topnav li").hover(function() {    
        $(this).find("span").stop().animate({
            marginTop: "-40"
        }, 250);
    } , function() {
        $(this).find("span").stop().animate({
            marginTop: "0"  
        }, 250);
    });

});



RE: [jQuery]- aktywne menu - Kartofelek - 16-10-2011

ul#topnav li.active {..................}
ul#topnav li.active span {.................}

Klasę aktywną nadajesz za pomocą PHP.