besoin d'aide sur le menu déroulant (Page 1) / Le forum / Forum d'entraide: tuto-fr.com

Annonce

Visitez la boutique Wifi-highpower.com, votre revendeur agréé Alfa Network: du matériel Wifi sélectionné, cartes Wifi USB Awus036h et Awus036nh, antennes omnis, yagis, panel, amplis wifi, accessoires...

#1 14-04-2011 17:44:55

nonogemeaux
Membre
Inscription : 14-04-2011
Messages : 1

besoin d'aide sur le menu déroulant

Rebonjour,

j'ai utilisé votre menu déroulant suivant:

http://www.tuto-fr.com/tutoriaux/menu-d … page_5.php

Après deux jours de tâtonnements, je crois enfin avoir réussi à atteindre le résultat visuel correct
sous firefox et IE

pouvez-vous me dire si cela vous pourrez correct techniquement dans les codes

pour décaler, adapter ou centrer la liste des UL j'ai rajouté un div à l'intérieur du div menu, et
pour me simplifier les choses, j'ai superposé deux Div différents pour mon menu en deux colonnes
horizontales

<div id="menu2">
<div class="adaptermenu2">
<?php
include("menu2.php");
?>
</div>
</div>

<div id="menu">
<div class="adaptermenu">
<?php
include("menu.php");
?>
</div>
</div>


LES DEUX CSS POUR CHAQUE COLONNE HORIZONTALE DE MES DEUX DIV MENU SONT PRESQUE IDENTIQUE

CSS
div#menu{width:67%; margin: auto;/*margin-bottom: 40px*/background: #CCCCCC; height: 29px;}
div#menu a {color:#000000;font-weight: bold; font-size: 13px; font-family: Times New Roman, Arial, serif, Georgia; font-style: normal;}
div#menu ul {padding: 0; margin:0; background: white; text-align:center;}
div#menu li {background:#CCCCCC}
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}
/* rajout couleure de fond */
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat; background-color:#CCCCCC}
/* rajout pr pour flèche direction bas et couleur de fond*/
div#menu li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;}

/* une petite bordure en top*/
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid black}

div#menu ul ul {position: absolute; display:none; width:60px;}
div#menu li a {text-decoration: none; padding: 6px 0 6px; display:block;width:60px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 {top:-1px; left: 60px;}

/* rajout de couleures de fond et de survol */
div#menu ul.niveau3 li { background: #99CCCC}
div#menu ul.niveau3 li:hover { background: #99CC00}

/*LARGEUR DES SOUS-LISTES (2èmes case) DU MENU VERTICAL*/         
div#menu ul.niveau2 ul {left: 8em;} 
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {width:8em; display:block;}
div#menu ul.niveau2 li a {width: 8em;}

/*LARGEUR DES SOUS-LISTES (3ème case) DU MENU VERTICAL*/
div#menu ul.niveau3 ul {left: 24em;}   
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {width: 24em; display:block;}
div#menu ul.niveau3 li a {width: 24em;}
     
/*LARGEUR DES SOUS-LISTES (4ème case) DU MENU VERTICAL*/
div#menu ul.niveau4 ul {left: 24em;}   
div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {width: 14em; display:block;}
div#menu ul.niveau4 li a {width: 14em;}

div#menu ul.niveau2 a {width: inherit;} /* width inherit empêche le texte du lien de la sous-liste (2ème case) de
dépasser la largeur définit des UL, ça veut dire que si l'on veut ralonger le texte sans qu'il aille à la ligne,
il est nécessaire d'augmenter la largeur de l'UL*/
div#menu ul.niveau1 a {width: inherit; margin-right: 0.98em;}


.adaptermenu2
{margin-left: 7%}

.adaptermenu
{margin-left: 15%}

div#menu2{width:67%; margin: auto;/*margin-bottom: 1px*/background: #CCCCCC; height: 29px;}
div#menu2 a {color:#000000;font-weight: bold; font-size: 13px; font-family: Times New Roman, Arial, serif, Georgia; font-style: normal;}
div#menu2 ul {padding: 0; margin:0; background: white; text-align:center;}
div#menu2 li {background:#CCCCCC}
div#menu2 li:hover {background: #EDD}
div#menu2 li.sousmenu:hover {background: #EBB;}
/* rajout couleure de fond */
div#menu2 li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat; background-color:#CCCCCC}
/* rajout pr pour flèche direction bas et couleur de fond*/
div#menu2 li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;}

