Menu Jquery

Résolu/Fermé

Le_médiamaticien Messages postés 8 Date d'inscription jeudi 9 août 2012 Statut Membre Dernière intervention 22 août 2012 - Modifié par Le_médiamaticien le 15/08/2012 à 15:44
Le_médiamaticien Messages postés 8 Date d'inscription jeudi 9 août 2012 Statut Membre Dernière intervention 22 août 2012 - 22 août 2012 à 10:10

Bonjour,

Je voudrais savoir s'il est possible de faire le menu auquel je pense en Jquery.
A savoir un menu qui aurait les titres de ses différentes rubriques abrégés et qui lorsque l'on passerait dessus s'agrandirait et ferait ainsi apparaître les titres en entier.

Je crois savoir comment faire pour que les rubriques s'agrandissent mais j'ai besoins de votre aide pour le reste svp.

A voir également:

Menu Jquery
Menu déroulant excel - Guide
Menu démarrer windows 11 - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide
Menu contextuel windows 11 - Guide

4 réponses

Réponse 1 / 4

fredconv Messages postés 122 Date d'inscription mardi 25 août 2009 Statut Membre Dernière intervention 4 décembre 2017 38
21 août 2012 à 17:22

Salut

Pour cela tu pourrais te passer de jquery et le faire uniquement en css:

.menu_item{
width:200px;
overflow:hidden
}

.menu_item:hover{
width:400px
}

est ce que ce genre de solution irait ?

Réponse 2 / 4

Le_médiamaticien Messages postés 8 Date d'inscription jeudi 9 août 2012 Statut Membre Dernière intervention 22 août 2012
21 août 2012 à 17:35

Salut

Tout d'abord merci pour ta réponse.

C'est vrai que c'est une bonne solution, mais j'ai pensé au Jquery car je voulais avoir un effet d'animation lors du survole

Réponse 3 / 4

fredconv Messages postés 122 Date d'inscription mardi 25 août 2009 Statut Membre Dernière intervention 4 décembre 2017 38
22 août 2012 à 09:57

salut :)

pour l animation. en effet jquery te permet de faire cela. (mais ca peut etre fait avec uniquement de la css3 (pas css2)

voici un exemple avec juste de la css (malheureusement IE pas compatible.. ):

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
div
{
width:100px;
height:80px;
background:red;
overflow:hidden;
transition:all 0.5s ;
-moz-transition:all 0.5s ; /* Firefox 4 */
-webkit-transition:all 0.5s ; /* Safari and Chrome */
-o-transition:all 0.5s ; /* Opera */
}
h1{white-space:nowrap}
div:hover
{
width:400px;
height:200px;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div>
<h1>Voici un titre tres long</h1>
<p>Nunc sodales ante sit amet risus rhoncus sit amet tempus nunc bibendum. Etiam nec enim id erat volutpat vestibulum. Pellentesque et metus erat, in consectetur magna.</p>
</div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

sinon en jquery (+ court):

 $(".div_a_survoler").mouseover(function(){ $(this).animate({height:'300px'},'fast') });
 $(".div_a_survoler").mouseout(function(){ $(this).animate({height:'100px'},0) });

peut etre quelques ajustement a faire ...

++

Réponse 4 / 4

Le_médiamaticien Messages postés 8 Date d'inscription jeudi 9 août 2012 Statut Membre Dernière intervention 22 août 2012
22 août 2012 à 10:10

C'est plus ou moins ce que j'avais imaginé, le jquery me parait être la meilleurs solution.

Merci beaucoup d'avoir pris du temps pour me répondre !
a+

Discussions similaires

les entrées et les sortées

mon ordi marque press the esc key for startup menu

Accéder au menu Advanced Bios PC portable HP

Déblocage du mode hôtel Philips 20HF5234/10

Discussions similaires

Newsletters