Menu horizontal avec sous venu vertical a gauche - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Graphisme (https://forum.cmsmadesimple.fr/forum-9.html)
+--- Sujet : Menu horizontal avec sous venu vertical a gauche (/thread-91.html)

---

Menu horizontal avec sous venu vertical a gauche - romain24 - 13/01/2010

Bonjour a tous,

Voila tout est dans le titre, j'aimerai avoir dans mon site (http://romsdu24.freeheberg.com/) les menu horizontal avec mes sous menu a la vertical a gauche. Seulement voila j'ai repris un thème déjà existant et je ne trouve pas ce qu'il faut changer!

Merci beaucoup pour votre aide,

Je vous copie le code de ma feuille de style :

/********************
MENU
*********************/
#menu_vert {
padding-left: 0;
margin-left: 1em;
}


/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
padding-bottom: 0.5em;
}

/* menu li block */
#menu_vert li {
list-style: none;
margin: 0;
border-bottom: 1px solid #000;
display: block;
}

#menu_vert ul ul li {
border: none;
}

/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; }
* html #menu_vert li hr { height: 1%; }
/** end fix **/

/* first level links */
div#menu_vert a {
text-decoration:none; /* no underline for links */
display: block; /* IE has problems with this, fixed above */
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #9C0103; /* this will be link color for all levels */
background: url(uploads/nichess/arrow-right.gif) no-repeat 0.5em center;
min-height:1em; /* Fixes IE7 whitespace bug */
}

/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
font-size: 90%;
padding: 0.5em 0.5em 0.5em 2.8em;
background-position: 1.5em center;
}

/* third level links, more padding */
div#menu_vert ul ul ul a {
padding: 0.3em 0.5em 0.3em 4.3em;
background: url(uploads/nichess/dash.gif) no-repeat 2.8em center;
}

/* hover state for all links */
div#menu_vert a:hover {
background: url(uploads/nichess/02_bg.gif);
}
div#menu_vert a.activeparent:hover {
background: url(uploads/nichess/02_bg.gif);
color: #18507C;
}

/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
background: url(uploads/nichess/arrow-down.gif) no-repeat 0.4em center;
background-color: #9C0103;
color: #fff;
}

div#menu_vert ul ul li a.activeparent {
background-position: 1.5em center;
background-color: transparent;
color: #9C0103;
}


/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/
div#menu_vert ul h3 {
background: url(uploads/nichess/arrow-right-active.gif) no-repeat 0.4em center;
background-color: #9C0103;
display: block;
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #fff; /* this will be link color for all levels */
font-size: 1em; /* instead of the normal font size for <h3> */
margin: 0; /* as <h3> normally has some margin by default */
}

/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
font-size: 90%;
padding: 0.3em 0.5em 0.3em 2.8em;
background-position: 1.4em center;
background-color: transparent;
border-bottom: none;
color: #000;
}

/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
padding: 0.3em 0.5em 0.3em 4.3em;
background: url(uploads/nichess/arrow-right-active.gif) no-repeat 2.7em center;
}

/* section header */
div#menu_vert li.sectionheader {
border-right: none;
font-size: 130%;
font-weight: bold;
padding: 1.5em 0 0.8em 0;
background-color: #fff;
line-height: 1em;
margin: 0;
text-align:center;
}



/* separator */
div#menu_vert li.separator {
height: 1px !important;
margin-top: -1px;
margin-bottom: 0;
padding:2px 0 2px 0;
background-color: #000;
overflow:hidden !important;
line-height:1px !important;
font-size:1px; /* for ie */
}

div#menu_vert li.separator hr {
display: none; /* this is for accessibility */
}

---

Menu horizontal avec sous venu vertical a gauche - bess - 13/01/2010

ce n'est pas seulement ta feuille de style qu'il va falloir changer mais surtout le gabarit du menu.

comme dit il y a 10 minutes ici : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2323

par défaut cmsms te propose plusieurs type de mise en page de menu. Les as-tu visionné, quelle est celui qui s'en rapproche le plus ?

---

Menu horizontal avec sous venu vertical a gauche - romain24 - 13/01/2010

Oui bien sur j'ai regarder, mais disons que comme je veux quelque chose de bien specifique...disons que je mi connais encore pas assez je viens juste de débuter. Pour l'instant j'ai réussi a mettre mon menu horizontal juste en modifiant ma feuille de style, mais impossible a metre mes sous menus à la vertical, ils se mettent juste en dessous de mes menus a l'horizontal (je ne sais pas si je suis bien clair...)

---

Menu horizontal avec sous venu vertical a gauche - bess - 13/01/2010

en gros ca serait http://www.cmsmadesimple.fr/demo/index.php?page=top_left

---