https://cacauet.org/wiki/index.php?action=history&feed=atom&title=CSS_menus_desplegables 2026-04-04T10:24:00Z Historial de revisió per a aquesta pàgina del wiki MediaWiki 1.34.0 https://cacauet.org/wiki/index.php?title=CSS_menus_desplegables&diff=1172&oldid=prev 2012-07-23T21:30:25Z

<p></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="ca"> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Versió més antiga</td> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revisió del 21:30, 23 jul 2012</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Línia 1:</td> <td colspan="2" class="diff-lineno">Línia 1:</td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Utilitzant CSS es poden realitzar menús desplegables. Pots veure el comportament amb les imatges a continuació:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Utilitzant CSS es poden realitzar menús desplegables. Pots veure el comportament amb les imatges a continuació:</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Imatge:<del class="diffchange diffchange-inline">menucss1</del>.png]]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Imatge:<ins class="diffchange diffchange-inline">menuscss1</ins>.png<ins class="diffchange diffchange-inline">|500px</ins>]]</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Imatge:<del class="diffchange diffchange-inline">menucss2</del>.png]]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Imatge:<ins class="diffchange diffchange-inline">menuscss2</ins>.png<ins class="diffchange diffchange-inline">|500px</ins>]]</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>...òbviament es tracta de que esbrinis com fer-ho. Algunes pistes sobre les propietats CSS a utilitzar:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>...òbviament es tracta de que esbrinis com fer-ho. Algunes pistes sobre les propietats CSS a utilitzar:</div></td></tr> </table>

Enric https://cacauet.org/wiki/index.php?title=CSS_menus_desplegables&diff=1169&oldid=prev 2012-07-23T21:28:03Z

<p>Es crea la pàgina amb «Utilitzant CSS es poden realitzar menús desplegables. Pots veure el comportament amb les imatges a continuació: <a href="/wiki/index.php?title=Fitxer:Menucss1.png&amp;action=edit&amp;redlink=1" class="new" title="Fitxer:Menucss1.png (encara no existeix)">Imatge:menucss1.png</a> <a href="/wiki/index.php?title=Fitxer:Menucss2.png&amp;action=edit&amp;redlink=1" class="new" title="Fitxer:Menucss2.png (encara no existeix)">Imatge:menucss2.png</a> ...òb…».</p> <p><b>Pàgina nova</b></p><div>Utilitzant CSS es poden realitzar menús desplegables. Pots veure el comportament amb les imatges a continuació:<br /> <br /> [[Imatge:menucss1.png]]<br /> [[Imatge:menucss2.png]]<br /> <br /> ...òbviament es tracta de que esbrinis com fer-ho. Algunes pistes sobre les propietats CSS a utilitzar:<br /> <br /> * El menú és una llista d'items HTML (UL, LI), tot i que també es pot fer amb DIVs.<br /> * Per posar-la horitzontal cal que remenis la propietat CSS '''display'''.<br /> * Per amagar els submenús també pots utilitzar la propietat '''display'''.<br /> * Per fer aparèixer un submenú caldrà que controlis els elements quan passa el ratolí per sobre (recorda quin era el [[CSS selectors| selector CSS]] que ho resolia).<br /> * Et recomano aquesta [http://css-tricks.com/fighting-the-space-between-inline-block-elements/ web per eliminar els blancs entre menús].<br /> * El 1r element del submenú està massa amunt? Mira de [[CSS selectors|buscar un selector]] per &quot;el primer element d'un conjunt&quot;. Modfifica la propietat del box model adient.<br /> <br /> No oblidis arrodonir els elements de les puntes (és una propietat CSS3).<br /> <br /> Per anar més enllà:<br /> * [http://www.colorzilla.com/gradient-editor/ Colorzilla]: pels gradients (degradats de color).<br /> *Si vols fer que els menús es depleguin &quot;suaument&quot; hauries d'investgar les [http://www.w3schools.com/css3/css3_transitions.asp propietats de transició del CSS3]. En CSS2 es podia fer però calia implementar codi en JavaScript.</div>

Enric