Zurb基金會iPhone上的頂級欄菜單

我有一個Zurb基金會3的導航菜單。當頁面在手機上時，它正確顯示我的菜單系統的手機版本。Zurb基金會iPhone上的頂級欄菜單

但是，激活菜單的唯一方法是點擊右側的下箭頭三角形。我希望標題也是活躍的。

編輯：增加this link到一個簡單的主頁工作版本。

請注意，點擊欄或「菜單」一詞會突出顯示欄，但只有箭頭纔會顯示菜單。

我在桌面上隱藏的名稱（「菜單」），並將其顯示在手機上，像這樣：

<div class="row"> 
    <div class="contain-to-grid"> 
    <nav class="top-bar"> 
     <ul> 
     <!-- Title Area --> 
     <li class="name show-for-small"> 
      <h1><a href="#">Menu</a></h1> 
     </li> 
     <li class="toggle-topbar"><a href="#"></a></li> 
     </ul> 

     <section> 
     <!-- Left Nav Section --> 
     <ul class="left"> 
       etc.

因爲我預計很多人會點擊的標題是「菜單」上訪問菜單我想要使其與點擊右側的箭頭相同。

來源

2013-05-08 Steve

我不知道該怎麼做。但我認爲你應該看看哪個CSS class/id負責顯示菜單。並將相同的課程/ ID應用於「菜單」。 – 2013-05-09 06:02:14

我先試了一下，但是它粘住了右箭頭菜單，和箭頭的大小和位置相同。 – Steve 2013-05-09 19:54:50

然後在JavaScript文件中查找顯示基礎庫中菜單的功能，並將該功能應用於菜單。「點擊數= functionToRevealMenu（）」 – 2013-05-10 07:46:10

如果調整：

.top-bar ul > li.toggle-topbar { 
    cursor: pointer; 
    display: block; 
    height: 45px; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 50%; 
}

和寬度值更改爲：

width 100%;

它將工作 - 在你的app.css加：

.top-bar ul > li.toggle-topbar { 
    width: 100%; 
}

來源

2013-05-11 06:35:16 iamrobert

CSS的方法是一種方式，但我會修改jquery.foundation.topbar.js，第45行（這是以下功能）我改變了'.top-bar .toggle-topbar到'.top-bar .toggle-topbar, .top-bar .title'

$('.top-bar .toggle-topbar, .top-bar .title').off('click.fndtn').on('click.fndtn', function (e) { 
     e.preventDefault(); 

     if (methods.breakpoint()) { 
      settings.$topbar.toggleClass('expanded'); 
      settings.$topbar.css('min-height', ''); 
     } 

     if (!settings.$topbar.hasClass('expanded')) { 
      settings.$section.css({left: '0%'}); 
      settings.$section.find('>.name').css({left: '100%'}); 
      settings.$section.find('li.moved').removeClass('moved'); 
      settings.index = 0; 
     } 
     });

來源

2013-05-14 15:41:07 Steve

Zurb基金會iPhone上的頂級欄菜單

回答

相關問題