Tuto menu déroulant intégré dans web acappela

Bonjour à tous et à toutes

On ma chargé de rendre le site de ma boite plus dynamique , ergonomique et jolie , pour ce fait on a mit à ma disposition le logiciel Webacappela ( dreamweaver ou autre logiciel du même style demandait trop de connaissances dans le code et mon niveau est plutot faibrile..) de plus le timing est plutot serré...)
J'essaye donc d’intégrer les différents modules qui s'offre à moi avec webacappela mais ceux si étant limité j'aimerai essayer d’intégrer du code html, css et java afin de l'améliorer, je me suis donc penché sur le tutoriel "menu accordéon" avec jQuery ;
Voici un apperçu de ce que j'arrive à obtenir en suivant le tuto : http://img11.hostingpics.net/pics/427355Capturede769cran20120503a768083700.png

J'essaye d'améliorer l'ergonomie comme expliqué sur la dernière page mais cela ne change rien pour moi je change le code java mais je ne vois comment lié le css comme cité ici "Il suffit maintenant de styler li.open et li.toggleSubMenu différemment grâce aux CSS."

Si une personne à du temps et de la patience à revendre alors j'ai besoin de son aide.

Merci beaucoup
Modifié par k-ligraf (03 May 2012 - 08:48)

voila mon code html :

<ul class="navigation">
  <li><a href="#" title="Aller à la page 1">Page 1</a></li>
  <li class="toggleSubMenu"><span>Page 2</span>
    <ul class="subMenu">
      <li><a href="#" title="Aller à la page 2.1">Page 2.1</a></li>
      <li><a href="#" title="Aller à la page 2.2">Page 2.2</a></li>
      <li><a href="#" title="Aller à la page 2.3">Page 2.3</a></li>
    </ul>
    </li>
    <li class="toggleSubMenu"><span>Item 3</span>
      <ul class="subMenu">
        <li><a href="#" title="Aller à la page 3.1">Page 3.1</a></li>
        <li><a href="#" title="Aller à la page 3.2">Page 3.2</a></li>
      </ul>
    </li>
    <li><a href="#" title="Aller à la page 4">Page 4</a></li>
</ul>

le java :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready( function () {
    // On cache les sous-menus :
    $(".navigation ul.subMenu").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"
    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".navigation li.toggleSubMenu span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;

    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".navigation li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") });
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });
} ) ;

</script>

pour finir le css :

  <style type="text/css" media="screen">
    .navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #000;
  color: #fff;
  width: 200px;
  font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
  display: block;
  padding: 4px 10px;
  color: #fff;
  text-decoration: none;
  background: #000 url(menu-item.png) left bottom no-repeat;
}
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
  background-image: url(menu-item-deroule.png);
}
.navigation .open a, .navigation .open span {
  background-image: url(menu-item-enroule.png);
}
.navigation a:hover, .navigation a:focus, .navigation a:active {
  text-decoration: underline;
}
.navigation .subMenu {
  font-size: .8em;
  background: #ccc url(subMenu.png) 0 0 repeat-x;
  font-size: .9em;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #666;
}
.navigation ul.subMenu a {
  background: none;
  padding: 3px 20px;
}
  </style>

Dans web accapela le java et le css sont réunit sur la même page.

Je ne comprends pas exactement ton problème.

Peux-tu expliquer plus clairement ce que tu cherches à faire?

j’avoue que je ne suis pas très clair, je m'en excuse , sur la dernière page "améliorer l'ergonomie" on peux afficher un signe sur les boutons qui nous renseignes sur les onglets s'ouvran ou se fermant, mon code javascript contient le dernier code inscrit dans le tuto pour y arriver mais comme vous pouvez le voir sur la capture cela n'apparait pas...
De plus je cherche à modifier l’appellation "page 1 2 etc... mais en remplaçant page 1 par le titre souhaité exemple : <li><a href="#" title="Aller à la page 1">Page 1</a></li>
<li><a href="#" title="Aller à la page 1">Sanitaire</a></li>

