menu vertical de type accordéon

TO LET OPINIONS , QUESTION , REQUEST or JUST FOR LET FRIENDLY MESSAGE

menu vertical de type accordéon

Postby Nez-aux-feet on Wed Sep 08, 2010 9:34 pm

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.
User avatar
Nez-aux-feet
 
Posts: 4
Joined: Wed Sep 08, 2010 3:02 pm

Re: menu vertical de type accordéon

Postby Nez-aux-feet on Mon Sep 13, 2010 3:08 pm

Hum hum...
C'est compliqué ?
Afin d'étayer mon propos, voici le menu idéal dont je rêve, quoique un tantinet trop sophistiqué...
http://vrayc4d.com/manuals/vrayforc4d-m ... -materials

Je préfère un clic de la souris qu'un passage du curseur, mais surtout le top, le menu reste affiché tel que.

Une suggestion ?

Merci.
User avatar
Nez-aux-feet
 
Posts: 4
Joined: Wed Sep 08, 2010 3:02 pm

Re: menu vertical de type accordéon

Postby Nez-aux-feet on Wed Sep 15, 2010 9:52 pm

Ne pouvant attendre davantage, je viens de le mettre en ligne.
http://www.restoredesign.fr/

D'entrée vous constaterez les 3 triangles du menu sur les mots. Je n'en veux pas et j'aimerais que ce soit le texte qui s'allume au passage de la souris.
Les autres triangles... je ne sais comment j'ai réussi à les faire disparaître... du champ de vision, car ils sont quelque parts.
Le truc insupportable reste le menu qui se ferme à chaque page appelée... siouplait, si vous avez une réponse, merci.
User avatar
Nez-aux-feet
 
Posts: 4
Joined: Wed Sep 08, 2010 3:02 pm

Re: menu vertical de type accordéon

Postby Nez-aux-feet on Fri Dec 03, 2010 1:08 pm

N'ayant reçu de soutien, j'ai dû passé à l'ennemi en adaptant un menu Wordpress.
J'aurais souhaité un peu plus de latitude, mais bon ça marche et répond à ma demande initiale.

Du coup cette file ne représente plus d'intérêt pour ce forum (elle n'en a jamais provoqué non plus)
... donc RAD si tu es là, n'hésite pas à gommer cette intervention.

Merci.
User avatar
Nez-aux-feet
 
Posts: 4
Joined: Wed Sep 08, 2010 3:02 pm

Re: menu vertical de type accordéon

Postby RAD on Fri Dec 03, 2010 2:39 pm

Salut

dsl c est de ma faute , je t ai oublie :oops:

bon si tu as trouve une solution , tant mieux c est le plus important :D

a+
RAD

Image La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une.
User avatar
RAD
Administrateur - Site Admin
 
Posts: 532
Joined: Thu Aug 31, 2006 12:02 am


Return to RAD ZONE FORUM

Who is online

Users browsing this forum: No registered users and 1 guest

cron