Comment changer un menu de navigation.

spino · 12 Mars 2010

Bonjour à vous tous.

Voilà mon problème.

Je suis l'auteur des textes du site http://mecaniqueuniverselle.net et je voudrais changer la forme de son menu de navigation (la partie gauche ).
je voudrais installer à la place de ce menu déroulant, un menu tout simple dans lequel un simple clic renverrait aux différentes pages de dispatching qui existent actuellement, mais je ne sais absolument pas comment faire.... notre webmaster étant indisponible pour un long moment.

Je voudrais faire un menu dans ce genre http://www.centrepompidou.fr/ (à gauche) , tout simple

Quelqu'un pourrait-il me guider dans cette démarche, sachant que je suis relativement ignorant au point de vue technique ..

Je vous remercie par avance

Spinoziste

spino · 12 Mars 2010

Je pose le code source de l'endroit, si nécessaire ...

Code:

<!-- Fin tableau contenu du site-->

  <div id="footer" style="margin-top: 4px;">
    <p style="width: 210px; float: left; text-align: left;" class="tdbottom">
     <span style="color: #666">&nbsp;&nbsp;Visiteurs : 1 801 250</span>    </p>
    <p style="float: left; position: relative; width: 630px;" class="tdbottom">
      <a href="http://mecaniqueuniverselle.net">Accueil</a> - <a href="http://mecaniqueuniverselle.net/_reco/form_mail.php">Contact</a>
      <a href="#top"><img src="http://mecaniqueuniverselle.net/image/_base_meka/top.png" style="position: absolute; right: 12px;" alt="retour vers le haut de page" title="retour vers le haut de page" /></a>

    </p>
    <p style="width: 160px; float: left;" class="tdbottom">&nbsp;</p>
  </div>

  <div id="menu_nav">

    <dl>
      <dt class="head"><a href="">les introductions</a></dt>
      
      <dd class="active">

        <ul class="lienMenu">
          <li><a href="/index.php" class="nav fixedlink">accueil</a></li>
          <li><a href="/survol/introduction.php" class="nav">survol</a></li>
          <li><a href="/bio.php" class="nav">généalogie</a></li>
          <li><a href="/preface.php" class="nav">préface</a></li>
          <li><a href="/teleologie.php" class="nav">téléologie</a></li>

          <li><a href="/resume.php" class="nav">résumé</a></li>
          <li><a href="/avant-propos.php" class="nav">avant-propos</a></li>
          <li><a href="/sommaire.php" class="nav">sommaire</a></li>
        </ul>
      </dd>
      
      <dt class="head"><a href="">la philosophie</a></dt>
      
      <dd class="passive">

        <ul class="lienMenu">
          <li><a href="/animal-homme/darwinisme.php" class="nav">animal homme</a></li>
          <li><a href="/mal/introduction.php" class="nav">bien mal</a></li>
          <li><a href="/homme-humain/introduction.php" class="nav">homme humain</a></li>
          <li><a href="/bonheur/introduction.php" class="nav">bonheur</a></li>
          <li><a href="/amour-atome/introduction.php" class="nav">amour atome</a></li>

          <li><a href="/conscience/introduction.php" class="nav">conscience</a></li>
          <li><a href="/destinee-hasard/introduction.php" class="nav">hasard destinée</a></li>
          <li><a href="/langages/introduction.php" class="nav">langages</a></li>
          <li><a href="/mort/mourir.php" class="nav">la mort</a></li>
          <li><a href="/beatitude/philosophie.php" class="nav">extase</a></li>
        </ul>

      </dd>
      
      <dt class="head"><a href="">les philosophies</a></dt>
      
      <dd class="passive">
        <ul class="lienMenu">
          <li><a href="/themes.php" class="nav">des thèmes en vrac</a></li>
        </ul>
      </dd>
      
      <dt class="head"><a href="">la médiathèque</a></dt>

      
      <dd class="passive">
        <ul class="lienMenu">
          <li><a href="/mediatheque.php" class="nav">notre médiathèque</a></li>
        </ul>
      </dd>
      
      <dt class="head"><a href="">joindre rejoindre</a></dt>
      
      <dd class="passive">
        <ul class="lienMenu">

          <li><a href="/communaute.php" class="nav">notre communauté</a></li>
        </ul>
      </dd>
      
      <dt class="head"><a href="">la remise</a></dt>
      
      <dd class="passive">
        <ul class="lienMenu">
          <li><a href="/philosophies/introduction.php" class="nav">divers thèmes</a></li>

          <li><a href="/humanite/societe.php" class="nav">l'humanité</a></li>
          <li><a href="/medias/deontologie.php" class="nav">les médias</a></li>
          <li><a href="/philosophie/colonisation.php" class="nav">philosophies</a></li>
          <li><a href="/spiritualite/Bhagavad-Gita.php" class="nav">spiritualités</a></li>
          <li><a href="/video/attachement-detachement.php" class="nav">meca videos</a></li>
        </ul>

      </dd>
      
    </dl>
  </div>
  
  <div id="copyright"></div>
  
  <div id="communaute_media">
    <!--<a href="?imprimer_element" target="_blank"><img src="http://mecaniqueuniverselle.net/image/_base_meka/icone_printer.png" alt="lire le document en version imprimable" title="lire le document en version imprimable" /></a>-->
    <a href="/_reco/form_mail.php"><img src="http://mecaniqueuniverselle.net/image/_base_meka/icone_mail.png" alt="écrire à l'auteur du site" title="écrire à l'auteur du site" /></a>
    &nbsp;<a href="/rss.xml"><img src="http://mecaniqueuniverselle.net/image/_base_meka/icone_rss.png" /></a><br />
    Mise à jour le 12/03/2010 - Paris
  </div>

  
  <div id="recherche">
    <!--<img src="http://mecaniqueuniverselle.net/image/_base_meka/fleche_droite.gif" style="margin-bottom: -1px" />Recherche -->
    <form name="" id="cse-search-box" action="http://mecaniqueuniverselle.net/_google_search/recherche_meka.php">
      <input type="hidden" value="partner-pub-2829148964890875:6v5v6r-yoqk" name="cx" />
      <input type="hidden" value="FORID:11" name="cof" />
      <input type="hidden" value="UTF-8" name="ie" />
      <input type="text" name="q" id="" value="Rechercher" maxlength="50" class="texte" onfocus="this.value = ''" />
      <input type="image" src="http://mecaniqueuniverselle.net/image/_base_meka/bouton_ok.png" class="bouton" />
    </form>

  </div>
  
  <div id="language">
    choose your <img src="http://mecaniqueuniverselle.net/image/_base_meka/fleche_bas.gif" style="margin-bottom: -1px;" /><br />
    <select name="language" onchange="location.href=this.options[this.selectedIndex].value;">
      <option value="#">language</option>
      <option value="/?lang=en">english</option>
      <option value="/?lang=fr">français</option>

      <option value="/?lang=pt">português</option>
    </select>
  </div>

