Button (informatica): differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Riga 99:
*<code>onMouseDown</code>: codice da eseguire quando si clicca l'oggetto con il [[mouse]].
*<code>onMouseUp</code>: codice da eseguire quando si rilascia l'oggetto con il mouse.
== 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}}</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">{{Cite web|url=https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/|title=Loving & Hating the Hamburger Icon|date=2018-09-17|website=Webdesigner Depot|language=en|access-date=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">{{Cite web|url=https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/|title=Loving & Hating the Hamburger Icon|date=2018-09-17|website=Webdesigner Depot|language=en|access-date=2019-02-23}}</ref>.
=== Esempio ===
HTML<syntaxhighlight lang="html">
<nav role="navigation">
<div id="menuHamburger">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#"><li>Home</li></a>
<a href="#"><li>Prodotti</li></a>
<a href="#"><li>Info</li></a>
<a href="#"><li>Contatti</li></a>
</ul>
</div>
</nav>
</syntaxhighlight>CSS<syntaxhighlight lang="css">
#menuHamburger
{
display: block;
position: relative;
top: 100px;
left: 100px;
z-index: 1;
user-select: none;
}
#menuHamburger a
{
text-decoration: none;
color: grey;
transition: color 0.3s ease;
}
#menuHamburger a:hover
{
color: red;
}
#menuHamburger input
{
display: block;
width: 80px;
height: 72px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menuHamburger span
{
display: block;
width: 43px;
height: 7px;
margin-bottom: 5px;
position: relative;
background: #f2eded;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.65s ease;
}
#menuHamburger span:first-child
{
transform-origin: 0% 0%;
}
#menuHamburger span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuHamburger input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuHamburger input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 500px;
margin: -200px 0 0 -60px;
padding-top: 125px;
background: #dbdbdb;
list-style-type: none;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 20px 0;
font-size: 32px;
}
#menuHamburger input:checked ~ ul
{
transform: none;
}
</syntaxhighlight>
== Formattazione ==
| |||