Sujet Précédent Sujet Suivant

Menu deroulant overmouse avec cadre

Fermé
steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018 - 3 mai 2012 à 16:59
steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018 - 3 mai 2012 à 18:39
Bonjour a tous,

j ai suivi pleins de forum pour ce menu mais rien ne correspond...

j aimerai que quand je passe sur "projets" ca deroule vers le bas disont a,b,c

projet serai juste ecrit en blanc (pas de fond ni rien), et que a b et c soit avec un fond noir (cadre) exemple du resultat sur :http://www.opel.be/fr/Showroom/Default.aspx?campaignid=ppc08opel&advertiserid=googlebefr&bannerid=Opel&gclid=CLGckcyw5K8CFUdItAodL3yrLw

quand on passe sur nos modeles

merci beaucoup pour votre aide



A voir également:

3 réponses

Réponse 1 / 3
wAxxx Messages postés 421 Date d'inscription mardi 24 juin 2008 Statut Membre Dernière intervention 29 septembre 2015 46
3 mai 2012 à 17:19
Bonjour,

J'ai modifié un peu ce que tu veux j'espère que cela peut t'aider. Voilà le code html de menu 
<link type="text/css" href="css.css" rel="Stylesheet"/>
     <ul class="menu">
            <li><span class="topitm" id="tmnHome"><a id="S_S_C_C__29b8ee4_TL1" href="#" target="_self">Menu principal 1</a></span></li>

            <li><span class="topitm" id="tmnShow"><a id="S_S_C_C__29b8ee4_TL2" href="#" target="_self">Menu principal 2</a></span>
               <ul>
                  <li><a id="S_S_C_C__29b8ee4_ML0" href="#">Niveau 2</a></li>
                  <li><a id="S_S_C_C__29b8ee4_ML1" href="#">Niveau 2</a>

                     <ul>
                        <li><a id="S_S_C_C__29b8ee4_PCs_ctl00_ML" href="#">Niveau 3</a></li>
                        <li><a id="S_S_C_C__29b8ee4_PCs_ctl01_ML" href="/fr/Showroom/Corsa/Default.aspx">Niveau 3</a></li>
                     </ul>
                  </li>
                  <li><a id="S_S_C_C__29b8ee4_ML2" href="/fr/Showroom/CV.aspx">Menu principal 3</a>
                     <ul>
                        <li><a id="S_S_C_C__29b8ee4_CVs_ctl00_ML" href="/fr/Showroom/Corsa_Van/Default.aspx">nIVEAU 2</a>
                        </li>
                     </ul>
                  </li>
               </ul>
            </li>
            <li><span class="topitm" id="tmnFleet"><a id="S_S_C_C__29b8ee4_TF" href="/fr/Fleet/Default.aspx" target="_self">mENU PRINCIPAL 4</a></span>
                <ul>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink1" href="/fr/Fleet/Default.aspx">mENU 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink2" href="/fr/Fleet/WhoAreWe.aspx">mENU 2</a></li>



                    <li><a id="S_S_C_C__29b8ee4_HyperLink6" href="/fr/Fleet/News.aspx">mENU 2</a>

                  </li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink7" href="/fr/Fleet/Newsletter.aspx">mENU 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink3" href="#">mENU 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink4" href="#">mENU 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink11" href="#">mENU 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink12" href="#">mENU 2</a>

                        <ul>

                            <li><a id="S_S_C_C__29b8ee4_HyperLink13" href="#">mENU 2</a></li>

                            <li><a id="S_S_C_C__29b8ee4_HyperLink14" href="#">mENU 2</a></li>

                            <li><a id="S_S_C_C__29b8ee4_HyperLink15" href="#">Governmental sales</a></li>

                        </ul>

                    </li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink18" href="/fr/Fleet/DiplomaticSales.aspx">Niveau 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink5" href="/fr/Fleet/Contact.aspx">Niveau 2</a></li>

                </ul>

            </li>

                 </ul>


Et voilà le feuille de style (css.css) 
@charset "UTF-8";


