Menu Javascript Dreamweaver
Résolu
lastwaypunk
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
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>
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:
- Menu Javascript Dreamweaver
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Telecharger javascript - Télécharger - Langages
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
2 réponses
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.
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.
Merci beaucoup très bon conseil.
bon
j'avais oublié de dire
avec jquery c'est plus simple
exemple
http://kyrielles.net/dropdownkit/dropdownkit_fr.html
j'avais oublié de dire
avec jquery c'est plus simple
exemple
http://kyrielles.net/dropdownkit/dropdownkit_fr.html