> Tous les forums > Forum des Webmasters
 Menu déroulant en cssSujet résolu
Ajouter un message à la discussion
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]
fleuretta
  Posté le 06/05/2010 @ 22:58 
Aller en bas de la page 
Astucienne

Vous me reconnaissez?

J'ai besoin de faire un menu déroulant pour mettre dans ma colonne de gauche et je dois le faire en css.

J'ai trouvé des tutos sur le web dont certains j'ai laissé tombé car je veux que le menu se déroule en dessous et pas sur le côté.

Je recherche le site où on retrouve je ne sais plus combien de menu de toutes les sortes. Je l'avais dans mes favoris mais comme je ne sais plus comment il s'apelle je ne le retrouve pas.

Je sais que Dreamer a le lien de ce fameux site donc si tu passes dans le coin...

Merci

Publicité
Dreamer
 Posté le 06/05/2010 à 23:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Ici ??

elle
 Posté le 06/05/2010 à 23:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Dreamer
 Posté le 06/05/2010 à 23:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

http://www.cssplay.co.uk/

Prom's !!!

elle
 Posté le 06/05/2010 à 23:10 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

C'est donc ta faute si mon message ne voulait pas partir!

fleuretta
 Posté le 06/05/2010 à 23:10 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Coudon! C'était presqu'une course contre la montre!

C'est en plein ça que je cherchais.

Merci à vous deux!

Dreamer
 Posté le 06/05/2010 à 23:26 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

C'est donc ta faute si mon message ne voulait pas partir!

fleuretta
 Posté le 06/05/2010 à 23:42 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Ouin ben ça ben l'air qu'ils n'ont pas encore fait un menu en css déroulant comme en javascript.

Moi je voulais le genre du p'tit + sur lequel on click et qui reste déroulé tant que l'on n'a pas recliqué dessus.

Si vous en connaissez un gênez vous pas.

Je continue de chercher.

Merci

elle
 Posté le 06/05/2010 à 23:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Sans JavaScript pantoute?