/*
====================================================================================================
=== DROPDOWN MENU ==================================================================================
=== 
=== li.hover and li:hover
=== 
=== We have to use javascript to change class of li when they are hovered because
=== IE6 don't read the li:hover .
=== I have duplicated use of li:hover and li.hover for the few case where user have javascript
=== desactived. That way , menu continue working in other browser than ie6.
==
====================================================================================================
*/

/*
====================================================================================================
=== Support for the "iehover-fix.jsé ===============================================================
====================================================================================================
*/
/** Support for the "iehover-fix.js" **/
ul.menu{position:relative;}
ul.menu ul{background:#fff;}
ul.menu iframe {
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
   background: red;
}
/** end **/

/*
===============================================
=== MAIN MENU =================================
===============================================
*/
.menu {
   width: 860px;
   float:left;
   display:inline;
   margin: 0;
   z-index: 999;
   color:#000 !important;
}

.menu li {
   list-style: none;
   display: inline;
   position: relative;
   z-index: 100;
   margin: 0 30px 0 0;
   float: left;
   cursor: pointer;
}
.menu li span {
   height: 28px;
   float:left;
   display:inline;
}

.menu li a {
   height: 28px;
   display:block;
   padding: 0 0 0 0;
   color: #000;
   font-size: 17px;
   font-weight: bold;
   text-decoration: none;
   outline: none;
   float: left;
}

.menu li .topitm a
{
   font-weight: normal;
}

.menu li .topitm a.hover
{
    font-weight: bold;
}

.menu li .topitm a:hover
{
    color: #febe10; 
}


/*
===============================================
=== SUBMENU ===================================
===============================================
*/
.menu li ul {
   
   background-color: #fff;
   top: 28px;
   padding: 6px 0px 10px 0px;
   margin-left:-5px;
   left: 0;
   display:none;
   float:left;
   width: auto;
   color:#fff;
   background-color:#000;
}
.menu li:hover ul,
.menu li.hover ul {
   display:inline;
   position: absolute;
   background: #0b0c0d url(/images/layout/public/menu/submenu_backgroundV2.png) top repeat-x;
   width:auto;
}

.menu li ul li {
   padding: 6px 0px 0px 0px;
   float:none;
   margin:0;
   clear:both;
   position: static;
   
}

/*width is controlled from here */
.menu li:hover ul li a,
.menu li.hover ul li a {
 white-space: nowrap;
   height: 19px;
   height: auto !important;
   line-height: 25px;
   padding: 0 20px;
   color: #fff;
   font-size: 11px;
   font-weight: normal;
   float:none;
   width: auto;
}

/* cufon submenu fix */

.cufon .cufon-canvas
{
    height:auto !important;
}

/*
===============================================
=== SECOND SUBMENU ============================
===============================================
*/

.menu li:hover ul li:hover a,
.menu li.hover ul li.hover a {
   color: #fff;
   background-color: #878b8e;
}

.menu li:hover ul li ul,
.menu li.hover ul li ul {
   top:0px;
   margin-left:2px;
   left: 100%;
   display:none;
   width:auto;
}

.menu li:hover ul li:hover ul,
.menu li.hover ul li.hover ul {
   position: absolute;
   display:block;
}

.menu li:hover ul li:hover ul li a,
.menu li.hover ul li.hover ul li a {
   color: #fff;
   background: none;
   padding-right:70px;
}

.menu li:hover ul li:hover ul li:hover a,
.menu li.hover ul li.hover ul li.hover a {
   color: #fff;
   background-color: #888;
}

/*
===============================================
=== THIRD SUBMENU =============================
===============================================
*/
.menu li:hover ul li:hover ul li ul,
.menu li.hover ul li.hover ul li ul {
   width: 282px;
   padding: 2px 2px 0px 2px;
   font-weight: bold;
   font-size: 12px;
   display:none;
   position: static;
   z-index: 9999;
   background:#0b0c0d url(/images/layout/public/menu/submenu_box_background.png) top repeat-x;
   height:auto;
   margin-bottom:0px;
}

.menu li:hover ul li:hover ul li ul img, 
.menu li.hover ul li.hover ul li ul img 
{
}

.menu li:hover ul li:hover ul li:hover ul,
.menu li.hover ul li.hover ul li.hover ul{
	position: absolute;
}

.menu li:hover ul li:hover ul li ul li,
.menu li.hover ul li.hover ul li ul li {
   width: 282px;
   padding: 0;
   float:left;
   padding: 0;
   cursor: auto;
   top: 0px;
}
ul.card .info h3{
	font-size: 20px;
	color:#febe10;
   text-transform: uppercase;
}
ul.card .info p.teal
{
    color:#febe10;
}

ul.card .info{
   padding: 5px 10px 5px 10px;
   width: 262px;
   overflow: hidden;
   margin: 0;
   height:auto;
}
ul.card #links{
   border-top: 1px solid #545454;
   padding-bottom:5px;
}