</div>

</body>
</html><script type="text/javascript" src="http://mecaniqueuniverselle.net/_scripts/js_files/jquery.innerfade.js"></script>

tyv · 12 Mars 2010

bonjour,

Si c'est l'aspect déroulant qui te gène, il suffit de désactiver cet effet pour déplier tous les menus.

Le plus simple étant donné ton message:
Le menu déroulant s'active sur les div qui ont l'attribut class="passive" ou class="active" sur ton site.
Pour désactiver cet effet, il faut remplacer chaque <dd class="passive"> et <dd class="active"> de ton menu par <dd>

Cela suffira pour désactiver cet effet et afficher l'ensemble du menu tout comme celui du site donné en exemple.

spino · 13 Mars 2010

Merci tyv, je vais déjà essayer de retrouver ces div sur mon site et faire cela dans un premier temps ...
Je verrai si ensuite je trouve l'astuce pour réduire les liens car je n'aurai plus besoin de tout les sous liens que les menus déroulent ..

spino · 13 Mars 2010

spino a dit:
Merci tyv, je vais déjà essayer de retrouver ces div sur mon site et faire cela dans un premier temps ...
Je verrai si ensuite je trouve l'astuce pour réduire les liens car je n'aurai plus besoin de tout les sous liens que les menus déroulent ..

