Annonce

Faites la différence entre le service WordPress.com et l'application libre WordPress.

Mettez-vous à jour ! WordPress 3.3.2 est disponible en français.

Annonce 1 : Le Codex en français a besoin de vous pour avancer !
Annonce 2 : Avant de poster, n'oubliez pas de faire une petite recherche et de lire les règles de ce forum.
Annonce 3 : Lisez notre blog, il regorge de bonnes informations.
Annonce 4 : Rejoignez-nous sur Facebook, Google + et sur Twitter

Pages: 1

 

#1 31-01-2012 00:43:01

Fred
Connaisseur WP
Date d'inscription: 29-03-2010
Messages: 36

Code sous-menus horizontaux

Bonjour,

Ma configuration WP actuelle sp3
- Version de WordPress : 3.1
- Version de PHP/MySQL : 5
- Thème utilisé : perso
- Extensions en place :
- Nom de l'hebergeur : free
- Adresse du site :

Problème(s) rencontré(s) :

Je cherche à remplacer les sous-menus verticaux par des sous-menus horizontaux. Je suis donc aller chercher le code ci-dessous et ai essayé de remplacer "display : block" (dans begin MenuItem et Subitem) par "display : inline " et cela n'a pas du tout marché sad

J'en conclus donc qu'il me manque des lignes de code ?

Help, siouplé...


Code: html

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
	text-align:left;
	text-decoration:none;
	outline:none;
	letter-spacing:normal;
	word-spacing:normal;
}

.art-menu, .art-menu ul
{
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}

.art-menu li
{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	position: relative;
	z-index: 5;
	background:none;
}

.art-menu li:hover
{
	z-index: 10000;
	white-space: normal;
}

.art-menu li li
{
	float: none;
}

.art-menu ul
{
	visibility: hidden;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	background:none;
}

.art-menu li:hover>ul
{
	visibility: visible;
	top: 100%;
}

.art-menu li li:hover>ul
{
	top: 0;
	left: 100%;
}

.art-menu:after, .art-menu ul:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.art-menu, .art-menu ul
{
	min-height: 0;
}

.art-menu ul
{
	background-image: url(images/spacer.gif);
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}





/* menu structure */

.art-menu
{
	padding: 0px 0px 0px 0px;
}

.art-nav
{
	position: relative;
	height: 30px;
	z-index: 100;
}

.art-nav .l, .art-nav .r
{
	position: absolute;
	z-index: -1;
	top: 0;
	height: 30px;
	background-image: url('images/nav.png');
}

.art-nav .l
{
	left: 0;
	right:0px;
}

.art-nav .r
{
	right: 0;
	width: 1016px;
	clip: rect(auto, auto, auto, 1016px);
}


/* end Menu */

/* begin MenuItem */
.art-menu ul li
{
	clear: both;
}

.art-menu a
{
	position:relative;
	display: block;
	overflow:hidden;
	height: 30px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 0px;
	margin-left: 0px;
}


.art-menu a .r, .art-menu a .l
{
	position:absolute;
	display: block;
	top:0;
	z-index:-1;
	height: 90px;
	background-image: url('images/MenuItem.png');
}

.art-menu a .l
{
	left:0;
	right:0px;
}

.art-menu a .r
{
	width:400px;
	right:0;
	clip: rect(auto, auto, auto, 400px);
}

.art-menu a .t 
{
font-family:"Goudy Old Style",Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
	color: #ECF3F9;
	padding: 0 12px;
	margin: 0 0px;
	line-height: 30px;
	text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
	top:-30px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
	top:-30px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
	top:-30px;
}
.art-menu a:hover .t
{
	color: #131571;
}

.art-menu li:hover a .t
{
	color: #131571;
}

.art-menu li:hover>a .t
{
	color: #131571;
}


.art-menu a.active .l, .art-menu a.active .r
{
	top: -60px;
}

.art-menu a.active .t
{
	color: #CDE0EE;
}


/* end MenuItem */

/* begin MenuSeparator */
.art-nav .art-menu-separator
{
	display: block;
	width: 2px;
	height: 30px;
	background-image: url('images/MenuSeparator.png');
}

/* end MenuSeparator */

/* begin MenuSubItem */
.art-menu ul a
{
	display:block;
	text-align: center;
	white-space: nowrap;
	height: 20px;
	width: 180px;
	overflow:hidden;
	line-height: 20px;
	margin-right: auto;


	background-image: url('images/subitem-bg.png');
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 1px;
	border-style: solid;
	border-color: #D7E3EA;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	display: inline;
	float: none;
	margin: inherit;
	padding: inherit;
	background-image: none;
	text-align: inherit;
	text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	text-align: left;
	text-indent: 12px;
	text-decoration: none;
	line-height: 20px;
	color: #0F1057;
font-family:"Goudy Old Style",Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
}

