Button (informatica): differenze tra le versioni

Versione delle 19:18, 17 feb 2021

Versione delle 21:13, 21 feb 2021

Riga 102:

== Hamburger button ==

[[File:Hamburger icon.svg|alt=Classica icona di un hamburger button|miniatura|150x150px|Classica icona di un hamburger button]]

Un ''hamburger button'', così chiamato per la sua involontaria somiglianza con un [[hamburger]], è un pulsante tipicamente posizionato nell'angolo superiore di un sito web. Il suo compito è far apparire o scomparire le voci di menu della pagina web al click dell'utente. Viene particolarmente utilizzato nelle versioni mobile delle pagine web per evitare che esse occupino troppo spazio all'interno della pagina, che su tali dispositivi è molto più ridotto rispetto ai computer<ref>{{Cita web|url=https://blog.hubspot.com/website/hamburger-button|titolo=What is a Hamburger Button — and How Does it Work?|autore=Anna Fitzgerald|sito=blog.hubspot.com|lingua=en|accesso=2021-02-17 febbraio 2021}}</ref>.

=== Critiche ===

È stato affermato che mentre il bottone "hamburger" è ormai conosciuto ma la sua funzionalità non è sempre immediatamente ovvia quando viene visto per la prima volta;  in particolare, gli utenti più anziani meno familiari con l'iconografia moderna potrebbero essere confusi<ref name="Loving & Hating the Hamburger Icon">{{CiteCita web|url=https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/|titletitolo=Loving & Hating the Hamburger Icon|datedata=17 settembre 2018-09-17|websitesito=Webdesigner Depot|languagelingua=en|access-dateaccesso=23 febbraio 2019-02-23}}</ref>.

Questo bottone può aumentare il ''costo di interazione'' rispetto a un menu tradizionale, richiedendo clic aggiuntivi per recuperare le stesse informazioni, anche se con il vantaggio di un minore utilizzo dello schermo anche nelle [[app]] mobili. È stato anche affermato che i designer tendono a sovraccaricare queste icone con troppe informazioni nascoste<ref name="Loving & Hating the Hamburger Icon2">{{CiteCita web|url=https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/|titletitolo=Loving & Hating the Hamburger Icon|datedata=17 settembre 2018-09-17|websitesito=Webdesigner Depot|languagelingua=en|access-dateaccesso=23 febbraio 2019-02-23}}</ref>.

=== Esempio ===

Riga 221:

=== Stili [[CSS]] al passaggio del mouse ===

Stati al passaggio del mouse<ref>{{Cita web|url=https://zellwk.com/blog/style-hover-focus-active-states/|titolo=Style hover, focus, and active states differently {{!}} Zell Liew|sito=zellwk.com|lingua=en|accesso=2021-02-10 febbraio 2021}}</ref>:<syntaxhighlight lang="css">

.selector {

&:hover,