Wordpress 3 menu de navigation qui decale le reste du site vers le bas

Bonjour à tous,

Je suis débutant sur wordpress 3 et je suis en train de créer mon thème.
Sur ce thème je veux greffer un menu de navigation à l'identique de celui ci
http://arup.com/

Ce menu va décaler le reste du site vers le bas.
Est ce que vous savez comme faire pour l'inclure ? j'ai utiliser la la fonction wp_nav_menu mais sans succès

Ce menu est créer en CSS et javascript -jquery
J'ai bien inclus les fichiers js et css mais le problème c'est que je ne suis pas sur qu'il faille utiliser wp_nav_menu...

A défaut peut être existe-il un plugin qui fait la même chose ?

milles merci

Salut,

C'est un effet tout simple que tu pourrais reproduire avec la fonction slideToggle() de jQuery. As-tu un site en ligne ? As-tu déjà réussi à afficher ton menu avec WP ? Sinon :

1) afficher le menu avec WP;
2) créer une fonction qui affiche le sous menu grâce à un slideToggle

Difficile d'en dire plus avec si peu d'élément

Salut et merci pour ta réponse

Dans la partie admin de WP, j'ai crée les pages de mon menu.
Dans le fichier function.php de mon thème, j'ai insérer ce code :

function add_wp3menu_support() {
register_nav_menus(
        array(
        'main-menu' => __('Main Navigation'),
        )
     );
 
}
//Add the above function to init hook.
add_action('init', 'add_wp3menu_support');
?>

Dans le header j'ai mis le code suivant :

<?php
     wp_nav_menu( array(
    'theme_location' => 'main-menu',
    'menu_class' => 'dropdown', 
    'menu_id' => 'conteneur_menu', 
    )
    );
?>

Dans le CSS j'ai mis le code suivant :

#conteneur_menu {
width:770px;
padding-top:15px;
margin:0 auto;
position:relative;
background: blue;
/*background: -moz-linear-gradient( top, #600, #300);  CSS 3 */
font: 1.0em "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
}
 
/* Top level Unordered list */
ul.dropdown {
list-style:none;
float:left;
width:100%;
padding: 0 10px;
}
 
ul.dropdown  li{
float:left; /* makes horiz list */
position:relative; /* hey Submenu ULs, appear below! */
}
 
ul.dropdown a {
padding:12px; /*space the items, occupy entire height too.*/
color:#eee;
text-decoration:none;
text-shadow:0 1px 0 #000;
}
 
/* Style the link hover */
ul.dropdown li:hover a {
background:#444;
border-top:1px solid #777;
border-bottom: 1px solid #000;
border-right:1px solid #666;
}
 
/* Displays the link as blocks. */
ul.dropdown li ul a {
display:block;
}
 
/* sub menus!!  */
 
ul.dropdown ul {
list-style: none;
margin:0; /* Appear just below the hovering list */
padding:0;
width:200px; /* specify the width. */
position:absolute; /* needed */
z-index:500; /* specify the order */
}
 
ul.dropdown li ul {
top:27px; /* Positioning:Calc with top level horz list height */
-moz-box-shadow:0 2px 10px #000; /* CSS 3 */
}
 
ul.dropdown ul ul {
top:0;
left:100%; /* Position the sub menus to right. */
}
 
ul.dropdown ul li {
float:none; /* umm.. Appear below the previous one. mmkay? */
}
 
/* Drop Down! */
 
/* Hide all the dropdowns (submenus) */
ul.dropdown ul,
ul.dropdown li:hover ul ul,
ul.dropdown ul li:hover ul ul
{ display: none; }
 
/* Display the submenus only when li are hovered */
ul.dropdown li:hover ul,
ul.dropdown ul li:hover ul ,
ul.dropdown ul li ul li:hover ul
{ display: block;}
 
ul.dropdown li * a:hover {
/* Change color of links when hovered */
background: #600;
background: -moz-linear-gradient( top, #200, #400); /* CSS 3 */
border-bottom:1px solid #900;
border-top:1px solid #222;
}

Le menu s'affiche bien avec les sous-rubrique mais je ne vois pas comment faire l'effet de slide qui decalera les bas de page vers le bas.
Pour utiliser la fonction slideToogle() de Jquery il faut inclure le fichier dans la balise script du fichier header ou alors faut il passer par le fichier function.php pour utiliser la librairie jquery de WP ?

Merci bien
Modifié par 6l20 (19 Jun 2013 - 15:53)

Bonjour zoumzoum69005,

Pense à utiliser les balises forum pour ton code.

Lorsque tu édite ton post, tu as juste ne dessous du champ de saisi de ton topic "Colorisation Syntaxique".

Il suffit de cliquer glissez l'ensemble de ton code css par exemple pour le sélectionner, et cliquer sur "CSS". Par ce bié, nous aurons une approche visuel de ton code beaucoup plus intuitive.

Pour ce qui est de ton menu, l'utilisation d'un plugin est rarement conseillé. Si tu peux faire tout ton code proprement à la maison tu comprendra beaucoup mieux comme fonctionne wordpress, et cela te simplifira la vie au fur et à mesure de ton apprentissage.

Je vais prendre le temps de regarder ton problème ce matin, et je reviens vers toi quand j'ai trouvé ce qu'il te faut.

Bon café

Bonjour,

Je ferai mieux la prochaine fois pour intégrer mon code proprement sur le forum
En fait mon objectif est de realiser un menu avec des sous catégorie gérées par l'admin WP (pages) et qu'au survol d'un lien de premier niveau le site ce décale vers le bas et laisse apparaitre les sous catégories correspondantes.
Comme si on avait un effet de "store coulissant"
Merci bien et bon courage !!

McMillan a écrit :
Bonjour zoumzoum69005,

Pour ce qui est de ton menu, l'utilisation d'un plugin est rarement conseillé. Si tu peux faire tout ton code proprement à la maison tu comprendra beaucoup mieux comme fonctionne wordpress, et cela te simplifira la vie au fur et à mesure de ton apprentissage.

Je vais prendre le temps de regarder ton problème ce matin, et je reviens vers toi quand j'ai trouvé ce qu'il te faut.

Bon café

Salut
J'avoue que ca à l'air compliqué d'intégrer ce genre de menu sous wordpress
Tu as pu trouver une piste ?

Merci bien !!!!