Pour finir j'aimerai que l’accordéon s'applique sur tous les items et non sur deux.

J'espère avoir réussi à être plus clair.

merci d'avance.

Romain
Modifié par k-ligraf (03 May 2012 - 11:07)

Si je comprends bien, ton problème est que tu n'arrives pas à mettre les flèches de "déroulage" et d'"enroulage" ?

Les as-tu récupérées sur le site de Jquery ?
Modifié par Naemesis (03 May 2012 - 11:17)

oui c'est mon 1er problème (j'ai prit le code "améliorer l'ergonomie") mais celui ci ne change rien , ensuite je n'arrive pas à modifier le nom des menus et pour finir j'aimerai que l'option déroulante se face sur mes 4 items et non sur deux.

Pour que ton coe fonctionne pour les quatre il faut que tu crées des sous-menu sous chaque partie :

<ul class="subMenu">

Pour le nom des menus, changer le code devrait suffire :

<li><a href="Lien vers la page" title="Du texte">Nom de ton sous-menu</a></li>

Pour les flèches, les as-tu récupérées quelque part ? Si tu ne les as pas, il est normal qu'elles n'apparaissent pas à l'écran.

j'ai reussi à ajouter l'accordéon sur tous mes liens, par contre pour les flèches tu es obligée de les recup, aucun code CSS/JAVA te permet d'avoir se rendu là?si non tu es obligé de faire les plusieurs phases de ton bouton avec illustrator ??

Pour les flèches, tu n'as pas le choix, il faut les récupérer (soit en local sur ton PC, soit sur le serveur mis a disposition, soit via URL complète sur un autre site (à éviter)).

Bien que l'on puisse faire énormément de chose via CSS et Java, je doute que tu puisses créer une image si précise.

Pour ce qui est de ta dernière question, je ne l'ai pas comprise . Peux-tu la reformuler ou expliquer ce que tu veux dire par là ?

il est possible de faire des boutons via illustrator et les uploader directement mais tu peux les creer en tapant du code aussi c'est là ou je voulais en venir.
JE suis desolé si je ne suis pas toujours assez clair , j'ai un tout petit niveau..

J'aimerai également mettre un arrondie sur les coins de mon menu de navigation, peux tu m'aider pour ce qu'il en est du code CSS ?? merci

je vais essayer les arrondis, merci beaucoup pour ta patience Naemesis

Pas de soucis, c'est important d'aider les gens qui en ont besoin quand ils en ont besoin .

Si jamais ce code ne fonctionnait pas, dis-le moi.

voilà mon code css :

  <style type="text/css" media="screen">
    .navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #000;
  color: #fff;
  width: 200px;
  font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
  display: block;
  padding: 4px 10px;
  color: #fff;
  text-decoration: none;
  background: #0000 url(menu-item.png) left bottom no-repeat;
}
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
  background-image: url(menu-item-deroule.png);
}
.navigation .open a, .navigation .open span {
  background-image: url(menu-item-enroule.png);
}
.navigation a:hover, .navigation a:focus, .navigation a:active {
  text-decoration: underline;
}
.navigation .subMenu {
  font-size: .8em;
  background: #ccc url(subMenu.png) 0 0 repeat-x;
  font-size: .9em;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #666;
}
.navigation ul.subMenu a {
  background: none;
  padding: 3px 20px;
}

  </style>

Ce n'est pas dans ".navigation .subMenu {" que je dois placer le code pour les arrondis ??

Sur quels éléments veux-tu faire des bords arrondis ?

Si c'est sur la totalité du menu, mon code devrait fonctionner ou alors, il faudrait rajouter :

ul.navigation {
    border-radius:5px;
}

C'est pour ça que je t'avais demandé de me dire si ça fonctionnait.

Si tu veux le faire sur chaque élément du menu (ça risque d'être moins agréable à regarder), la solution que tu proposes est certainement la bonne.