joshua/dash-docs
1
0
Fork 0
mirror of https://github.com/seigler/dash-docs synced 2025-07-27 09:46:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve menu design for mobiles

Browse source
This commit is contained in:
Saivann 2013-07-08 15:24:58 -04:00
parent b2f2265454
commit 5ef591369c
3 changed files with 34 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

4
_layouts/base.html
View file

@ -66,7 +66,7 @@ menu:
</ul>
{% else %}
<ul id="menusimple">
<li><a href="#" onclick="return false;">{% translate menu-intro layout %}</a>
<li><a href="#" onclick="mobilehover(event);">{% translate menu-intro layout %}</a>
<ul>
<li{% if page.id == 'bitcoin-for-individuals' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-individuals url %}">{% translate menu-bitcoin-for-individuals layout %}</a></li>
<li{% if page.id == 'bitcoin-for-businesses' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-businesses url %}">{% translate menu-bitcoin-for-businesses layout %}</a></li>
@ -74,7 +74,7 @@ menu:
<li{% if page.id == 'how-it-works' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate how-it-works url %}">{% translate menu-how-it-works layout %}</a></li>
</ul>
</li>
<li><a href="#" onclick="return false;">{% translate menu-resources layout %}</a>
<li><a href="#" onclick="mobilehover(event);">{% translate menu-resources layout %}</a>
<ul>
<li{% if page.id == 'vocabulary' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate vocabulary url %}">{% translate menu-vocabulary layout %}</a></li>
<li{% if page.id == 'resources' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate resources url %}">{% translate menu-resources layout %}</a></li>

25
_less/screen.less
View file

@ -267,7 +267,7 @@ li p{
font-size:110%;
display:block;
text-decoration:none;
padding:6px 10px 3px 10px;
padding:6px 10px 4px 10px;
color:#2c6fad;
white-space:nowrap;
}
@ -287,10 +287,6 @@ li p{
min-width:120%;
padding:5px 0px;
margin:0px;
border-radius:5px;
-webkit-border-radius:5px;
border-top-left-radius:0px;
-webkit-border-top-left-radius:0px;
}
#menusimple li:hover ul{
display:block;
@ -311,6 +307,7 @@ li p{
color:#2c6fad;
font-size:100%;
width:100%;
margin:1px 0px;
padding:6px 10px 3px 10px;
}
#menusimple li ul li:hover a,
@ -971,15 +968,25 @@ h2 .rssicon{
margin:0px 0px 10px 0px;
height:auto;
}
#menusimple li a{
padding:6px 6px 3px 6px;
#menusimple li a,
#menusimple li ul li a,
#menusimple li ul li a:active,
#menusimple li ul li a:visited,
#menusimple li ul li a:link{
padding:10px 6px 8px 6px;
display:block;
}
#menusimple li{
margin:6px;
display:block;
margin:4px;
position:static;
}
#menusimple li ul{
min-width:140px;
min-width:0;
position:relative;
}
#menusimple ul.hover{
display:block;
}
#menufor{
position:static;

16
js/main.js
View file

@ -105,6 +105,22 @@ cancelEvent(e);
}
function mobilehover(e){
//Add a delay before hidding menu for mobiles to prevent accidental clicks
var t=getEventTarget(e);
while(t.nodeName!='LI'||!t.parentNode.id)t=t.parentNode;
var p=t.getElementsByTagName('UL')[0];
p.className='hover';
setTimeout(function(){
for(var i=0,nd=t.parentNode.getElementsByTagName('UL'),n=nd.length;i<n;i++){
if(nd[i]==p)continue;
nd[i].className='';
}
},1);
cancelEvent(e);
}
function boxshow(e){
var p=t=getEventTarget(e);
while(p.nodeName!='DIV')p=p.parentNode;