Bonjour,
mon pseudo résume mes compétences.
Je suis en train de refondre mon site que j'ai élaboré grâce au siteduzero.
Simple, Xhtml + CSS.
Le site en question : http://voltaicdesign.fr/
La liste des liens référents s'allongeant, j'ai cherché et trouvé un menu vertical de type accordéon proposé par RAD : ClickShowHideMenu-top-level-link-version1
Il me permet de ranger les références par thématique et donc de le restreindre grâce à 4 niveaux de sous-menus.
Après l'avoir bidouillé en l'épurant au maximum, j'arrive à peu près à mes fins.
Toutefois je rencontre plusieurs problèmes :
- je souhaite supprimer les triangles qui indiquent qu'il y a un sous-menu (je ne connais rien au Java et viens de regarder les simples lignes correspondantes pendant huit heures sans qu'elles ne ma causent ou suggèrent une solution)
- j'aimerais que le nom correspondant au lien sélectionné devienne blanc (comme j'avais réussi à le faire jusqu'à présent) et surtout :
- que la page qui s'ouvre conserve le menu en l'état (ne se referme pas à l'ouverture de la page) avec le lien en surbrillance. (la solution cookie bien que plaisante ne m'enchante guère)
Après une journée d'élaborations diverses et variées je crains ne pas m'en sortir rapidement et en appelle donc à l'expertise collégiale de ce forum.
Merci à toute âme charitable.
le Xhtml :
<script type='text/javascript' src='radmenu.js'>
</script>
</head>
<body>
<menu>
<ul id="rad0" class="radmc">
<li><a class="radparent" href="#">architecture</a>
<ul>
<li><a class="radparent" href="#">store</a>
<ul>
<li><a class="radparent" href="#">Histoire de Pains</a>
<ul>
<li><a href= "#" title="point de vente">Challans</a></li>
<li><a href= "#" title="boulangerie">Mérignac</a></li>
<li><a href= "#" title="boulangerie">Orléans</a></li>
<li><a href= "#" title="boulangerie">Bastia</a></li></a>
</ul></li>
<li><a href= "#" title="boulangerie_haut_de_gamme">DeVence</a></li>
<li><a href= "#" title="concept_restaurant">Île flottante</a></li>
<li><a href= "#" title="lounge_bar">Et pis cure...</a></li>
<li><a href= "#" title="concept_boutique">B comme Borgeaud</a></li>
<li><a href= "#" title="peugeot">Peugeot 1007</a></li>
<li><a class="radparent" href="#">Leroy Merlin</a>
<ul>
<li><a href= "#" title="concept_magasin_leroy_merlin">Beaubourg</a></li>
<li><a href= "4#" title="concept_leroy_merlin">Vision</a></li>
</ul></li>
<li><a href= "#" title="concept_fai">Wanadoo</a></li>
<li><a href= "#" title="concept_magasin_promod">Promod</a></li>
<li><a href= "#" title="concept_magasin_heytens">Heytens</a></li>
</ul></li>
<li><a class="radparent" href="#">merchandising</a>
<ul>
<li><a href= "#" title="habitat_nomade">EDF - habitat nomade</a></li>
<li><a href= "#" title="concept_magasin_lavinia">Lavinia</a></li>
</ul></li>
<li><a class="radparent" href="#">corporate</a>
<ul>
<li><a href= "#" title="les_docks">les Docks</a></li>
<li><a href= "#" title="amenagement_de_bureaux">studio 54</a></li>
<li><a href= "#" title="amenagement_hall">Call & Opter</a></li>
<li><a href= "#" title="appartement_temoin">promotion immobilière</a></li>
<li><a href= "#" title="appartement_temoin">Wyplay</a></li>
<li><a href= "#" title="aeroport_de_nice">aéroport de Nice</a></li>
<li><a class="radparent" href="#">TF1</a>
<ul>
<li><a href= "#" title="tf1_accueil">accueil</a></li>
<li><a href= "#" title="tf1_journal_televise">rédaction JT</a></li>
<li><a href= "#" title="tf1_salle_de_conseil">salle de conseil</a></li>
</ul></li>
<li><a class="radparent" href="#">EDF</a>
<ul>
<li><a href= "#" title="edf_mezzanine">cafétéria</a></li>
<li><a href= "#" title="edf_accueil">accueil</a></li>
</ul></li>
<li><a href= "#" title="mairie_arcueil">mairie d'Arcueil</a></li>
<li><a href= "#" title="paris_expo">ParisExpo</a></li>
<li><a href= "#" title="amenagement_tertiaire_total">Totalfinaelf</a></li>
<li><a class="radparent" href="#">Colas</a>
<ul>
<li><a href= "#" title="colas_accueil">accueil et VIP</a></li>
<li><a href= "#" title="colas_visioconference">visioconfèrence</a></li>
</ul></li>
<li><a href= "#" title="bouygues_telecom_salle_de_conseil">Bouygues telecom</a></li>
</ul></li>
<li><a class="radparent" href="#">interior</a>
<ul>
<li><a href= "#" title="maison_d_hotes">maison d'hôtes</a></li>
<li><a href= "#" title="yacht_de_luxe">yacht de luxe</a></li>
<li><a href= "#" title="bastide">bastide lubéron</a></li>
<li><a href= "#" title="appartement">appartement parisien</a></li>
<li><a href= "#" title="maison_design">maison 100keuros</a></li>
</ul></li>
</ul></li>
<li><a class="radparent" href="#">furniture</a>
<ul>
<li><a class="radparent" href="#">design</a>
<ul>
<li><a href= "#" title="plv">Michelin</a></li>
<li><a href= "#" title="console_table">Wood for you</a></li>
<li><a href= "#" title="chambre_d_hotel" >chambre d'hôtel</a></li>
<li><a href="#">Salomon</a></li>
</ul></li>
</ul></li><li><a class="radparent" href="#">graphic design</a>
<ul>
<li><a class="radparent" href="#">visual identity</a>
<ul>
<li><a href="#" title="boulangerie">Histoire de Pains</a></li>
<li><a href= "#" title="boulangerie_haut_de_gamme">DeVence</a></li>
<li><a href= "#" title="les_docks">les Docks</a></li>
</ul></li>
<li><a class="radparent" href="#">branding</a>
<ul>
<li><a href= "#" title="boulangerie">Histoire de Pains</a></li>
<li><a href= "#" title="boulangerie_haut_de_gamme">DeVence</a></li>
<li><a href= "#" title="habitat_nomade">EDF - habitat nomade</a></li>
<li><a href= "#" title="lounge_bar">Et pis cure...</a></li>
<li><a href= "#" title="concept_boutique">B comme Borgeaud</a></li>
</ul></li>
<li><a class="radparent" href="#">webdesign</a>
<ul>
<li><a href="#;">?</a></li>
<li><a href="#;">?</a></li>
</ul></li>
</ul></li>
<li class="radclear"> </li>
</ul>
<script type="text/javascript">
//<![CDATA[
rad_create(0,false,0,500,'all',false,false,false,false);
//]]>
</script>
Le CSS édulcoré :
body
{
left: 0px;
top: 0px;
background-color: rgb(45,38,38);
}
menu
{
position: absolute;
text-align: right;
left:-70px;
top: 183px;
width: 215px;
font-size: 13px;
text-decoration: none;
}
.radmc a, .radmc li
{
left: 0px;
display: block;
}
.radmc div
{
visibility: hidden;
position: absolute;
}
#rad0 a, #rad0 ul
{
text-align: right;
position: absolute;
color: rgb(88,82,76);
text-decoration: none;
font-family: Arial black, arial, verdana, serif;
border-top: 1px solid rgb(80,80,80);
border-bottom: 1px solid rgb(80,80,80);
}
body #rad0 .radactive, body #rad0 .radactive:hover
{
color: rgb(148,122,106);
}
#rad0 div a, #rad0 ul a
{
color: rgb(103,97,91);
font-family: Arial black, arial, verdana, serif;
font-size: 11px;
border-top: none;
border-bottom: none;
padding: 0px 8px;
}
body #rad0 div .radactive, body #rad0 div .radactive:hover
{
color: rgb(163,137,121);
}
#rad0 div div a, #rad0 ul div a
{
color: rgb(143,137,131);
font-family: Arial, verdana, serif;
border-top: none;
border-bottom: none;
padding: 0px 0px;
}
body #rad0 div div .radactive, body #rad0 div div .radactive:hover
{
color: rgb(203,177,161);
}
#rad0 div div div a, #rad0 ul div div a
{
color: rgb(183,177,171);
font-family: Arial, verdana, serif;
padding: 0px 8px;
}
Le fichier java étant celui de base fourni en téléchargement.