/* une petite bordure en top*/
div#menu2 ul li {position:relative; list-style: none; float:left;/*border-top:1px solid*/}

div#menu2 ul ul {position: absolute; display:none; width:60px;}
div#menu2 li a {text-decoration: none; padding: 6px 0 6px; display:block;width:60px; color: #26157E;}
div#menu2 ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu2 ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu2 ul.niveau3 {top:-1px; left: 60px;}

/* rajout de couleures de fond et de survol */
div#menu2 ul.niveau3 li { background: #99CCCC}
div#menu2 ul.niveau3 li:hover { background: #99CC00}

/*LARGEUR DES SOUS-LISTES (2èmes case) DU MENU VERTICAL*/         
div#menu2 ul.niveau2 ul {left: 8em;} 
div#menu2 ul.niveau1 li.sousmenu:hover ul.niveau2 {width:8em; display:block;}
div#menu2 ul.niveau2 li a {width: 8em;}

/*LARGEUR DES SOUS-LISTES (3ème case) DU MENU VERTICAL*/
div#menu2 ul.niveau3 ul {left: 24em;}   
div#menu2 ul.niveau2 li.sousmenu:hover ul.niveau3 {width: 24em; display:block;}
div#menu2 ul.niveau3 li a {width: 24em;}
     
/*LARGEUR DES SOUS-LISTES (4ème case) DU MENU VERTICAL*/
div#menu2 ul.niveau4 ul {left: 24em;}   
div#menu2 ul.niveau3 li.sousmenu:hover ul.niveau4 {width: 14em; display:block;}
div#menu2 ul.niveau4 li a {width: 14em;}

div#menu2 ul.niveau2 a {width: inherit;} /* width inherit empêche le texte du lien de la sous-liste (2ème case) de
dépasser la largeur définit des UL, ça veut dire que si l'on veut ralonger le texte sans qu'il aille à la ligne,
il est nécessaire d'augmenter la largeur de l'UL*/
div#menu2 ul.niveau1 a {width: inherit; margin-right: 0.98em;}

Dernière modification par nonogemeaux (15-04-2011 13:04:40)

Hors Ligne

Annonce

Visitez la boutique Wifi-highpower.com, votre revendeur agréé Alfa Network: du matériel Wifi sélectionné, cartes Wifi USB Awus036h et Awus036nh, antennes omnis, yagis, panel, amplis wifi, accessoires...

#2 14-01-2012 23:41:51

Ririna
Membre
Inscription : 14-01-2012
Messages : 1

Re : besoin d'aide sur le menu déroulant

Bonjour à tous,

et meilleurs vœux !

Je suis en train de faire un site internet, je suis au tout début... et novice...

Donc je m'essaie à quelques exercices, notamment à celui de savoir créer un menu déroulant horizontal

J'utilise Kompozer et j'ai suivi votre "tutorial menu déroulant en css".

Je commence à entrevoir quelques principes entre html et css.

Mon soucis est qu'à partir du moment où l'on doit utiliser le fichier csshover.htc je bug !

Je n'arrive pas à l'intégrer, à savoir où et comment le mettre dans le css (vu que j'utilise un logiciel "intuitif")

Sauriez-vous me donnée un coup de pouce ?

Ririna.

Hors Ligne

Annonce

Visitez la boutique Wifi-highpower.com, votre revendeur agréé Alfa Network: du matériel Wifi sélectionné, cartes Wifi USB Awus036h et Awus036nh, antennes omnis, yagis, panel, amplis wifi, accessoires...

Sujets similaires

Discussion Réponses Vues Dernier message
besoin d'aide par ange
1 1980 26-03-2013 17:11:54 par ange
1 1944 12-11-2012 02:41:30 par Azathoth
0 2567 12-03-2011 20:24:36 par lily41fr
0 4436 08-01-2011 05:59:59 par koni41
2 3105 11-06-2010 18:56:24 par metis15