Modifié par elle le 06/05/2010 23:54
Publicité
elle
 Posté le 07/05/2010 à 00:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Sans JS, ça me surprendrait que ce soit possible (le clic n'étant pas pris en charge par le css).

Il y a ça, fonctionnel quand même sans JS : http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html



Modifié par elle le 07/05/2010 01:13
fleuretta
 Posté le 07/05/2010 à 01:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Merci!

Je suis allée voir et il y a du Javascript dans le code et je ne pense pas que je puisse l'utiliser.

Va falloir que je m'informe à Prestashop.

elle
 Posté le 07/05/2010 à 01:26 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Il n'y a pas différents modèles de menus disponibles dans Prestashop?

fleuretta
 Posté le 07/05/2010 à 02:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Le menu de gauche est un menu déroulant ce qui me conviendrait parfaitement si je pouvais laisser les 3 catégories mères déroulées et les sous-catégories avec des p'tits +.

J'ai posé la question sur le forum afin de savoir si cela peut se faire en jouant dans le code à quelque part que je ne sais pas et j'attends une réponse. (si j'ai une réponse. Mettons que ce n'est pas la course contre la montre pour les réponses )

Je cherche cependant un autre moyen au cas où cela ne pourrait pas se faire alors j'avais pensé aux css mais ça ne marche pas.

On ne peux mettre du Javascript "externe" dans Prestashop car ça risquerait de foutre en l'air ben des affaires.

Je vais continuer de fouiller... on ne sait jamais "toudincou" que je trouverais quelque chose.

Dreamer
 Posté le 07/05/2010 à 06:30 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Et sous forme de plugin , cela existe-t-il ??

Normalement , tu peux insérer du js ......Ton js dans le dossier js et l'appel dans le fichier tpl .......Me semble en tout cas !!



Modifié par Dreamer le 07/05/2010 06:32
griggione
 Posté le 08/05/2010 à 17:42 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

Bonjour tous

Oupssss j'avais pas vu .......

Fleuretta tu veux un menu rien qu'en CSS comme ici par exemple: http://www.griggione.fr/ ou j'ai pas compris.

Tu demandes et tu reçois de suite

elle
 Posté le 08/05/2010 à 20:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Ben non, t'as pas compris : elle a dit « au clic », la madame, pas au survol...

fleuretta
 Posté le 08/05/2010 à 22:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Dreamer a écrit :

Et sous forme de plugin , cela existe-t-il ??

Normalement , tu peux insérer du js ......Ton js dans le dossier js et l'appel dans le fichier tpl .......Me semble en tout cas !!

Dreamer

Plugin? Pour Prestashop ce sont des modules et je n'en ai pas vu avec le style de menu que j'aimerais.

Concernant le js, on m'a dit que l'on ne pouvait pas ajouter du js même venant d'une page externe.

Publicité
fleuretta
 Posté le 08/05/2010 à 23:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Comme une image vaut mille mots voilà mon affaire.

Le menu de gauche de Prestashop est un menu déroulant et moi j'ai 3 catégories mères qui sont Cuisiner, Recevoir, Offrir.

Lorsque l'on arrive sur le site c'est ça qu'on voit

Moi j'aimerais que ce soit comme ça c'est à dire d'avoir les catégories mères déroulées mais pas les sous-catégories

Vous avez une solution pour moi?

Griggione, Elle a raison... c'est au click le menu, pas au survol.

Merci

Dreamer
 Posté le 08/05/2010 à 23:23 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

C'est un menu tree en js ??

elle
 Posté le 08/05/2010 à 23:29 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

[HS] Fleuretta, tu saurais pas où on peut trouver une lèche-frites avec une grille, comme celles qui sont habituellement fournies à l'achat d'une cuisinière avec four?

Samuel dit qu'il n'arrive pas à en trouver... [/HS]

fleuretta
 Posté le 08/05/2010 à 23:29 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Oui

Dreamer
 Posté le 08/05/2010 à 23:30 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Re-moi

Avec la librairie jquery :http://jquery.bassistance.de/treeview/demo/ , tu remarqueras que certains sont déjà ouverts ......

Dreamer
 Posté le 08/05/2010 à 23:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

fleuretta a écrit :

Oui

A qui ??

fleuretta
 Posté le 08/05/2010 à 23:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

elle a écrit :

[HS] Fleuretta, tu saurais pas où on peut trouver une lèche-frites avec une grille, comme celles qui sont habituellement fournies à l'achat d'une cuisinière avec four?

Samuel dit qu'il n'arrive pas à en trouver... [/HS]

Faudrait que je regarde mes catalogues mais chez Sears peut-être?

Si tu pouvais me montrer une image de ce que tu veux ce serait plus facile.

fleuretta
 Posté le 08/05/2010 à 23:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

Dreamer a écrit :
fleuretta a écrit :

Oui

A qui ??

À toi!

Je n'avais pas vu le message de Elle.

Je suis allée voir ton lien et selon ça, ça se fait mais je n'ai aucune idée du comment. Je cherche le code dans Presta et je viens vous montrer ça.

L'espoir renaît!

fleuretta
 Posté le 09/05/2010 à 00:04 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

J'ai trouvé la page du fameux menu de gauche sauf que c'est du chinois pour moi.

Si je veux que les 3 catégories mères restent déroulées mais pas les sous-catégories, vous savez ce que je dois changer dans le code? (Naturellement si on peut le faire )

//animate the opening of the branch (span.grower jQueryElement)
function openBranch(jQueryElement, noAnimation) {
jQueryElement.addClass('OPEN').removeClass('CLOSE');
if(noAnimation)
jQueryElement.parent().find('ul:first').show();
else
jQueryElement.parent().find('ul:first').slideDown();
}
//animate the closing of the branch (span.grower jQueryElement)
function closeBranch(jQueryElement, noAnimation) {
jQueryElement.addClass('CLOSE').removeClass('OPEN');
if(noAnimation)
jQueryElement.parent().find('ul:first').hide();
else
jQueryElement.parent().find('ul:first').slideUp();
}

//animate the closing or opening of the branch (ul jQueryElement)
function toggleBranch(jQueryElement, noAnimation) {
if(jQueryElement.hasClass('OPEN'))
closeBranch(jQueryElement, noAnimation);
else
openBranch(jQueryElement, noAnimation);
}

//when the page is loaded...
$(document).ready(function () {
//to do not execute this script as much as it's called...
if(!$('ul.tree.dhtml').hasClass('dynamized'))
{
//add growers to each ul.tree elements
$('ul.tree.dhtml ul').prev().before("<span class='grower OPEN'> </span>");

//dynamically add the '.last' class on each last item of a branch
$('ul.tree.dhtml ul li:last-child, ul.tree.dhtml li:last-child').addClass('last');

//collapse every expanded branch
$('ul.tree.dhtml span.grower.OPEN').addClass('CLOSE').removeClass('OPEN').parent().find('ul:first').hide();
$('ul.tree.dhtml').show();

//open the tree for the selected branch
$('ul.tree.dhtml .selected').parents().each( function() {
if ($(this).is('ul'))
toggleBranch($(this).prev().prev(), true);
});
toggleBranch( $('ul.tree.dhtml .selected').prev(), true);

//add a fonction on clicks on growers
$('ul.tree.dhtml span.grower').click(function(){
toggleBranch($(this));
});
//mark this 'ul.tree' elements as already 'dynamized'
$('ul.tree.dhtml').addClass('dynamized');

$('ul.tree.dhtml').removeClass('dhtml');
}
});

Un gros merci!

Publicité
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
0 €Chargeur à induction Samsung EP-P1300B gratuit (via ODR)
Valable jusqu'au 01 Août

Amazon propose actuellement le chargeur à induction Samsung EP-P1300B à 20 €. Or Samsung rembourse actuellement 20 € pour l'achat de ce chargeur qui vous reviendra donc à 0 € après remboursement.  Le chargeur à induction a été pensé de façon à fonctionner avec les coques et étuis de protection.

Charge rapide compatible avec les Galaxy S21, S21+, S21 ultra, Note20, Note20 ultra, S20, S20+, S20 ultra, Z Fold2, Z Flip, Note 10+, Note 10, S10e, S10, S10+, S10 5G, Note9, S9, S9+, Note8, S8, S8+, S7, S7 Edge, Note 5, S6 Edge+ & Apple iPhone 11 pro, 11, SE, XS Max, XS, XR, 8, 8 Plus / Compatible Qi avec Galaxy S6, S6 Edge et les appareils certifiés Qi (Galaxy Buds live, Buds+).


> Voir l'offre
24,86 €Souris Logitech M330 Silent Plus à 24,86 €
Valable jusqu'au 01 Août

Amazon fait une promotion sur la souris Logitech M330 Silent Plus qui passe à 24,86 €. On trouve cette souris sans fil et très silencieuse (clic sans bruit) ailleurs à partir de 32 €.


> Voir l'offre
-10 €10 € de réduction à partir de 99 € chez Cdiscount avec le code 10EUROS
Valable jusqu'au 02 Août

Cdiscount propose actuellement 10 € de réduction à partir de 99 € d'achats. Pour profiter de l'offre, utilisez le code promo 10EUROS.


> Voir l'offre

Sujets relatifs
Target dans menu déroulant "option value=...." html
Menu déroulant devenu inactif
menu deroulant vertical
centrer mon menu deroulant
aide pour menu déroulant
menu déroulant pas en place!
menu déroulant. : décalage sous-menu
menu déroulant - petit soucis
souci d'include et/ou de menu déroulant
menu déroulant récalcitrant
Plus de sujets relatifs à Menu déroulant en css
 > Tous les forums > Forum Forum des Webmasters