Sujet fermé
Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

[Résolu] Menu Manager : expand au hover
#1

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.9.4.2
#~ Url du site :
#~ Hébergeur / Soft : easyPhp
#~ Informations Système :
#~ CMS Version
#~ 1.9.4.2
#~ Installed Modules
#~ CMSMailer
#~ 2.0.1
#~ FileManager
#~ 1.1.0
#~ MenuManager
#~ 1.7.6
#~ ModuleManager
#~ 1.4.2
#~ News
#~ 2.11.3
#~ nuSOAP
#~ 1.0.2
#~ Printing
#~ 1.1.2
#~ Search
#~ 1.6.10
#~ ThemeManager
#~ 1.1.4
#~ TinyMCE
#~ 2.8.4
#~ CGExtensions
#~ 1.25.4
#~ CGFeedMaker
#~ 1.0.14
#~ CGSimpleSmarty
#~ 1.4.8
#~ Comments
#~ 1.9.2
#~ Captcha
#~ 0.4.3
#~ SiteMapMadeSimple
#~ 1.2.2
#~ Guestbook
#~ 1.3.2
#~ Gallery
#~ 1.4.4
#~ Config Information
#~ php_memory_limit:
#~ process_whole_template:
#~ false
#~ output_compression:
#~ false
#~ max_upload_size:
#~ 2000000
#~ default_upload_permission:
#~ 664
#~ url_rewriting:
#~ none
#~ page_extension:
#~ query_var:
#~ page
#~ image_manipulation_prog:
#~ GD
#~ auto_alias_content:
#~ true
#~ locale:
#~ default_encoding:
#~ utf-8
#~ admin_encoding:
#~ utf-8
#~ set_names:
#~ true
#~ debug:
#~ false
#~ root_url:
#~ http://127.0.0.1:8888/whynotyou
#~ ssl_url:
#~ https://127.0.0.1:8888/whynotyou
#~ root_path:
#~ E:\Mes travaux\Sites\whynotyou.fr_v3_dev (0777)
#~ previews_path:
#~ E:\Mes travaux\Sites\whynotyou.fr_v3_dev\tmp\cache (0777)
#~ uploads_path:
#~ E:\Mes travaux\Sites\whynotyou.fr_v3_dev\uploads (0777)
#~ uploads_url:
#~ http://127.0.0.1:8888/whynotyou/uploads
#~ image_uploads_path:
#~ E:\Mes travaux\Sites\whynotyou.fr_v3_dev\uploads\images (0777)
#~ image_uploads_url:
#~ http://127.0.0.1:8888/whynotyou/uploads/images
#~ ssl_uploads_url:
#~ /uploads
#~ use_smarty_php_tags:
#~ false
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Hello,

Je refais complètement mon site et je voulais poser une petite question:

Je souhaite me servir de menumanager pour faire un menu vertical.
J'aimerais que lorsque je passe la souris sur un bouton pointant
vers une page parente, les enfants glissent dessous en décalant le reste
du menu vers le bas.

Exemple

Parent 1
Parent 2
Parent 3

Je passe la souris sur le 1

Parent 1
Enfant 1
Enfant 2
Parent 2
Parent 3

Etc..

Par contre le menu doit rester quand même compris dans une certaine dimension que je définierai en fonction
des parents et enfants.

Est-ce que c'est faisable ou il faudra obligatoirement cliquer sur une page parente pour que les enfants se déroulent?

Merci
#2

installe une nouvelle version en local pour tester et regarde toi même les pages.

il existe des solutions toutes prêtes Smile
#3

Hello,
Je développe justement en local.
De solution toute prête parles-tu ?
#4

Ca peut être entièrement réalisable en CSS.

En CSS2, tu auras un décalage vers le bas sans animation. En CSS3, et pour peu que ton navigateur le supporte, tu pourras en plus rajouter une animation.
Éventuellement un amélioration progressive en Javascript pour les navigateurs ne supportant pas les animations CSS3.

En CSS tout se fait grâce à la propriété :hover, tu définies une classe "parent" sur un parent... Et tu définis les éléments de niveau 2 en "display:none".
Au :hover sur ton élément parent tu fais çà :
li.parent:hover > ul { display : block ; }

Donc au survol ton menu enfant apparaitra.

J'ai fais court, très succinct mais si tu as besoin plus d'infos reviens ici :-)
#5

Hello,

Je m'imaginait bien que ça se faisait un CSS, j'ai un peu d'expérience la dedans,
mais j'étais pas sur de la manière de m'y prendre exactement.
Merci de tes aiguillages.

Je pensais justement regarder au niveau du Css3, je suis pas encore très famillier..
Qu'est-ce que ça apporte niveau animation?
J'ai un eu fait des recherches sur le support, il semble que ça soit pas encore génial
pour IE (Font chier >.<) même 8,9 ..

Par contre au niveau du Javascript pour contrer justement ce non support, si tu veux bien j'aimerais
bien plus d'info.. je ne suis pas vraiment famillier de cette méthode.

