Aller au contenu

Une navigation en Ajax


Webdesigneuse

Sujets conseillés

Suite à mon message ici : http://www.webmaster-hub.com/index.php?sho...mp;#entry275325

... j'ai donc fini par mettre les mains dans la lessive Ajax et j'aimerai réaliser ce type de navigation :

http://sandbox.leigeber.com/dropdown/dropdown.html

code expliqué : http://www.leigeber.com/2008/04/sliding-ja...-dropdown-menu/

mais n'étant pas super calée en prog je n'arrive pas à résoudre un problème d'affichage d'image

pour le fond des boutons... (je voudrais un rendu comme ici : http://www.cabinet-blay.fr )

Voici la CSS :

   body {margin:25px;}
* {padding:0; margin:0}
.dropdown {float:left;/*padding-right:5px*/}
.dropdown dt {width:159px;/*border:0px solid #9ac1c9;padding:8px;*/ background:url("images/fds_btn.jpeg"); font:13px Arial; color:#f9f0d3; font-weight:bold; cursor:pointer; }
.dropdown dt:hover {background:url('images/fds_btn.jpeg');font:13px Arial; font-color:#f9f0d3; font-weight:bold; }
.dropdown dd {position:absolute; overflow:hidden; width:159px; display:none; font:12px Arial; font-color:#f9f0d3; font-weight:bold; background:#b6b15f; z-index:200; opacity:0}
.dropdown ul {width:159px; /*border:2px solid #9ac1c9;*/ list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:3px; color:#f9f0d3; text-decoration:none; background:#7e7948; width:159px}
.dropdown a:hover {background:url('images/fds_btn.jpeg'); /*color:#f9f0d3*/}
.dropdown .underline {/*border-bottom:1px */solid #b9d6dc}

et le html :

CODE
<html>

<body>

<dl class="dropdown">

<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">L'AGENCE</dt>

<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">

<ul>

<li><a href="#" class="underline">Son histoire</a></li>

<li><a href="#" class="underline">Son équipe</a></li>

<li><a href="#" class="underline">La Roche de Glun</a></li>

</ul>

</dd>

</dl>

<dl class="dropdown">

<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">SES SERVICES</dt>

<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">

<ul>

<li><a href="#" class="underline">Vous êtes propriétaire</a></li>

<li><a href="#" class="underline">Vous cherchez un bien</a></li>

</ul>

</dd>

</dl>

<dl class="dropdown">

<dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)">CONTACT</dt>

<dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">

<ul>

<li><a href="#" class="underline">Plan d'accès</a></li>

<li><a href="#" class="underline">Nous contacter</a></li>

</ul>

</dd>

</dl>

<dl class="dropdown">

<dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)">INFORMATIONS</dt>

<dd id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)">

<ul>

<li><a href="#" class="underline">Liens utiles</a></li>

<li><a href="#" class="underline">Mentions légales</a></li>

<li><a href="#" class="underline">Accès réservé</a></li>

</ul>

</dd>

</dl>

<div style="clear:both" />

Nulla ultrices, dolor quis ullamcorper eleifend, pede tortor dignissim lorem, in condimentum diam mi ut risus. Vivamus ligula dui, viverra et, suscipit ac, scelerisque adipiscing, orci. Sed a nisi. Donec dui. Maecenas erat mauris, molestie nec, suscipit vel, scelerisque sit amet, tortor. Nunc egestas aliquam sapien. Proin ante pede, placerat id, eleifend id, pellentesque posuere, odio. Nulla facilisi. Curabitur tincidunt convallis sapien. Maecenas vehicula sodales neque. Vivamus sed elit vitae dui vulputate molestie. Nulla facilisi. Praesent molestie risus ut odio.

</body>

</html>

Si vous avez quelques indices du pourquoi mon image ne s'affiche pas, n'hésitez pas à m'expliquer ;)

Mille merci !

Lien vers le commentaire
Partager sur d’autres sites

[parenthèse]

Merci pour ta remarque petit ourson...

Il est vrai que j'ai bêtement répété ce qu'on m'a dit ;) j'avoue qu'une petite définition de l'Ajax serait

la bienvenue car je ne sais même pas ce qui différencie clairement le javascript de l'Ajax ;-b

[/parenthèse]

Lien vers le commentaire
Partager sur d’autres sites

Oui, petit abus de langage de ma part dans la discussion à laquelle Patricia fait référence.

À l'image de DHTML ou de LAMP, AJAX n'est pas une technologie en elle-même, mais un terme qui évoque l'utilisation conjointe d'un ensemble de technologies libres couramment utilisées sur le Web :

* HTML (ou XHTML) pour la structure sémantique des informations ;

* CSS pour la présentation des informations ;

* DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée ;

* l'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web.

* XML.

Source : Wikipedia

Lien vers le commentaire
Partager sur d’autres sites

Sinon, lorsque je te parlais d'uploader le fichier, je voulais dire "sur ton serveur", qu'on puisse tester en conditions réelles ;)

Là, je veux bien mais je n'ai pas les images. Et comme cela semble être un souci de positionnement d'images ...

PS : lorsque tu postes des codes longs, il vaut mieux utiliser la balise CODEBOX, qui a une hauteur fixe. j'ai édité ton premier message en ce sens.

Lien vers le commentaire
Partager sur d’autres sites

Bonjour à tous,

Alors voilà, j'ai testé tout plein de choses... j'ai aussi fait une image avec un fond transparent (en png)

mais j'ai toujours un soucis lié à la forme de mon bouton (bas arrondis)... il faudrait que le déroulant soit

sous le bouton or là il est au dessus... et ce n'est pas ce que j'attendais.

Comment faire pour gérer les niveaux ?

Je cherche de mon côté mais si vous avez une piste... encore merci pour votre aide ;)

Lien vers le commentaire
Partager sur d’autres sites

Hello Karnabal ;)

En fait je me suis mal exprimé...

quand je parle de niveau ce n'est pas par rapport à la page (haut / bas/ droite / gauche)

mais par rapport à l'image du bouton (dessous / dessus)

Mais peut-être que j'en demande trop là ... :P

++

Ehm, je viens de me relire et ce n'est pas plus évident à comprendre lol...

.... imagine l'effet déroulant dans un bloc en dessous du bloc de l'image du bouton...

donc le bouton chevauche le déroulant au lieu de le cacher...

(c'est plus visuel comme exemple et plus clair pour moi là ;)

Modifié par Webdesigneuse
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...