Aller au contenu

Une navigation en Ajax

Webdesigneuse

Par Webdesigneuse
dans AjaX et JavaScript

 Partager

Sujets conseillés

Webdesigneuse

Webdesigneuse

Posté
Posté

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 !

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté

[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]

karnabal

karnabal

Posté
Posté

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

captain_torche

captain_torche

Posté
Posté

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.

captain_torche

captain_torche

Posté
Posté

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;

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté

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 ;)

karnabal

karnabal

Posté
Posté

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

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté (modifié)

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
Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté

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 !!

Veuillez vous connecter pour commenter

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



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...