Se pourrait il que ce soit cette ligne la partie de code a changer ?

while($data = mysql_fetch_array($result)) {
$ddClasse = $data['Id'] == $searchId[1] ? 'active' : 'passive';
echo '
<dt class="head"><a href="">' . utf8_encode(MyStripSlashes_2($data['title_rub'])) . '</a></dt>

<dd class="' . $ddClasse . '">
<ul class="lienMenu">';

et dois je écrire à la place
$dd';

la partie se situe dans un dossier intitulé menu_nav

tyv · 13 Mars 2010

il suffit de remplacer <dd class="' . $ddClasse . '"> par <dd> dans le code que tu indiques.

Avant de faire la modif, il faudrait mettre en commentaire l'ancien code de façon à pouvoir revenir en arrière.
Au final, il faut juste remplacer la ligne:
<dd class="' . $ddClasse . '">

par:


<dd>

spino · 13 Mars 2010

Merci Tyv ... j'ai suivi ton explication C'est déja 1000 fois mieux ...

ça me donne ça comme code

echo '
<dl>';

while($data = mysql_fetch_array($result)) {
$ddClasse = $data['Id'] == $searchId[1] ? 'active' : 'passive';
echo '
<dt class="head"><a href="">' . utf8_encode(MyStripSlashes_2($data['title_rub'])) . '</a></dt>


<dd>
<ul class="lienMenu">';

// Sélection des liens du menu classés par rubriques

ça te parait juste ?

Le resultat : http://mecaniqueuniverselle.net

tyv · 13 Mars 2010

Oui le code est ok. Aussi,vous pourrez revenir en arrière très facilement si vous le souhaitez.

spino · 14 Mars 2010

Merci mille fois je n'aurais jamais réussi tout seul...

il me semble que ce type de menu est beaucoup plus simple comme ça pour les visiteurs à présent ..

Au départ j'aurai voulu réduire à 6 les liens (introductions, philosophies, philosophies, médiathèque, joindre-rejoindre, la remise) qui renverraient à des pages de distributions ... pensez vous que ce serait plus pratique pour les visiteurs ?

tyv · 14 Mars 2010

Personnellement, je préfère les menus qui permettent de trouver une information directement sans passer par une page intermédiaire. Maintenant, je ne suis surement pas représentatif.
Pour avoir plus d'avis sur cette question, tu pourrais peut-être faire une demande d'avis dans la section "demande d'avis" .

spino · 15 Mars 2010

Merci pour ton aide précieuse .. Je pense que je vais suivre ton conseil et laisser comme ça ... j'irai tout de même poser la question sur l'espace que tu m'a conseillés, cela me permettra sans doute aussi de savoir ce qui ne va pas sur le site ..

J'ai d'autres choses techniques à réaliser, par exemple je voudrais placer un pied de page plus consistant, sur le modèle de beaubourg, et je voudrais aussi installer un joli popup avec une video dedans ... Je pense que j'aurai encore besoin de conseils, je les placerai à la suite ...

spino · 30 Mars 2010

Bonjour

J'ai à nouveau besoin de vous.

Est-il possible d'installer, en bas de chaque page de mon site (ou sur le coté) un système permettant aux visiteurs de laisser leur point de vu, leurs commentaires à propos de ce qu'il viennent de lire ?
Un peu comme sur les sites communautaires (genre lepost http://www.lepost.fr/article/2010/03/29/2009899_cougars-les-femmes-mur ... iment.html)

Et si oui comment faire ?
jm