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.

因为我预计很多人会点击的标题是“菜单”*问菜单我想要使其与点击右侧的箭头相同。

我不知道该怎么做。但我认为你应该看看哪个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%; 
}

答

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; 
     } 
     });

Zurb基金会iPhone上的*栏菜单

相关推荐