使用圖片展開菜單

我不想爲我的網站的iPad版本製作特殊菜單。使用圖片展開菜單

它應該是這樣的： http://itu.dk/people/mbul/humlum/images/ipad_menu.png

點擊圖1和菜單展開（以圖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解決方案，如果可能的。

謝謝！

來源

2013-12-10 Morten

我們會很感激一個[的jsfiddle（http://jsfiddle.net/）:) – Brewal

你可以得到最接近的是

#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... 
}

來源

2013-12-10 15:59:13

謝謝！我會嘗試 – Morten

不客氣。如果您有任何問題，只需提問！ –

您需要的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"; 
    }; 
};

來源

2013-12-10 16:14:26 Brewal

使用圖片展開菜單

回答

相關問題