.art-menu ul ul a
{
	margin-left: auto;
}

.art-menu ul li a:hover
{
	color: #131571;
	border-color: #95B3C6;
	background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
	color: #131571;
	border-color: #95B3C6;
	background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
	color: #131571;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
	color: #131571;
}


/* end MenuSubItem */

Hors ligne

 

#2 31-01-2012 04:59:37

Lumière de Lune
Admin nomade
Lieu: Maroc / France
Date d'inscription: 15-08-2007
Messages: 11993
Site web

Re: Code sous-menus horizontaux

Bonsoir

1. c'est mieux avec "code" non ? (le C noir)
2. le thème "perso" ne serait il pas fait avec Artisteer ?
3. un css tout seul sans le site qui va avec, c'est assez indigeste

WordPress pour les nuls, Article, page, catégorie, Un site en plusieurs langues et Débuguer son blog. Après on peut partir au Maroc

Hors ligne

 

#3 31-01-2012 15:34:53

Fred
Connaisseur WP
Date d'inscription: 29-03-2010
Messages: 36

Re: Code sous-menus horizontaux

le thème perso est un mélange de plusieurs thèmes trouvés sur le net.
le site n'étant pas en ligne, difficile de faire autrement sad

Hors ligne

 

#4 07-02-2012 01:51:52

Fred
Connaisseur WP
Date d'inscription: 29-03-2010
Messages: 36

Re: Code sous-menus horizontaux

J'avance à petits pas... J'ai crée une nouvelle feuille de style appelée "style-menu"  (cf. code qui devrait bien apparaître, cette fois ("C" noir)) que j'ai appelée dans le "header". J'obtiens ma barre de sous-menu horizontalement. Par contre, ma barre de sous sous-menu apparaît elle aussi horizontalement mais par-dessus la barre de sous-menu. Quelle ligne dois-je rajouter pour qu'elle apparaisse sur la ligne du 3ème étage (niveau), svp ?

Code: html

/* menu structure */
.art-nav .art-menu1 ul
{
  width: 1000px;
  background-image: url('images/subitem.png');
  background-position: left top;
  background-repeat: repeat-x;
  border: none;
  line-height: 30px;
  margin: 0;
  padding: 0;          
}

.art-menu1 ul li
{ 
  display: inline;
  float: left; 
  clear: none;
  border: none;     
}
/* menu structure */

/* make submenu visible when active */
.art-menu1 ul .active, .art-menu1 .active ul
{
  visibility: visible;  
  top: 100%;     
}
.art-menu1 ul li .active, .art-menu1 .active ul li
{ 
  top: 0; 
}
/* make submenu visible when active */

/* begin MenuSubItem */
.art-menu1 ul a
{
  height: 30px; 
  width: auto; 
  line-height: 30px;
}
.art-menu1 ul a, .art-menu1 ul a:link, .art-menu1 ul a:visited, .art-menu1 ul a:hover, .art-menu1 ul a:active, .art-nav1 ul.art-menu1 ul span, .art-nav1

ul.art-menu1 ul span span
{
  line-height: 30px;
  text-indent: 0;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px; 
}
.art-menu1 ul li .active

/* end MenuSubItem */

Hors ligne

 

#5 12-02-2012 22:59:00

Fred
Connaisseur WP
Date d'inscription: 29-03-2010
Messages: 36

Re: Code sous-menus horizontaux

voici la suite : dans la feuille de style, il faut remplacer

Code: html

.art-menu li li:hover>ul
{
	top: 0%;
	left: 100%;
}

par

Code: html

.art-menu li li:hover>ul
{
	top: 100%;
}

Mais maintenant, j'ai un autre souci.  Je voudrais faire apparaître le menu enfant de manière centrée par rapport au menu parent. Actuellement, chaque menu enfant s'affiche à partir de la liste du menu parent.

Ex :

Menu 1   Menu 2
             Sous-menu 1 Sous-menu 2

or, je voudrais ceci :

Menu 1   Menu 2
Sous-menu 1 Sous-menu 2

Merci de l'aide que vous voudrez bien m'apporter.

Dernière modification par Fred (12-02-2012 23:00:06)

Hors ligne

 

 

Pages: 1

Pied de page des forums

Propulsé par PunBB 1.2.23
© Copyright 2005-2006 WordPress France

[ Generated in 7.378 seconds, 12 queries executed ]