> Tous les forums > Forum des Webmasters
 Comment creer un lien deroulant ?
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
TonIMontana
  Posté le 22/12/2009 @ 14:57 
Aller en bas de la page 
Astucien

Salut,

En HTML ou PHP ?

voici un exemple http://wiki.jalakai.co.uk/dokuwiki/doku.php/tutorials/start ( a gauche du site )

Lorsque l'on clique sur le lien, opla, des liens s'affichent!

Merci

Publicité
griggione
 Posté le 22/12/2009 à 15:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

Bonjour TonIMontana

C'est ce que j'ai fait hier avec des calendrier, mais c'est pareil pour du texte.Tu as les codes avec.

https://forum.pcastuces.com/quelle_est_cette_fonction-f2s15092.htm

elle
 Posté le 22/12/2009 à 18:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Ça se fait bien en CSS. Il y en a des exemples sur le site de Stu Nicholls, entre autres...

griggione
 Posté le 22/12/2009 à 19:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

Bonsoir elle

De quoi le hide/show ?

elle
 Posté le 22/12/2009 à 19:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Le menu dans l'exemple donné par TonIMontana, il est en CSS, non?

griggione
 Posté le 22/12/2009 à 19:48 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

RE

Ben je viens d'aller voir et j'en suis pas persuadé.
Faudrait trouvé dans le css ou se trouve exactement ce menu.

Si on regarde les métas il y a des liens css, faut voir par là.

Dreamer
 Posté le 22/12/2009 à 20:43 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

C'est un tree-menu facile à trouver avec madame google !!

Exemple : http://dbtree.megalingo.com/web/demo/simple-collapsible-tree.cfm

A+

TonIMontana
 Posté le 22/12/2009 à 22:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Merci mes amis, je vais continuer , si je rencontre un probleme je vous contact :)

griggione
 Posté le 23/12/2009 à 07:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

RE

Oui c'est bien ça, il y a du JS, d'ailleur on retrouve une <div id="index__tree">

D'ou mon septicisme sur du pur CSS.

elle
 Posté le 23/12/2009 à 07:28 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Ouais, le JS pour refermer le sous-menu, sinon ce n'est pas nécessaire...



Modifié par elle le 23/12/2009 07:29
griggione
 Posté le 23/12/2009 à 07:31 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

RE

Ben oui mais c'est justement le choix demandé

elle
 Posté le 23/12/2009 à 07:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Ben il fonctionne même si on ne le referme pas...

griggione
 Posté le 23/12/2009 à 09:22 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

RE

Oui c'est vrai, à moins d'avoir comme là un gros menu, sinon c'est pas trop génant.
Donc plus besoin du JS éventuellement.

TonIMontana
 Posté le 23/12/2009 à 10:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Salut, Voila ça marche !


<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Navigation</title>
</head>
<body>
<a href="#Accueil" onclick="showhide('monblocdelien1')">Accueil</a><a>
</a>
<div id="monblocdelien1" style="display: none;"></div>
<br>
<a href="#Mairie" onclick="showhide('monblocdelien2')">Mairie</a>
<div id="monblocdelien2" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">monbloc2</a>
</div>
<br>
<a href="#AM" onclick="showhide('monblocdelien3')">Atelier
Municipaux</a>
<div id="monblocdelien3" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">monbloc3</a>
</div>
<br>
<a href="#Urbanisme" onclick="showhide('monblocdelien4')">Urbanisme</a>
<div id="monblocdelien4" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">monbloc4</a>
</div>
<br>
<a href="#PM" onclick="showhide('monblocdelien5')">Police
Municipale</a>
<div id="monblocdelien5" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">monbloc5</a>
</div>
<br>
<a href="#CCAS" onclick="showhide('monblocdelien6')">CCAS</a>
<div id="monblocdelien6" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#Ecoles" onclick="showhide('monblocdelien7')">Ecoles</a>
<div id="monblocdelien7" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#Laussy" onclick="showhide('monblocdelien8')">Salle
du Laussy</a>
<div id="monblocdelien8" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#Musique" onclick="showhide('monblocdelien9')">Ecole
de Musique</a>
<div id="monblocdelien9" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#Jeunesse" onclick="showhide('monblocdelien10')">Jeunesse</a>
<div id="monblocdelien10" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#Bibli" onclick="showhide('monblocdelien11')">Biblioth&egrave;que</a>
<div id="monblocdelien11" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#PE" onclick="showhide('monblocdelien12')">Maison
Petite Enfance</a>
<div id="monblocdelien12" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#PDS" onclick="showhide('monblocdelien13')">Plaine
des sports</a>
<div id="monblocdelien13" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
<br>
<a href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">Essaie</a>
</div>
<a href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis"><br>
<script type="text/javascript">
function showhide(blocid) {
var monbloc= document.getElementById(blocid);
if (!monbloc) return;
monbloc.style.display = (monbloc.style.display=="none" ) ? "block" : "none";
}
</script></a>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Navigation</title>
</head>
<body>
<a href="#Accueil" onclick="showhide('monblocdelien1')">Accueil</a><a>
</a>
<div id="monblocdelien1" style="display: none;"></div>
<br>
<a href="#Mairie" onclick="showhide('monblocdelien2')">Mairie</a>
<div id="monblocdelien2" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">monbloc2</a>
</div>
<br>
<a href="#AM" onclick="showhide('monblocdelien3')">Atelier
Municipaux</a>
<div id="monblocdelien3" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">monbloc3</a>
</div>
<br>
<a href="#Urbanisme" onclick="showhide('monblocdelien4')">Urbanisme</a>
<div id="monblocdelien4" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">monbloc4</a>
</div>
<br>
<a href="#PM" onclick="showhide('monblocdelien5')">Police
Municipale</a>
<div id="monblocdelien5" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">monbloc5</a>
</div>
<br>
<a href="#CCAS" onclick="showhide('monblocdelien6')">CCAS</a>
<div id="monblocdelien6" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#Ecoles" onclick="showhide('monblocdelien7')">Ecoles</a>
<div id="monblocdelien7" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#Laussy" onclick="showhide('monblocdelien8')">Salle
du Laussy</a>
<div id="monblocdelien8" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#Musique" onclick="showhide('monblocdelien9')">Ecole
de Musique</a>
<div id="monblocdelien9" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#Jeunesse" onclick="showhide('monblocdelien10')">Jeunesse</a>
<div id="monblocdelien10" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#Bibli" onclick="showhide('monblocdelien11')">Biblioth&egrave;que</a>
<div id="monblocdelien11" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#PE" onclick="showhide('monblocdelien12')">Maison
Petite Enfance</a>
<div id="monblocdelien12" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
</div>
<br>
<a href="#PDS" onclick="showhide('monblocdelien13')">Plaine
des sports</a>
<div id="monblocdelien13" style="display: none;"> <a
href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">ici2</a>
<br>
<a href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis">Essaie</a>
</div>
<a href="http://10.0.0.9/dokuwiki/doku.php?id=serveur_slis"><br>
<script type="text/javascript">
function showhide(blocid) {
var monbloc= document.getElementById(blocid);
if (!monbloc) return;
monbloc.style.display = (monbloc.style.display=="none" ) ? "block" : "none";
}
</script></a>
</body>
</html>

