Menu déroulant

Bonjour,

Je pose ma question ici, ne sachant pas s'il s'agit de CSS ou de Javascript/Jquery.

Je suis occupée sur un site qui requiers un menu vertical en mode desktop, mais horizontal déroulant en responsive. Et il faut impérativement que la mise en page lorsque le menu se déroule reste la même que lorsqu'il est affiché verticalement en desktop. Comme ceci .

Idéalement, je cherche aussi un moyen de placer la fonction de recherche du site à côté de ce menu lorsqu'il est en responsive, sachant qu'à la base, il est dans le header et que cette navigation ci est dans un autre bloc (une navigation, elle même dans une section) et de faire en sorte que le input text soit caché et qu'il apparaisse sous le bouton lorsqu'on clique dessus.

Désolé, c'est peut être beaucoup pour un message (ne m'en veuillez pas, je suis paumée et il me reste peu de temps ) Je précise que je n'y connais strictement rien en Javascript (il me cause bien des soucis d'ailleurs concernant d'autres points...) Donc si vous pouviez un peu m'aiguiller sur le chemin à prendre, ce serait sympa

Merci d'avance et bonne soirée.

Edit : Je viens de me rendre compte que j'aurais pu poster dans "Responsive", autant pour moi, sorry !!
Modifié par bunnyjenny (05 Jul 2014 - 18:43)

Je te conseille de faire comme moi sur mon site (lightwolf-studios.com) tu inclus Bootstrap. Avec quelques classes tu peux avoir un menu responsive (afficher en grand écran et cacher/cliquer pour dérouler en petit écran).

Informations ici : http://getbootstrap.com/components/#navbar

Merci pour ta réponse. J'avais déjà télécharger Bootstrap. J'ai vu sur leur site la navbar "static top", qui correspondait assez à ce que je recherche. Mais impossible de mettre la main sur le code dans les fichiers téléchargés (pourtant j'ai pris le second "boostrap source")... Je vais encore regarder, au cas où mes yeux auraient été fatigués à ce moment là .

Sinon, tu as une possible solution pour la barre de recherche qui doit se trouver à côté, mais qui en desktop est dans un tout autre bloc ? A part en créeant un second bloc de recherche (ce qui alourdis un peu je trouve) placé dans le bloc de la navigation et caché puis affiché selon l'écran...

Edit : Autant pour moi, je devais être fatiguée quand j'ai cherché, j'ai trouvé le code pour le static top !
Modifié par bunnyjenny (06 Jul 2014 - 22:12)

(Désolé du double post...)

Merci pour ton conseil, j'ai donc bien trouvé le code static et après avoir passé la matinée à l'analyser et à reprendre le css de ce code dans le css Bootstrap, j'ai enfin réussi à le faire ce menu déroulant

Par contre, je n'ai pas encore trouvé de solution pour mon bloc de recherche Une idée ?

Edit du 9/07 : Bon, finalement il y a eu un changement dans le projet, ils veulent un autre type de menu, et de la nouvelle manière, je peux inclure ma barre de recherche sans problème. Merci encore.

C'est résolu (Mais comme j'édite, je ne peux apparement pas l'indiquer )
Modifié par bunnyjenny (09 Jul 2014 - 12:40)