.teal
{
    color:#fff;
}
.menu li:hover ul li:hover ul li ul.card li div#links a,
.menu li.hover ul li.hover ul li ul.card li div#links a {
   color: #fff;
   font-size: 11px;
   display: block;
   line-height: normal;
   background: none;
   margin:  5px 10px 5px 10px;
   padding: 7px 0 0 10px;
   background: url(/images/layout/public/menu/arrow_bullet.png) left bottom no-repeat;
   height:auto;
}

.menu li:hover ul li ul li ul.card li div#links a:hover{
	color: #ffa800;
}

ul.card .price-bar {
   padding:  8px 0;
   margin: 0 auto;
   font-size: 11px;
   width: 262px;
   overflow: hidden;
   font-weight: normal;
   border-top: 1px solid #545454;
}

ul.card .price-bar span {
   margin: 0;
   height: auto;
   display: inline;
   padding: 0 5px 0 10px;
}
ul.card .price-bar .info {}

ul.card .price-bar .price,
ul.card .price-bar .price { font-size: 11px;}

.menu li:hover ul li:hover ul li:hover ul,
.menu li.hover ul li.hover ul li.hover ul { display:block; }
0
Réponse 2 / 3
steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018
3 mai 2012 à 17:23
oula j ai un gros soucis avec le code, meme si je te remercie enormenent d avoir repondu cela ne fonctionne pas meme sans le css
0
wAxxx Messages postés 421 Date d'inscription mardi 24 juin 2008 Statut Membre Dernière intervention 29 septembre 2015 46
3 mai 2012 à 17:28
Tu utilise quoi ? IE ça marche pas j'ai testé maintenant mais ça marche bien sous Chrome et Firefox.
a tu ajouter le lien vers le css?
0
steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018
3 mai 2012 à 17:30
ie... lol
0
Réponse 3 / 3
steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018
3 mai 2012 à 17:46
j ai ca mais le titre a un fond hors j en veux pas comment faire?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu déroulant en Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style>
#niveau_1{
width:170px;
background-color:red;
padding-left:20px;
}
#niveau_2{
width:170px;
background-color:red;
padding-left:20px;
}
#niveau_3{
width:170px;
background-color:red;
padding-left:20px;
}

</style>

</head>

<script>
function sous_menu_ouvre(_sous_menu) {
_sous_menu.style.display='block';
}
function sous_menu_ferme(_sous_menu) {
_sous_menu.style.display='none';
}

</script>

<body>

<ul style="list-style-type:square">
<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_1_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_1_in'));" id="niveau_1" style="float:left">
menu 1</li>
<ul id="niveau_1_in" style="display:none">
<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_11_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_11_in'));" id="niveau_11">
menu 1.1</li>
<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_11_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_11_in'));" id="niveau_12">
menu 1.2</li>
</ul>


</ul>

</body>
</html>
0
wAxxx Messages postés 421 Date d'inscription mardi 24 juin 2008 Statut Membre Dernière intervention 29 septembre 2015 46
3 mai 2012 à 17:49
ajoutes dans chaques propriétés : 
color:votre_code_coleur;


ça te permet de changer la couleur des textes (titres)
0
steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018
3 mai 2012 à 17:51
oui mais cela modifie les autre aussi... si je modifie dans le css niveau 1 ca change tout les autres... fait le test tu verras? ;)
0
steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018
3 mai 2012 à 18:39
helppppppppp
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Tableau suivi cadres 2023 204 jours travaillés
UFAL75 -
PHILOU10120 -

33 réponses
probleme sommet
urgent -
Raymond PENTIER -

2 réponses