Merci beaucoup!

Samy
#6

Le cms te permet d'incorporer 99% des menus disponibles sur le web.
Trouves-en un qui te plait, donne-nous le code html et la css et on t'aidera pour l'incorporer.
Des exemples ici : http://www.cssplay.co.uk/menus/index.html
et ici : http://www.dynamicdrive.com/dynamicindex1/
#7

hello,

Je souhaiterai quelque chose du genre fonctionnalité,
http://www.dynamicdrive.com/dynamicindex...-urban.htm
bien sur j'adapterai le design..

Je souhaite aussi me servir du css3 par exemple pour decaller de facon un peu fluide
mon "texte" bouton, ou ajouter une luminescence.
#8

Le même style de menu sans JavaScript :
css 3
http://www.cssplay.co.uk/menus/css3-imag...tical.html
http://www.cssplay.co.uk/menus/css3-slideout.html

css 2
http://www.cssplay.co.uk/menus/dl-slide.html
http://www.cssplay.co.uk/menus/concertina-slide.html
http://www.cssplay.co.uk/menus/current-slide.html
http://www.cssplay.co.uk/menus/vertical-concertina.html
http://www.cssplay.co.uk/menus/concertina-scroll.html
http://www.cssplay.co.uk/menus/slide_fly.html
#9

Oui quelque chose dans ces goûts là.. Smile
#10

Lequel s'approche le plus ?
#11

Salut,

http://www.cssplay.co.uk/menus/dl-slide.html

Celui là, sauf que j'aimerais animer à la CSS3 (plus fluide)
si c'est pas trop problématique pour IE >.<

Ou au pire CSS2 pour IE et CSS3 pour les autres.
#12

Je peux t'aider à intégrer le code de ce menu.
Code :
<div id="positioner">

<div id="holder">

<dl class="menu">

    <dt>

        <a href="#url">Home</a>

    </dt>

</dl>

<dl class="menu">

    <dt>

        <a href="#url">Products</a>

    </dt>

    <dd>

        <a href="#url">Digital Cameras</a>

        <a href="#url">Monopods &amp; Tripods</a>

        <a href="#url">Flashguns &amp; Reflectors</a>

        <a class="last1" href="#url">Telephoto Lenses</a>

    </dd>

</dl>

<dl class="menu">

    <dt>

        <a href="#url">Services</a>

    </dt>

    <dd>

        <a href="#url">Enlarging</a>

        <a href="#url">Framing &amp; Restoring</a>

        <a href="#url">Printing</a>

        <a href="#url">Copying</a>

        <a href="#url">Sepia Toning</a>

    </dd>

</dl>

<dl class="menu">

    <dt>

        <a href="#url">Outlets</a>

    </dt>

    <dd>

        <a href="#url">London</a>

        <a href="#url">Gloucestershire</a>

        <a href="#url">East Midlands</a>

        <a class="last1" href="#url">Glasgow</a>

    </dd>

</dl>

<dl class="menu">

    <dt>

        <a href="#url">Terms</a>

    </dt>

    <dd>

        <a href="#url">Payment Methods</a>

        <a href="#url">Conditions of Sale</a>

        <a class="last2" href="#url">Privacy Policy</a>

    </dd>

</dl>

</div>

</div>
Et la css :
Code :
/* ================================================================

This copyright notice must be untouched at all times.



The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menus/dl-slide.html

Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any

way to fit your requirements.

=================================================================== */



a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}



#positioner {position:relative; width:160px; height:160px; margin-left:10px;z-index:100;}

#holder {position:absolute; width:150px; background:url(dl-slide/tab_0.gif) repeat-x left top; overflow:hidden; border:5px solid #000;}

dl.menu {width:300px; float:left; margin:-32700px -150px 0 0; background:url(dl-slide/tab_0.gif) no-repeat left bottom;}

