Jump to content
Sign in to follow this  
Webdesigneuse

Une navigation en Ajax

Recommended Posts

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 !

Share this post


Link to post
Share on other sites

Pourrais-tu uploader ta page de tests ? Ça serait plus simple pour t'aider ;)

Share this post


Link to post
Share on other sites

Pour information, ce n'est pas de l'ajax mai un simple menu en javascript sans interaction client/serveur.

Share this post


Link to post
Share on other 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]

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other sites

Ce que je peux déjà voir, c'est que tu n'as pas de répertoire "images" dans ton répertoire "navigation".

Share this post


Link to post
Share on other sites

Dans ce cas, c'est juste que tu appelles "fds_btn.jpeg" dans ton CSS. Enlève le "e", ça passera tout de suite mieux ;)

Ensuite, ajoute ce code à ton .dropdown dt :

text-align: center;
padding-top: 20px;
height: 38px;

Share this post


Link to post
Share on other sites

mdr ! j'ai vraiment besoin de vacances moi !! :blush:

un grand merci captain ! je cours essayer...

Share this post


Link to post
Share on other 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 ;)

Share this post


Link to post
Share on other sites

Tu peux définir un margin-top au bloc que tu veux descendre.

Share this post


Link to post
Share on other 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à ;)

Edited by Webdesigneuse

Share this post


Link to post
Share on other sites

Il faut que tu ajoutes ceci à tes dt :

position: relative;
z-index: 300

puis que tu ajoutes du padding à tes dd.

Share this post


Link to post
Share on other sites

Hello !

Merci Cap'tain ;) voilà qui m'aide bien... j'ai donc modifié, il me reste à caler le déroulant pmaintenant... je devrais y arriver ;)

Et encore merci à tous !!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...