griggione
 Posté le 23/12/2009 à 10:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

RE

Les script js se mettent entre <head> et </head> avec le rappel dans le corps de la page.
Mieux, dans un dossier JS et rappel dans le corps.

C'est plus léger pour la page, plus besoin de mettre le script complet dans toutes les pages, que les liens.

elle
 Posté le 23/12/2009 à 14:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

griggione a écrit :

Oui c'est vrai, à moins d'avoir comme là un gros menu, sinon c'est pas trop génant.
Donc plus besoin du JS éventuellement.

Et voilà!

Publicité
Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
299,00 €Ecran PC 27 pouces incurvé BenQ EX2710R (QHD, FreeSync,165Hz, 2xHP, réglable en hauteur) à 299 €
499 € -40%

Amazon fait une belle promotion sur l'écran PC BenQ MOBIUZ EX2710R qui passe 299 € livré gratuitement alors qu'on le trouve ailleurs à partir de 499 €. Il possède une dalle incurvée de 27 pouces QHD (2560x1440) et offre une fréquence de rafraichissement de 165 Hz et un temps de réponse de 1 ms. Il intègre 2 HP (2.5W) et une connectivité HDMI et DP. Il est réglable en hauteur.


Voir l'offre
2,18 €Câble RJ45 Cat5e PremiumCord 5 m, Gigabit/LAN à 2,18 €
9,99 € -78%

Amazon fait une belle promotion sur le câble RJ45 Cat5e PremiumCord d'une longueur de 5 mètres, Gigabit/LAN à 2,18 € seulement. Câble compatible Gigabit (1000 Mbit/s) et jusqu'à Multi-G (2.5 et 5 Gbit/s). D'autres longueurs de câbles sont également en promotion : 1 mètre à 0,83 €, 3 mètres à 1,62 € et 10 mètres à 4,05 €.


Voir l'offre
5,99 €Adaptateur Bluetooth USB TP-Link UB400 à 5,99 €
10 € -40%

Amazon fait une promotion sur l'adaptateur Bluetooth USB TP-Link UB400 qui passe à 5,99 €. Cet adaptateur à brancher sur un port USB va vous permettre d'ajouter le bluetooth 4.0 à votre ordinateur et d'utiliser ensuite sans fil vos périphériques bluetooth : souris, clavier, casque, manette, téléphone, ...


Voir l'offre
Gratuit4 mois d'abonnement à Amazon Music Unlimited gratuits

Amazon vous permet d'essayer son service de streaming musical pendant 4 mois gratuitement. Avec Amazon Music Unlimited, accédez à plus de 50 millions de titres, sans publicité et en illimité sur tous vos appareils : smartphone, tablette, PC/Mac, Fire, Alexa. Vous avez même la possibilité de télécharger vos playlists pour des écoutes hors connexion.

A la fin de ces 4 mois, vous pourrez basculer vers l'offre payante à 9,99 € / mois ou bien arrêter sans frais le service. A noter l'existence d'une offre famille à 14,99 € / mois qui permet jusqu'à 6 utilisateurs d'écouter leur musique à tout moment et sur leurs appareils préférés. Vous pouvez annuler l'abonnement à tout moment.


Voir l'offre

Sujets relatifs
Comment créer un lien relatif?
Comment creer un menu deroulant avec OnMouseOver
creer un lien qui ouvre une fenetre
creer site web en python et comment trouver un hébergeurger
Comment créer un blog?
comment creer un DVD de sauvegarde
comment créer un htaccess
comment créer un blog ?
comment créer un tchat ?
comment créer et recevoir un petit formulaire tout
Plus de sujets relatifs à Comment creer un lien deroulant ?
 > Tous les forums > Forum Forum des Webmasters