Vous n'êtes pas identifié.
#3 25-09-2010 13:41:59
- SaiTek
- Membre
- Date d'inscription: 01-09-2010
- Messages: 397
Re: [Résolu] Aide menu déroulant sur le kit n°39
Bonjour,
Regarde la pour les menus déroulants horizontaux
http://www.siteduzero.com/tutoriel-3-37 … n-css.html
et les pour les verticaux
http://www.grafikart.fr/tutoriels/menu-deroulant-css-32
Un jolie cours pour apprendre a créer des menus déroulants !
Bonne journée
Dernière modification par SaiTek (25-09-2010 13:43:49)
[IMG]http://img4.hostingpics.net/pics/742303networkplus.jpg[/IMG]
Hors ligne
#4 25-09-2010 13:43:42
Re: [Résolu] Aide menu déroulant sur le kit n°39
oui j'ai vu sauf que le prb c'est que ca me fait pas du tout des menus déroulants mais une liste de menus... j'ai choisit en HTML:
<ul id="menu">
<li>
<a href="#">accueil</a>
</li>
<li>
<a href="#">membres</a>
<ul>
<li><a href="#">connexion</a></li>
<li><a href="#">inscription</a></li>
</ul>
</li>
<li>
<a href="#">images</a>
<ul>
<li>
<a href="#">photos</a>
<ul>
<li><a href="#">catégorie 1</a></li>
<li><a href="#">catégorie 2</a></li>
</ul>
</li>
<li>
<a href="#">vidéos</a>
</li>
</ul>
</li>
<li>
<a href="#">téléchargements</a>
<ul>
<li><a href="#">vidéos</a></li>
<li><a href="#">musiques</a></li>
</ul>
</li>
<li>
<a href="#">plus</a>
<ul>
<li><a href="#">forum</a></li>
<li><a href="#">liens</a></li>
<li><a href="#">nous contacter</a></li>
<li><a href="#">team</a></li>
<li><a href="#">recherche</a></li>
</ul>
</li>
</ul>
et ca me fait pas un menu déroulant ....
:) L'Equipe Djeun'z Radio :)
Hors ligne
#5 25-09-2010 13:44:33
- SaiTek
- Membre
- Date d'inscription: 01-09-2010
- Messages: 397
Re: [Résolu] Aide menu déroulant sur le kit n°39
Normal, il faut réglé ensuite dans le style.css
[IMG]http://img4.hostingpics.net/pics/742303networkplus.jpg[/IMG]
Hors ligne
#6 25-09-2010 13:45:33
Re: [Résolu] Aide menu déroulant sur le kit n°39
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
celui la ?
:) L'Equipe Djeun'z Radio :)
Hors ligne
#7 25-09-2010 13:47:28
- SaiTek
- Membre
- Date d'inscription: 01-09-2010
- Messages: 397
Re: [Résolu] Aide menu déroulant sur le kit n°39
Tien :
http://www.tuto-fr.com/tutoriaux/tutori … nt-css.php
Tu à juste a suivre se tutoriels qui et trés bien expliquer
[IMG]http://img4.hostingpics.net/pics/742303networkplus.jpg[/IMG]
Hors ligne
#9 25-09-2010 14:27:43
- SaiTek
- Membre
- Date d'inscription: 01-09-2010
- Messages: 397
Re: [Résolu] Aide menu déroulant sur le kit n°39
Re,
Bon je vai t'expliquer
Donc on commence par ouvrir notre page html ...
Ensuite nous allons mettre ce code :
<link href="css4.css" rel="stylesheet" type="text/css" />
<div id="menu" style="margin-left:150px;">
<ul class="niveau1">
<li><a href="mise_en_page_4.php">menu 1</a></li>
<li class="sousmenu"><a href="mise_en_page_4.php">menu 2</a>
<ul class="niveau2">
<li><a href="mise_en_page_4.php">Sous menu 2.1</a></li>
<li><a href="mise_en_page_4.php"">Sous menu 2.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">menu 3</a></li>
<li class="sousmenu"><a href="mise_en_page_4.php">menu 4</a>
<ul class="niveau2">
<li class="sousmenu"><a href="mise_en_page_4.php">Sous menu 4.1</a>
<ul class="niveau3">
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.2</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php"">Sous menu 4.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">menu 5</a></li>
</ul>
</div>
<div><script language="javascript">
aff_num='1167622';
cle='CSS;';
kcatid='100801';
kpowered='image';
kad_w='468';
kad_h='90';
kad_font='Arial';
kad_font_size='11';
kad_img_border_color='000000';
kad_table_border_color='FFFFFF';
kad_table_background_color='FFFFFF';
kad_price_color='FE5109';
kad_titre='000000';
kxsl='klf_3hsipro';
</script>
<script language="javascript" src="http://export.kelkoo.fr/content/fr/partners/xslt/kklf.js"></script></div>
N'oublie pas de mettre ce code dans ta page html
Ensuite nous allons créer un fichier nommée
css4.css
Donc créer le fichier et tu insère ce code :
body {behavior: url(csshover.htc);}
div#menu {width: 100px;}
/* fond blanc pour le menu */
div#menu a {color:#000000}
div#menu ul {padding: 0; width: 100px; border:1px solid; margin:0px; background: white}
/* fond different au survol de la souris pour les sous menu et les "basiques"*/
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}
/* Rajout d'une petite fleche pour les sous menu */
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat;}
div#menu ul li {position:relative; list-style: none; border-bottom:1px solid;}
div#menu ul ul {position: absolute; top: -1px; left: 100px; display:none}
/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */
div#menu li a {text-decoration: none; padding: 4px 0 4px 8px; display:block; border-left: 8px solid #BBB; width:84px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
/* la bordure de chaque hauteur a une couleure de survol*/
div#menu li a:hover {border-left-color: red;}
div#menu ul ul li a:hover {border-left-color: #00FF00;}
div#menu ul ul ul li a:hover {border-left-color: #0000FF;}
Est voila tout fonctionne a merveille
Bonne journée
[IMG]http://img4.hostingpics.net/pics/742303networkplus.jpg[/IMG]
Hors ligne
#10 25-09-2010 14:33:00
Re: [Résolu] Aide menu déroulant sur le kit n°39
mais le prb c'est que déja jme suis plantée c'est pas horizontal mais vertical et de 2 voila ce que j'ai fait jusqu'a présent :
<ul id="menu">
<li>
<a href="#">accueil</a>
</li>
<li>
<a href="#">Actus</a>
</li>
<li>
<a href="#">Antenne</a>
<ul>
<li><a href="#">Equipe</a></li>
<li><a href="#">Programmation</a></li>
<li><a href="#">Playlist</a></li>
</ul>
</li>
<li>
<a href="#">Communeauté</a>
<ul>
<li><a href="#">Photos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">T'chat</a></li>
<li><a href="#">Dédicasses</a></li>
<li><a href="#">Facebook</a></li>
<li>
<a href="#">Partenaires</a>
</li>
<li><a href="#">Partenaires</a></li>
<li><a href="#">Devenir Partenaire</a></li>
<li>
<a href="#">Contact</a>
</li>
<li><a href="#">Recrutement</a></li>
<li><a href="#">Nous contacter</a></li>
<li>
<a href="#">Sondage</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
Attention ce sont les sous menus qui sont verticaux comme dans ce kit la
http://www.kitgraphiquegratuit.org/aper … 61a/rouge/
:) L'Equipe Djeun'z Radio :)
Hors ligne