Menu a tendina su mobile

giovedì, 19 aprile 2012

Data la scarsità di documentazione sulla cosa, mi sono deciso di scrivere un breve articolo su questo trucco.
mi sono imbattuto nella necessità di visualizzare l’hover di un menu come quello sotto su mobile.


<nav id="access">
<ul>
	<li><a href="#">Link1 </a>
<ul>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</nav>

utilizzando solo i css la cosa funziona il codice per stilarlo è questo (preso da wp )


/* =Menu
-------------------------------------------------------------- */

#access {
background: #222; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252525, #0a0a0a);
background: -o-linear-gradient(#252525, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
background: -webkit-linear-gradient(#252525, #0a0a0a);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
}
#access li:hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
#access ul li:hover > ul {
display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}

Dato che i dispositivi touch non supportano l’hover una semplice e veloce guida su cosa supporta oppure no un dispositivo mobile la trovate qui

Bisogna utilizzare un piccolo hack js per attivare al click il sottomenu


jQuery("#access ul li a").click(function(){
jQuery('ul:first',this).css('display', 'block');
}, function(){
jQuery('ul:first',this).css('display', 'none');
});

E voitlà testato su Opera Mini e Iphone!

Tag: , , ,

2 Commenti a “Menu a tendina su mobile”

  1. francesca ha detto:

    ciao sto provandoil tuo tutorial e ti chiedo una cosa: il jQuery dove lo devo apporre?

  2. admin ha detto:

    Ciao Francesca,

    questo deve essere incluso prima della chiusura del body

    se sei su un worpress non è necessario includere la libreria perchè di solito è già caricata 🙂

Lascia un Commento