Menu Jquery "Magic Line" Wordpress qui ne fonctionne pas

Bonjours à tous
Je travaille sur un nouveau thème wordpress. J'essaye d'installer un nouveau menu mais il ne fonctionne pas très bien. Il s'affiche à l'écran mais quand je clique sur une catégorie, il n'y a rien qui se passe. J'ai bien placé tous les codes dans mon fichier header :
HTML :

<div class="nav-wrap">
 <ul class="group" id="example-one">
    <li class="current_page_item"><a href="#">Home</a></li>
    <li><a href="#">Buy Tickets</a></li>
    <li><a href="#">Group Sales</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">The Show</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
 </ul>
</div>

Css :

.nav-wrap { margin: 50px auto;  background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; }
#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; text-transform: uppercase; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }

Javascript :

$(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")
        });
    });
});

Merci d'avance pour votre compréhension et votre soutien

Salut,

Apparemment, tu n'as pas identifié tes éléments HTML comme demandé par le plugin JS que tu utilises…

Mais dans ton cas, il serait préférable d'avoir accès a une page en ligne pour constater le problème en direct, et vérifier s'il n'y a pas de conflits de scripts, si les bibliothèques et extensions javascript nécéssaires sont bien appelées, etc. (sans compter ce qui peut être généré côté serveur par WP).
Modifié par audrasjb (28 Oct 2011 - 10:13)

Merci pour ta réponse . Je n'utilise pas de plugin. j'ai juste mis les codes dans le fichier PHP.

Je suis parvenu à obtenir le menu que je voulez en modifiant le code :

<nav id="access" role="navigation">
			<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>	
				<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="nav-wrap">
				 <ul class="group" id="example-one"> 
				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
				 </ul>
			 </div>
			</nav><!-- #access -->

Par contre, j'ai encore un souci. Une petite barre noire s'affiche au dessus du menu. Je ne parviens pas à la faire partir..... Merci....