28172 sujets

CSS et mise en forme, CSS3

Laisser mon item visible même avec les sous-items "déroulés"

Bonjour à tous,
je suis toute débutante et j'ai eu recours au tutoriel "menu accordéon" pour créer mon premier site internet.
Jusque là tout va bien Smiley smile
J'ai un soucis que je n'arrive pas à résoudre :
Mon menu est un ensemble de lien avec, quand la souris passe dessus, un fond vert qui apparaît.
Quand on clique sur ce lien, le sous menus apparaît et reste visible (via la class Open_at_load) quand je me trouve sur le premier "sous item" mais malheureusement le pavé vert à disparu et j'aimerai le garder visible pour que le visiteur comprenne clairement qu'il se trouve dans "ITEM1" avec ces sous item (visibles donc)
Voilà !!
si quelqu'un peut m'aider je veux bien parce que là ....
au secours quoi !! Smiley smile

voici mes feuilles de style :
html, body {
height: 100%;
width: 100%;
overflow: auto;
}

body {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.9em;
line-height: 1.3em;
margin: 0;
}

#contenu {
height: 100%;
margin-left: 370px;
background-color:#FFFFFF;
}

#menu {
position: absolute;
left:0;
background-color: #FFFFFF;
width: 359px;
height: 100%;
}

.engras {
font-family: Georgia, Times New Roman;
font-size: 1em;
margin: 0;
}

.engras2 {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.9em;
color: #686868;
line-height: 1.2em;
margin: 0;
}

a img {border: 0 none;}

#signature {text-align: center;
font-size: 0.9em;}

/* voici la navigation de la page "accueil" */

#navigation {
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
}

#navigation a {
color: #E51259;
font-family: Georgia, Times New Roman;
text-decoration: none;
display: block;
margin-bottom: 3px;
padding-left: 19px;
}

#navigation a:hover {
background-color: #D5E04D;
font-family: Georgia, Times New Roman;
color: #000000;
}



/* voici la navigation interne, dans la balise div du menu gauche, sous le logo et visibles sur toutes les pages internes sauf "accueil" */


.navigation {
margin: 0;
padding: 0;
list-style: none;
background: #FFF;
color: #FFF;
width: 200px;
height: 200px;
font-family: Georgia, Times New Roman;
padding-left: 25px;
}

.navigation a {
display: block;
padding: 4px 10px;
color: #000;
text-decoration: none;
background: #000 left bottom no-repeat;}

.navigation span {
display: block;
padding: 4px 10px;
color: #000;
text-decoration: none;
background: #000 left bottom no-repeat;}

.navigation .toggleSubMenu a {
background: #FFF;
color: #EA1168;}

.navigation .toggleSubMenu span {
background: #D5E04D;
}

/* .navigation .open a {
background-image: url(menu-item-enroule.png);}

.navigation .open span {
background-image: url(menu-item-enroule.png);} */

.navigation a:hover {
text-decoration: none;
background: #D5E04D;
font-family: Georgia, Times New Roman;
color: #000;}

.navigation a:focus {
text-decoration: none;
font-family: Georgia, Times New Roman;
color: #000;
background: #D5E04D;}

.navigation a:active {
text-decoration: none;
font-family: Georgia, Times New Roman;
background: #D5E04D;}

.navigation .subMenu {
font-size: .8em;
background: #FFF;
font-size: .9em;
margin: 0;
list-style-type: none;
padding: 0;
color: #000;}

.subMenu {
font: 1em 'helvetica', Arial, sans-serif;
color: #000;}

.navigation ul.subMenu a {
background: none;
color: #000;
padding: 3px 20px;}

.navigation ul.subMenu a:hover {
font: 1em 'helvetica', Arial, sans-serif;
color: #EA1168;}


et ma feuille HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>blabla</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
<style type="text/css">@import url(styles.css);</style>

<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$(".navigation ul.subMenu:not('.open_at_load')").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu"

// et on remplace l'élément span qu'ils contiennent par un lien :
$(".navigation li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;

// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});

} ) ;
// -->

</script>
</head>

<body>
<div id="menu"><a href="accueil.html" title="retour à l'accueil"><img src="images/logo.jpg" /></a>

<p>
<ul class="navigation">
<li class="toggleSubMenu"><span>Identité visuelle</span>
<ul class="subMenu open_at_load">
<li><a href="parcdescoudrays.html" title="parc des coudrays">Le parc des Coudrays</a></li>
<li><a href="shana.html" title="shana">Shana</a></li>
<li><a href="templiers.html" title="commanderie des templiers">La Commanderie des Templiers</a></li>
<li><a href="zic.html" title="zic en herbe">Zic en herbe</a></li>
</ul></li>


</ul>
</p>
</div>
<div>blablabla</div>


</body>
</html>


en vous remerciant pour votre réponse !!!!
amicalement,
Marguerite
Bonjour et bienvenue parmi nous Marguerite Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

upload/12813-1-code.gif

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Je t'invite également à venir te présenter à la communauté qui t'accueille avec grand plaisir

Cdt,
Sylvain
margo a écrit :
je vais de ce pas reposter ma question comme il faut !!

Ah non non, il ne faut pas reposter cette question, mais juste modifier ton message ci-dessus pour suivre les règles du forum. C'est d'ailleurs ce qu'a précisé 6l20:
a écrit :
Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.
Éditer = modifier, corriger.

Quant à la question elle-même, la réponse se trouve dans la FAQ du forum, section «Mise en page générale». Smiley cligne
Sujet clos
Aller à