menu impossible à trouver

Version imprimable

06/11/2010, 02h19
flashwolf

menu impossible à trouver

Bonjour la communauté !

Je cherche à placer sur mon site en bas de page un menu horizontal
avec slide qui remonte ...

en gros ceci mais qui ne soit pas en flash
http://www.adriantnt.com/products/ta...age=hotscripts

99,99 % des scripts que je vois ont des des slides qui descendent
que ce soit sur hotscript, en dhtml, en css .... je ne trouve rien

la seule chose que je trouve c'est du flash mais bon c'est pas le but ...

qq aurait une piste de travail car la je suis paumé.
j'ai épuisé les 15 pages de résultats de google en tapant "menu horizontal slide up" " menu horizontal avec slide qui remonte" je ne trouve rien mais quand je dis rien c'est rien, à croire que ce truc si simple en flash est impossible à faire en ajax, en dhtml ou en css ...

donc help
06/11/2010, 16h21
Bovino

Un élément HTML est positionné par rapport à son bord haut. Donc faire dérouler un élément vers le bas est assez simple : il suffit par exemple de modifier sa hauteur (propriété height).
En revanche, ça se complique pour le dérouler vers le haut, car il va falloir en plus le repositionner verticalement.

En plus, comme c'est un cas assez inhabituel d'utilisation (en général, les menus sont en haut de la page), ça explique que tu n'en trouve pas.
06/11/2010, 20h35
flashwolf

merci bovino
mais sais tu ou je pourrai trouver ce genre de chose ? etrange que personne ne donne même 1 exemple ...
je sens que je vais la mettre derriere l'oreille:)
07/11/2010, 11h59
Bovino

Citation:

Envoyé par flashwolf

mais sais tu ou je pourrai trouver ce genre de chose ?

Ben non, sinon, je te l'aurais dit :aie:
07/11/2010, 13h48
flashwolf

bon je commence à rouler:)
08/11/2010, 07h38
vermine

Pas trop vite alors, c'est la période des contrôles

Bonjour,

On m'a posé la question avec Mootools et pour confirmer les dires de Bovino, le problème consiste à repositionner les éléments de manière parfaite vers le haut. Vers le haut mais sans pousser les éléments qui sont au dessus du menu (la page peut s'aggrandir vers le bas, mais pas vers le haut :aie:). Ce qui rend la gestion compliquée et surtout unique à chaque page. :(

Bon courage. :)

Je te donnes une solution, a toi d'adapter ton CSS, mais le fonctionnement est bon sur IE7, IE8, FF et Chrome.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
	<head>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		<style type="text/css">
			body{
				margin:auto;
				width:900px;
			}
			.menu_principal { width: 200px; background-color: red; float:left; z-index:10;}
			.menu_secondaire { margin:0px; width: 200px; position: absolute; z-index:20; display:none; }
			.menu_secondaire ul { margin:0px; background-color: blue; }
		</style>
		<script>
		$(document).ready(function() {
			$(".menu_principal").click(function () {
				$(".menu_secondaire").hide();
				$(this).next(".menu_secondaire").css("left",$(this).offset().left);
				$(this).next(".menu_secondaire").css("top",$(this).offset().top-$(this).next(".menu_secondaire").height());
				$(this).next(".menu_secondaire").show("slide", { direction: "down" }, 1000);
			});
		});
		</script>
	</head>
	<body>
		<div style="height:300px;"></div>
		<div class="menu_principal">Menu principal 1</div>
		<div class="menu_secondaire">
			<ul>
				<li>Menu secondaire 1.1</li>
				<li>Menu secondaire 1.2</li>
				<li>Menu secondaire 1.3</li>
			</ul>
		</div>
		<div class="menu_principal">Menu principal 2</div>
		<div class="menu_secondaire">
			<ul>
				<li>Menu secondaire 2.1</li>
				<li>Menu secondaire 2.2</li>
				<li>Menu secondaire 2.3</li>
			</ul>
		</div>
	</body>
</html>

10/11/2010, 00h51
flashwolf

merci je me lance ca a l'air de fonctionner
merci la communauté :)