Sujet Précédent Sujet Suivant

Menu Javascript Dreamweaver

Résolu/Fermé
lastwaypunk Messages postés 5 Date d'inscription lundi 3 février 2014 Statut Membre Dernière intervention 20 mai 2014 - Modifié par lastwaypunk le 3/02/2014 à 15:25
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 4 févr. 2014 à 00:25
Bonjours je doit crée un site de restaurant et je doit inserer un menu qui quand on clique sur un des onglets la description de celui s'affiche sans passer par une nouvelle page.
Voici le code de ma page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Caviar_Dreams_300.font.js" type="text/javascript"></script>
<script src="js/Caviar_Dreams_500.font.js" type="text/javascript"></script>
<!--[if lte IE 7]>
<link href="ie-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.templatemonster.com/help/"></script>
<![endif]-->
</head>
<body id="page3">
<div class="extra">
<div id="main">
<!--header -->
<div id="header">
<div class="inner">
<div class="container">
<div class="logo">
<a href="index.html"><img src="images/logo2.png" alt="" /></a>
</div>
<div class="menu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="index-1.html">À propos</a></li>
<li class="active">Menu</li>
<li><a href="index-3.html">Événements</a></li>
<li class="last"><a href="index-4.html">Contacts</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--header end-->
<div id="content">
<div class="border">
<div class="indent">
<div class="indent padding">
<div class="container1">
<div class="col-1 col-pad">
<h2>Menus</h2>
<ul class="list">
<li><em>$14.90</em><a href="index-2.html?spaghettis=230" target="_self">Spaghettis</a><strong> </strong></li>
<li><em>$8.79</em><a href="index-2.html?soupesalade=231">Soupes et Salades</a><strong> </strong></li>
<li><em>$13.00</em><a href="index-2.html?Accompagnements=232">Accompagnements</a><strong> </strong></li>
<li><em>$12.99</em><a href="index-2.html?PoitrinesdePoulets=233">Poitrines de Poulets</a><strong> </strong></li>
<li><em>$18.00</em><a href="index-2.html?PattesdeCrabes=234">Pattes de Crabes</a><strong> </strong></li>
<li><em>$13.60</em><a href="index-2.html?PizzaNature=235">Pizza Nature</a><strong> </strong></li>
<li><em>$6.00</em><a href="index-2.html?Hamburgers=236">Hamburgers</a><strong> </strong></li>
<li><em>$7.99</em><a href="index-2.html?Cheeseburgers=237">Cheeseburgers</a><strong> </strong></li>
<li><em>$11.50</em><a href="index-2.html?Poutine=238">Poutine</a><strong> </strong></li>
</ul>
<p><a href="index-2.html" class="link">Voir la description</a></p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="indent padding">
<div class="container">
<div class="col-1 col-pad">
<img src="images/poutine.png" alt="" width="299" height="214" class="border" />
<h2> </h2>
</div>
<div class="col-2">

<h2 align="center">EXtra
</h2>
<p align="left">Steack, Poulet ou Bacon 1,99$</p>
<p align="left">Fromage (Poutine) 1,00$</p>
<p align="left">Frite 3,75$</p>
<p align="left">Champignon, Poivrons 1,15$</p>
<div class="container pad"></div>
</div>
</div>
</div>
</div>
<!--footer -->
<div id="footer">
<div>
<div align="left">Resto Tito © 2014 | <a href="index-5.html">Politique de confidentialité</a><br />
</div>
<!-- {%FOOTER_LINK} -->
</div>
</div>
<!--footer end-->
</div>
<div class="block">
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>

</html>
A voir également:

2 réponses

Réponse 1 / 2
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 3/02/2014 à 18:42
Bonjour

tu crées une div avec une id (exemple <div id="affiche">) dans laquelle tu mets ce qui doit s'afficher

dans le css tu mets
#affiche {display:none;} (la on ne la voit pas)

tu crée une fonction javascript qui change le display à mettre dans le <head>

<script type="text/javascript">
function switchInfoPerso()
{
divInfo = document.getElementById('affiche');
if (divInfo.style.display == 'none')
divInfo.style.display = 'block';
else
divInfo.style.display = 'none';
}
</script>

tu appelles la fonction
<a href="javascript: switchInfoPerso();">Menu</a>

<div id="affiche" style="display: none;">bla bla le menu avec frites etc ...</div>

si tu as 50 menus il faudra faire 50 fonctions et 50 div avec des id differentes tu peux toutes les positionner au meme endroit avec position absolute.

et voila

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
1
Réponse 2 / 2
lastwaypunk Messages postés 5 Date d'inscription lundi 3 février 2014 Statut Membre Dernière intervention 20 mai 2014
3 févr. 2014 à 21:48
Merci beaucoup très bon conseil.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
4 févr. 2014 à 00:25
bon
j'avais oublié de dire
avec jquery c'est plus simple
exemple
http://kyrielles.net/dropdownkit/dropdownkit_fr.html
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses
Accéder au menu Advanced Bios PC portable HP
Axferd -
Bill -

6 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses