Question

我不想为我的网站的iPad版本制作一个特殊的菜单。

它应该像这样工作： http://itu.dk/people/mbul/humlum/images/ipad_menu.png

单击IMG 1，菜单展开（到IMG 2），链接变得可见。单击IMG 2外部时，它会随链接一起消失，因此只有IMG 1可见。

我已经走到这一步了，但它并没有真正做到这一点：

<div class="nav_mobile_container">      
<div class="nav_mobile_elements">
<div class="nav_mobile"></div>
</div>  
</div> 

div.nav_mobile_container{
    position: fixed;
    top: 0px;
    left: 0px;
    }

div.nav_mobile_elements{
    display: inline-block;
    }

div.nav_mobile_elements a{
    vertical-align: top;
    display: inline-block;}

div.nav_bookmark:hover{
    display: inline-block;
    }

.nav_mobile{
    width:70px;
    height:70px;
    background-image:url('images/menu_small.png');
    display: inline-block;
    }

.nav_mobile:hover{
    width:496px;
    height:500px;
    background-image:url('images/menu_small_expanded.png');
    }

如果可能，我真的很感激CSS解决方案。

谢谢！

Answer 1

最接近的是

#nav_mobile:active {
    width:496px;
    height:500px;
    background-image:url('images/menu_small_expanded.png');
}

但这在ipad上不起作用。我建议使用一些javascript。

创建一个onclick事件，显示包含所需导航信息的div。用jquery：

$("#small_navigation").click(function(){
$("#big_navigation").show();
});

css：

#big_navigation {
display: none;
width: ...
height: ...
etc...
}

Answer 2

你需要javascript。使用jQuery，您就可以做到这一点：

首先，不要在CSS中设置:hover，只需创建一个将在click上添加的课程：

.nav_mobile.navopen {
    width:496px;
    height:500px;
    background-image:url('images/menu_small_expanded.png');    
}

然后有点jQuery让它起作用：

$(document).ready(function(){
    // expend the menu on click
    $('.nav_mobile').on('click', function(event){
        event.stopPropagation();
        $(this).addClass('navopen');
    });
    // close menu on click outside the menu
    $('html').click(function() {
        $('.nav_mobile').removeClass('navopen');
    });
});

jsFiddle demo

使用纯javascript

修改

window.onload = function() {
    var menu = document.getElementsByClassName('nav_mobile')[0];
    menu.onclick=function(e){
        e.stopPropagation();
        menu.className = "nav_mobile navopen";
    };
    var html = document.getElementsByTagName('html')[0];
    html.onclick=function(){
        menu.className = "nav_mobile";
    };
};

使用图像扩展菜单

2 个答案: