使用图像扩展菜单答案

【问题标题】：Expanding menu using images使用图像扩展菜单
【发布时间】：2013-12-11 00:40:52
【问题描述】：

我不想为我的网站的 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 解决方案。

谢谢！

【问题讨论】：

我们非常感谢jsFiddle :)

标签： css menu responsive-design

【解决方案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...
}

【讨论】：

不客气。如果您有任何问题，尽管问！

【解决方案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";
    };
};

【讨论】：