Menu Jquery
Résolu
jqr
-
jqr -
jqr -
Bonjour, j'ai trouvé sur un site un menu qui m'intéresse, la personne qui s'occupe du site dit de prendre le code du menu dans le code source de la page.
C'est ce que j'ai fais mais sa ne fonctionne pas, je ne vois pas d'ou sa peut venir.
Voici le menu : http://www.stunicholls.com/menu/jquery-dropline-dropdown-fly-3.html#url
Et Voici le code que j'ai pris (je n'ai pas oublié de changer les liens java et css) :
<html>
<head>
<style type="text/css">
#background {width:700px; height:500px; background:url(beach.jpg); padding:12px 25px 0 25px;}
#container {width:700px; height:30px; position:relative; background:url(list-back2.gif); margin:}
#nav, #nav ul {padding:0; margin:0; list-style:none; width:700px;}
#nav li {float:left;}
#nav li a {float:left; text-decoration:none; font-family:georgia, serif; font-size:14px; color:#000;}
#nav li a b {display:block; float:left; height:30px; line-height:28px; padding:0 20px 0 10px; font-weight:normal; cursor:pointer;}
#nav li.sub a b {background:url(down.gif) no-repeat right 6px;}
#nav b.hover {color:#fff;}
#nav i.hover {color:#069;}
#nav em.hover {color:#080;}
#nav ul ul ul a:hover {color:#080;}
#nav ul {display:none;}
#nav ul {position:absolute; left:0; top:35px; background:#ddecf9;}
#nav ul li {float:left; position:relative;}
#nav ul li a {display:block; padding:0 20px 0 10px; font-size:12px; line-height:25px; cursor:pointer;}
#nav ul li a i {display:block; font-style:normal; cursor:pointer;}
#nav ul li a.sub {background:url(down.gif) no-repeat right 3px;}
#nav ul ul {width:130px; left:-1px; top:30px;}
#nav ul ul li a {display:block; line-height:20px; padding:0 0 0 10px; width:120px;}
#nav ul ul li a.fly {background:url(right.gif) no-repeat right center;}
#nav ul ul li a em {font-style:normal; display:block; width:120px; cursor:pointer;}
#nav ul ul ul {left:135px; top:0;}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="dropshadow.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<h2> </h2>
<h3> </h3>
<div id="container" shadowid="container_dropShadow" style="z-index: 2; position: relative;">
<ul id="nav">
<li><a href="#url"><b>Home</b></a></li>
<li class="sub"><a href="#url"><b>Products</b></a>
<ul>
<li><a class="sub" href="#url"><i>Cameras</i></a>
<ul>
<li><a class="fly" href="#url"><em>Compact</em></a>
<ul>
<li><a href="#url">Panasonic</a></li>
<li><a href="#url">Nikon</a></li>
<li><a href="#url">Minolta</a></li>
<li><a href="#url">Ricoh</a></li>
<li><a href="#url">Kodak</a></li>
</ul>
</li>
<li><a class="fly" href="#url"><em>Digital</em></a>
<ul>
<li><a href="#url">Canon</a></li>
<li><a href="#url">Minolta</a></li>
<li><a href="#url">Ricoh</a></li>
<li><a href="#url">Pentax</a></li>
</ul>
</li>
<li><a class="fly" href="#url"><em>SLR</em></a>
<ul>
<li><a href="#url">Pentax</a></li>
<li><a href="#url">Kodak</a></li>
<li><a href="#url">Nikon</a></li>
<li><a href="#url">Minolta</a></li>
<li><a href="#url">Panasonic</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="sub" href="#url"><i>Lenses</i></a>
<ul>
<li><a href="#url"><em>Wide Angle</em></a></li>
<li><a href="#url"><em>Standard</em></a></li>
<li><a href="#url"><em>Telephoto</em></a></li>
<li><a href="#url"><em>Zoom</em></a></li>
<li><a href="#url"><em>Mirror</em></a></li>
</ul>
</li>
<li><a href="#url"><i>Flashguns</i></a></li>
<li><a href="#url"><i>Tripods</i></a></li>
<li><a href="#url"><i>Filters</i></a></li>
</ul>
</li>
<li class="sub"><a href="#url"><b>Services</b></a>
<ul>
<li><a href="#url"><i>Printing</i></a></li>
<li><a href="#url"><i>Photo Framing</i></a></li>
<li><a href="#url"><i>Retouching</i></a></li>
<li><a href="#url"><i>Archiving</i></a></li>
</ul>
</li>
<li class="sub"><a href="#url"><b>Contacts</b></a>
<ul>
<li><a href="#url"><i>Support</i></a></li>
<li><a class="sub" href="#url"><i>Sales</i></a>
<ul>
<li><a class="fly" href="#url"><em>USA</em></a>
<ul>
<li><a href="#url">Arizona</a></li>
<li><a href="#url">California</a></li>
<li><a href="#url">Florida</a></li>
<li><a href="#url">Kansas</a></li>
<li><a href="#url">New York</a></li>
<li><a href="#url">Texas</a></li>
<li><a href="#url">Utah</a></li>
<li><a href="#url">Virginia</a></li>
</ul>
</li>
<li><a href="#url"><em>Canadian</em></a></li>
<li><a href="#url"><em>Australian</em></a></li>
<li><a class="fly" href="#url"><em>Europe</em></a>
<ul>
<li><a href="#url">England</a></li>
<li><a href="#url">France</a></li>
<li><a href="#url">Germany</a></li>
<li><a href="#url">Italy</a></li>
<li><a href="#url">Spain</a></li>
</ul>
</li>
<li><a href="#url"><em>Asian</em></a></li>
<li><a href="#url"><em>South American</em></a></li>
</ul>
</li>
<li><a href="#url"><i>Buying</i></a></li>
<li><a href="#url"><i>Photographers</i></a></li>
<li><a href="#url"><i>Stockist</i></a></li>
</ul>
</li>
<li class="sub"><a href="#url"><b>Shop</b></a>
<ul>
<li><a href="#url"><i>Online</i></a></li>
<li><a href="#url"><i>Catalogue</i></a></li>
<li><a href="#url"><i>Mail Order</i></a></li>
</ul>
</li>
<li><a href="#url"><b>Privacy Policy</b></a></li>
</ul>
<div id="container_dropShadow" class="dropShadow" style="margin: 0px; left: 24px; position: absolute; top: 75px; z-index: 1;">
</div>
</div>
</div>
</body>
</html>
Merci d'avance pour vos réponse .
C'est ce que j'ai fais mais sa ne fonctionne pas, je ne vois pas d'ou sa peut venir.
Voici le menu : http://www.stunicholls.com/menu/jquery-dropline-dropdown-fly-3.html#url
Et Voici le code que j'ai pris (je n'ai pas oublié de changer les liens java et css) :
<html>
<head>
<style type="text/css">
#background {width:700px; height:500px; background:url(beach.jpg); padding:12px 25px 0 25px;}
#container {width:700px; height:30px; position:relative; background:url(list-back2.gif); margin:}
#nav, #nav ul {padding:0; margin:0; list-style:none; width:700px;}
#nav li {float:left;}
#nav li a {float:left; text-decoration:none; font-family:georgia, serif; font-size:14px; color:#000;}
#nav li a b {display:block; float:left; height:30px; line-height:28px; padding:0 20px 0 10px; font-weight:normal; cursor:pointer;}
#nav li.sub a b {background:url(down.gif) no-repeat right 6px;}
#nav b.hover {color:#fff;}
#nav i.hover {color:#069;}
#nav em.hover {color:#080;}
#nav ul ul ul a:hover {color:#080;}
#nav ul {display:none;}
#nav ul {position:absolute; left:0; top:35px; background:#ddecf9;}
#nav ul li {float:left; position:relative;}
#nav ul li a {display:block; padding:0 20px 0 10px; font-size:12px; line-height:25px; cursor:pointer;}
#nav ul li a i {display:block; font-style:normal; cursor:pointer;}
#nav ul li a.sub {background:url(down.gif) no-repeat right 3px;}
#nav ul ul {width:130px; left:-1px; top:30px;}
#nav ul ul li a {display:block; line-height:20px; padding:0 0 0 10px; width:120px;}
#nav ul ul li a.fly {background:url(right.gif) no-repeat right center;}
#nav ul ul li a em {font-style:normal; display:block; width:120px; cursor:pointer;}
#nav ul ul ul {left:135px; top:0;}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="dropshadow.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<h2> </h2>
<h3> </h3>
<div id="container" shadowid="container_dropShadow" style="z-index: 2; position: relative;">
<ul id="nav">
<li><a href="#url"><b>Home</b></a></li>
<li class="sub"><a href="#url"><b>Products</b></a>
<ul>
<li><a class="sub" href="#url"><i>Cameras</i></a>
<ul>
<li><a class="fly" href="#url"><em>Compact</em></a>
<ul>
<li><a href="#url">Panasonic</a></li>
<li><a href="#url">Nikon</a></li>
<li><a href="#url">Minolta</a></li>
<li><a href="#url">Ricoh</a></li>
<li><a href="#url">Kodak</a></li>
</ul>
</li>
<li><a class="fly" href="#url"><em>Digital</em></a>
<ul>
<li><a href="#url">Canon</a></li>
<li><a href="#url">Minolta</a></li>
<li><a href="#url">Ricoh</a></li>
<li><a href="#url">Pentax</a></li>
</ul>
</li>
<li><a class="fly" href="#url"><em>SLR</em></a>
<ul>
<li><a href="#url">Pentax</a></li>
<li><a href="#url">Kodak</a></li>
<li><a href="#url">Nikon</a></li>
<li><a href="#url">Minolta</a></li>
<li><a href="#url">Panasonic</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="sub" href="#url"><i>Lenses</i></a>
<ul>
<li><a href="#url"><em>Wide Angle</em></a></li>
<li><a href="#url"><em>Standard</em></a></li>
<li><a href="#url"><em>Telephoto</em></a></li>
<li><a href="#url"><em>Zoom</em></a></li>
<li><a href="#url"><em>Mirror</em></a></li>
</ul>
</li>
<li><a href="#url"><i>Flashguns</i></a></li>
<li><a href="#url"><i>Tripods</i></a></li>
<li><a href="#url"><i>Filters</i></a></li>
</ul>
</li>
<li class="sub"><a href="#url"><b>Services</b></a>
<ul>
<li><a href="#url"><i>Printing</i></a></li>
<li><a href="#url"><i>Photo Framing</i></a></li>
<li><a href="#url"><i>Retouching</i></a></li>
<li><a href="#url"><i>Archiving</i></a></li>
</ul>
</li>
<li class="sub"><a href="#url"><b>Contacts</b></a>
<ul>
<li><a href="#url"><i>Support</i></a></li>
<li><a class="sub" href="#url"><i>Sales</i></a>
<ul>
<li><a class="fly" href="#url"><em>USA</em></a>
<ul>
<li><a href="#url">Arizona</a></li>
<li><a href="#url">California</a></li>
<li><a href="#url">Florida</a></li>
<li><a href="#url">Kansas</a></li>
<li><a href="#url">New York</a></li>
<li><a href="#url">Texas</a></li>
<li><a href="#url">Utah</a></li>
<li><a href="#url">Virginia</a></li>
</ul>
</li>
<li><a href="#url"><em>Canadian</em></a></li>
<li><a href="#url"><em>Australian</em></a></li>
<li><a class="fly" href="#url"><em>Europe</em></a>
<ul>
<li><a href="#url">England</a></li>
<li><a href="#url">France</a></li>
<li><a href="#url">Germany</a></li>
<li><a href="#url">Italy</a></li>
<li><a href="#url">Spain</a></li>
</ul>
</li>
<li><a href="#url"><em>Asian</em></a></li>
<li><a href="#url"><em>South American</em></a></li>
</ul>
</li>
<li><a href="#url"><i>Buying</i></a></li>
<li><a href="#url"><i>Photographers</i></a></li>
<li><a href="#url"><i>Stockist</i></a></li>
</ul>
</li>
<li class="sub"><a href="#url"><b>Shop</b></a>
<ul>
<li><a href="#url"><i>Online</i></a></li>
<li><a href="#url"><i>Catalogue</i></a></li>
<li><a href="#url"><i>Mail Order</i></a></li>
</ul>
</li>
<li><a href="#url"><b>Privacy Policy</b></a></li>
</ul>
<div id="container_dropShadow" class="dropShadow" style="margin: 0px; left: 24px; position: absolute; top: 75px; z-index: 1;">
</div>
</div>
</div>
</body>
</html>
Merci d'avance pour vos réponse .
A voir également:
- Menu Jquery
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
7 réponses
Bonjour,
Il faut que tu télécharges la bibliothèque sur le site de JQUERY.
Attention de bien vérifier les liens sur ton fichier HTML et JS.
Il s'agit de la version 1.3.2.
Il faut que tu télécharges la bibliothèque sur le site de JQUERY.
Attention de bien vérifier les liens sur ton fichier HTML et JS.
Il s'agit de la version 1.3.2.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Téléchargez directement le plugins:
http://plugins.jquery.com/project/DropShadow
Et apportez y la personnalisation necessaires afin de l'adapter à votre design.
Vous gagnerez du temps.
Cordialement,
http://plugins.jquery.com/project/DropShadow
Et apportez y la personnalisation necessaires afin de l'adapter à votre design.
Vous gagnerez du temps.
Cordialement,