dl.menu a {display:block; height:30px; color:#fff; font:normal 11px/28px verdana, sans-serif; text-decoration:none; text-align:center;}



dl.menu dt {float:left; padding:0; margin:32700px 0 0 0; position:relative; z-index:50;}

dl.menu dt a {background:transparent; width:150px;}

dl.menu dt a:hover,

dl.menu dt a:focus,

dl.menu dt a:active

{margin-right:1px; background:url(dl-slide/tab_1.gif) no-repeat left top;}



dl.menu dd {float:left; padding:30px 0 0 0; margin:-30px 0 0 0; position:relative; z-index:10; background:url(dl-slide/tab_1.gif) no-repeat left top;}

dl.menu dd a {background:#666;width:150px;}

dl.menu dd a.last1 {border-bottom:30px solid #666;}

dl.menu dd a.last2 {border-bottom:60px solid #666;}



dl.menu dd a:hover,

dl.menu dd a:focus,

dl.menu dd a:active

{margin-right:1px; background:#ccc; color:#000;}
Pour ce qui est de modifier l'apparence, c'est ton job avec les css.

Si tu veux du sur-mesure, tu dois me donner le code html statique de ton menu.
Là, je pourrai t'aider à l'intégrer dans le menumanager pour le rendre dynamique.
#13

Merci infiniement de ton aide..
Si tu me le propose gentillement :

Code :
<ul id="menu">
  <li id="parent"><a href="" title="parent1">parent1</a></li>
    <li id="enfant"><a href="" title="enfant1">enfant1</a></li>
    <li id="enfant"><a href="" title="enfant2">enfant2</a></li>
  <li id="parent"><a href="" title="parent2">parent2</a></li>
...
</ul>
C'est ceci dont-tu parlais?
Merci, vraiment ! :-)
#14

Il est incorrect : plusieurs id identiques.
#15

Je vois pas le problème.. Si je veux appliquer un code css à tout les #enfants par exemple?
#16

Citation :Je vois pas le problème..

si tu vois pas de soucis, nous si.

un id en html se doit d'être unique, ce n'est donc pas une condition, c'est une obligation
#17

Ce que veut dire Bess, c'est que ton ID devrait être une classe : <li class="parent">
#18

Autre chose :
les li enfants ne devraient-ils pas être en second niveau :
Code :
<ul>
  <li>parent
    <ul>
      <li>enfant</li>
    </ul>
  </li>
  <li>parent2</li>
</ul>
De plus, quid de la page affichée (current) ? A-t-elle un comportement différent d'une page non sélectionnée ?
#19

bess a écrit :
Citation :Je vois pas le problème..

si tu vois pas de soucis, nous si.

un id en html se doit d'être unique, ce n'est donc pas une condition, c'est une obligation

Hello,

@BESS, je viens en effet de me rendre compte que depuis mes débuts en html,j e confondais les 2.. J'avais
jamais vraiment saisi que l'id était unique et on jouait au niveau de la class.

Par contre j'ai l'impression (j'espère me tromper) que le ton était légèrement agressif.. Que t'ai-je donc fait? :/

@Jean le Chauve. Merci, en effet, c'est vrai que ta proposition est bien plus convenable et mea culpa pour les id.

Donc :

Code :
<ul id=menu>
  <li id="parent1" class="parent"><a href="" title="parent1">parent1</a></li>
    <ul id=menu_enfantl>
      <li class="enfant" id="enfant1"><a href="" title="enfant1">enfant1</a></li>
    </ul>
  </li>
  <li id="parent2" class="parent"><a href="" title="parent2">parent2</a></li>
</ul>

Au niveau de la page selectionné, oui je pense je vais surement faire varier un peu le style
du bouton pour une page active.

Merci d'avance !
#20

Citation :Par contre j'ai l'impression (j'espère me tromper) que le ton était légèrement agressif..

pas agressif, mais je tiens à marquer fermement ce que certains prennent trop a la légère comme les normes Xhtml, CSS & co

tu ne savais pas, soit. Mais imagine toi bien que certaine personnes n'hésitent pas à cracher sur les normes et s'étonnent ensuite que ca ne marche pas (ou pas bien). Or, vu que c'est pas toi qui va coder mais Jean le Chauve, je pars du principe qu'il faut être clair et factuel : attention, une norme ca ne se contourne pas en informatique, ca se respecte.

donc non : pas agressif Smile
#21

Hello,

Je comprends ton point de vue, j'essaye vraiment de faire des choses propres dans la limite de mes moyens
et des problèmes rencontrés notamment avec les navigateurs.
Donc comme déjà dit à Jean le Chauve, meaculpa, je me suis fourvoyé pendant pas mal d'années en html.

Par contre, j'ai appris ça comme j'ai pu, j'ai quelques connaissances dans le web mais je ne suis pas dans ce milieu et je fais ça que de temps en temps à but personnel je dirais.

Voilou, je préférais mettre les choses un peu plus au clair parce que le ton qui se dégageait de ta phrase ne me semblait pas trop "amical".
#22

pas de soucis samli. Encore une fois, toi :

Citation :tu ne savais pas,

donc le ton sec ne t'es pas destiné. Personne ici n'a commencé sa vie avec un diplôme d'ingé développeur web, tu te formes, tu te trompes, c'est naturel et je me vois mal te reprocher cela puisqu'il y a l'effort de ta part de t'améliorer.

maintenant je suis et resterais toujours méfiant envers les mauvais ouvriers du net, et régulièrement nous en avons un ou deux qui débarque et débarqueront encore Big Grin

PS : eux par contre pourront se sentir clairement visé :lol:
#23

Pas de soucis Wink
#24

Tu as vraiment besoin d'une id ET d'une classe ???
Montre-moi ta css (uniquement celle du menu, bien entendu).
#25

Non non, ca ira sans class, je ferais un truc du genre
Code :
#menu li {}
#menu ul {}


Le CSS, je l'ai pas encore écrit. Il est dans ma tête.. Big Grin
Sujet fermé


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)