[Résolu] Menu CSS Vertical

Question

19 Jun 2013 à 17:13

Bonjour à tous,

J'ai un menu simple en CSS s'affichant sur mon site avec JavaScript.

Le menu est à la vertical, mais j'aimerais que l'affichage se fasse non pas à la droite de celui-ci, mais au dessous du menu choisi. Est-ce possible de faire ce que je demande ?

Voici les codes nécessaires afin de voir la façon dont je procède.
Je tiens à noter que c'est quelque chose que j'ai trouvé sur le WEB.

Le CSS

@charset "utf-8";
/* CSS Document */

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font:10pt Arial;
width: 200px; /* Main Menu Item widths */
border-bottom: 1px solid #FFF;
text-align:left;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 3px;
border-bottom: 1px solid #FFF;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #000; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: #333;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 190px; /*Sub Menu Items width */
top: 0px;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(http://www.productionsfx.com/admin/img/right.gif) no-repeat 97% 50%;
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

Et mon menu

<div class="sidebarmenu">
  <ul id="sidebarmenu1">
     <li><a href="index.php">Qui sommes-nous ?</a></li>
     <li><a href="#">Notre équipe</a>
		<ul>
        	<li><a href="#">Nos producteurs</a></li>
        	<li><a href="#">Nos directeurs</a></li>
        	<li><a href="#">Nos recherchistes</a></li>
        </ul>
     </li>
     <li><a href="equipements.php">Nos équipements</a></li>
     <li><a href="forfaits.php">Forfaits</a></li>
     <li><a href="contact.php">Nous joindre</a></li>
     <li><a href="#">Espace Membres</a></li>
   </ul>
</div>

Probablement que pour ceux d'entre vous qui utilisez ce genre de code, c'est tout simple, mais pas en ce qui me concerne.

Je vous remercie d'avance
Sylvain
Modifié par ConceptInterWEB (21 Jun 2013 - 20:06)

6l20

19 Jun 2013 à 18:47

Bonsoir Sylvain ici Sylvain Smiley lol

Il manque visiblement la partie JavaScript dans vos codes Smiley cligne

Le mieux serait que vous nous donniez l'adresse de votre site (ou d'une page reproduisant la configuration), c'est souvent plus facile pour faire des tests, en plus de nous donner accès aux images, à certaines problématiques, cela évite également de devoir recopier le code, trouver ou imaginer les codes manquants, savoir avec quelles librairie vous travaillez, etc... Smiley cligne

ConceptInterWEB

19 Jun 2013 à 18:57

Voici le JavaScript tel que demandé

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

Vous pouvez voir le rendu sur www.productionsfx.com/fr/

Merci
Sylvain[/i][/i]

6l20

19 Jun 2013 à 19:25

En fait vous cherchez un menu "accordéon" tel que celui-ci, non ?
(menu + accordeon dans votre moteur de recherche préféré vous enverra vers quelques centaines de modèles)

ConceptInterWEB

19 Jun 2013 à 19:44

Bonjour Sylvain

Merci pour l'information, je ne savais pas quel mot clé utiliser dans mes recherches sur le WEB. En sachant comment le tout se nomme, en effet, je vais être en mesure de trouver ce que je cherche.

Et le tutoriel du site est excellent aussi, il sera une très belle référence.

Merci
Sylvain

ConceptInterWEB

19 Jun 2013 à 20:16

Bonjour,

Votre tutoriel fonctionne nickel sauf que dans mon cas quand j'ouvre le seul sous-menu que j'ai les boutons du sous-menu ne disparaissent pas.

Après avoir vérifié le .CSS il faut également faire disparaitre le style de la liste en ajoutant cette ligne : list-style: none;

Donc le tout devient comme ceci :

.navigation .subMenu {
  font-size: .8em;
  background: #ccc url(../img/subMenu.png) 0 0 repeat-x;
  font-size: .9em;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #666;
  list-style: none;
}

Merci
Sylvain
Modifié par ConceptInterWEB (19 Jun 2013 - 20:34)

ConceptInterWEB

19 Jun 2013 à 20:36

Voilà en ce qui me concerne, ce sujet est considéré comme résolu.

Merci pour le tutoriel Sylvain Smiley cligne

ConceptInterWEB

21 Jun 2013 à 17:17

Je relance le sujet, car il y a quelque chose qui cloche avec le tutoriel sur le site.

J'ai ajouté une classe tel que suggéré afin de faire en sorte que le menu reste ouvert lorsque on clique sur un lien faisant partie du menu, et celui-ci se referme malgré tout.

Lorsque je fais affiché la source, on voit que la classe est au bon endroit et que seul ce lien dans le menu la possède.

Je demande votre aide afin de m'aider à résoudre le tout.

Voici du code pour vous aider

Le JavaScript tel que décrit dans le tutoriel

<script type="text/javascript">

$(document).ready( function () {
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
    $(".navigation ul.subMenu:not('.open_at_load')").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>

Le menu, j'ai fais de quoi de temporaire afin de lui attribuer la classe si c'est lui qui est ouvert, car je voulais vérifier le bon fonctionnement.

<ul class="navigation">
     <li><a href="index.php" title="Qui sommes-nous ?">Qui sommes-nous ?</a></li>
     <li class="toggleSubMenu"><span>Notre équipe</span>
		<ul class="subMenu">
        	<?php if ($_GET['id_page'] == 1) { ?>
        		<li class="open_at_load"><a href="page.php?id_page=1" title="Nos producteurs">Nos producteurs</a></li>
            <?php } else { ?>
        		<li><a href="page.php?id_page=1" title="Nos producteurs">Nos producteurs</a></li>
            <?php } ?>
        	<li><a href="#" title="Nos directeurs">Nos directeurs</a></li>
        	<li><a href="#" title="Nos recherchistes">Nos recherchistes</a></li>
        </ul>
     </li>
     <li><a href="equipements.php" title="Nos équipements">Nos équipements</a></li>
     <li><a href="forfaits.php" title="Forfaits">Forfaits</a></li>
     <li><a href="contact.php" title="Nous joindre">Nous joindre</a></li>
     <li><a href="#" title="Espace Membres">Espace Membres</a></li>
</ul>

Et si j'affiche la source du code, on voit que la page Nos producteurs recoit la classe open_at_load

<ul class="navigation">
     <li><a href="index.php" title="Qui sommes-nous ?">Qui sommes-nous ?</a></li>
     <li class="toggleSubMenu"><span>Notre équipe</span>
		<ul class="subMenu">
        	        		<li class="open_at_load"><a href="page.php?id_page=1" title="Nos producteurs">Nos producteurs</a></li>
                    	<li><a href="#" title="Nos directeurs">Nos directeurs</a></li>
        	<li><a href="#" title="Nos recherchistes">Nos recherchistes</a></li>
        </ul>
     </li>
     <li><a href="equipements.php" title="Nos équipements">Nos équipements</a></li>
     <li><a href="forfaits.php" title="Forfaits">Forfaits</a></li>
     <li><a href="contact.php" title="Nous joindre">Nous joindre</a></li>
     <li><a href="#" title="Espace Membres">Espace Membres</a></li>
</ul>

Avez-vous une petite idée ?

Merci
Sylvain

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Menu CSS Vertical