适应基础导航CSS 我试图尽我所能地适应Zurb对我们使用的CMS的基础。这是一个CMS，除了大约9个人之外，其他人都不熟悉它；它被称为Sitekit（Sitekit.net），并不是最灵活的

与其他CMSE一样，Sitekit创建了自己的导航结构。在这种情况下，它相对简单。带有子元素/下拉元素的简单单元素导航示例：

    <div id="menu"><ul id="level2"><li><span class="navfirst"><a class="level1" accesskey="A" title="fitness - AccessKey: A" href="/test-2.htm">fitness</a></span></li>
<li><a class="level1" accesskey="B" title="skate - AccessKey: B" href="/leisure-centres-2016/howe-bridge/skate/">skate</a></li>
<li><a class="level1" accesskey="C" title="play - AccessKey: C" href="/leisure-centres-2016/howe-bridge/play/">play</a></li>
<li><a class="level1" accesskey="E" title="cafe - AccessKey: E" href="/leisure-centres-2016/howe-bridge/food-and-drink/">cafe</a></li>
<li><a class="level1" accesskey="F" title="climb - AccessKey: F" href="/leisure-centres-2016/howe-bridge/schools.htm">climb</a></li>
<li><span class="navlast"><a class="level1x" accesskey="G" title="parties - AccessKey: G" href="/leisure-centres-2016/howe-bridge/parties.htm">parties</a></span>
<ul><li><a title="Ashton" href="/leisure-centres-2016/howe-bridge/new_page.htm">Ashton</a></li></ul></li></ul></div>

显然，这与基金会要求您使用其导航结构来处理代码的方式大不相同。

它开始出错的地方是我的CMS在nav中处理子元素的地方。它只是在父元素内部打开了<代码> UL>

<代码>，而基础需要更具体。我无法自定义我的CMS生成的标签

---

我的问题是，让导航烘焙到我的CMS中，在基金会的顶栏导航结构中工作的最简单方法是什么？

您可以使用这段javascript来调整菜单

它有一些糖的选择：

• 标题：将出现在菜单左侧的字符串
• url：标题链接的url
• iconTitle：将出现在菜单右侧的字符串
• 图标：用于在手机上启用右菜单图标的布尔值（true或false）

用法如：

formatNavBar($('#menu'), {title: 'Topnav', icon: false, true: 'http://www.howebridge.org'});

代码：

formatNavBar($('#menu'), {title: 'Topnav', icon: false, true: 'http://www.howebridge.org'});

var formatNavBar=函数（菜单，选项）{
$（'span'，菜单）。每个（函数）{
var span=$（本）；
span.parent（）.prepend（span.children（））；
});
$（'span'，menu.remove（）；
menu.addClass（'top-bar'）.attr({
“数据顶栏”：“，
“角色”：“导航”
});
var section=$（''）.addClass（'top-bar-section'）；
如果（$（'.title area'，menu）.length==0）{
var titleUl=$（“
”）.addClass（'title-area'）；
var titleLi=$（“
”）.addClass（'name'）；
变量标题=$（''）；
变量titleLink=$（''）；
titleUl.追加（titleLi）；
标题I.附加（标题）；
标题.附加（标题链接）；
var mobile=$（“
”）.addClass（'toggle-toppar'+（opts.icon？'menu-icon'：''）
.html（“”）；
如果（选择图标）{
$（document.body）.on（'click'，'）。toggle-topbar.menu-icon a'，function（）{
menu.toggleClass（'expanded'）；
});
}
标题附加（移动）；
菜单.前置（标题）；
}
section.append（menu.children（））；
菜单.附加（节）；
$（'ul'，menu.addClass（'left'）；
$（'li>ul'，菜单）。每个（功能）{
$（this.addClass（'dropdown'）.parent（）.addClass（'has-dropdown'）；
});
$（文档）.foundation（'topbar'，'reflow'）；
};
formatNavBar（$（'#菜单'），{title:'Topnav'，图标：true，url:'http://www.howebridge.org'});

JS-Bin













为什么不能自定义CMS生成的标签？你在用什么CMS？它不使用模板，或者您无法以任何方式自定义它。。。？如果你想重新设计你的页面来使用基础，你必须改变代码，它不能仅仅通过改变CSS来完成。嘿，你不知道这个CMS是多么不灵活。更糟糕的是，我对改变它有点束手无策。不管怎样，这就是政治。它适用于父页面，但不适用于下拉列表/子页面。我想做的是使用自动生成的单级别nav，然后手动添加带有子页面的唯一nav元素。这应该管用，但并不完美。不可能！你是真正的巫师吗？真是难以置信。人们是怎么知道这些的？我给了你相当于Reddit的黄金嘿Rafael。很抱歉，这是一个麻烦，但是我如何修改您在上面创建的JS，以调用屏幕尺寸较小的菜单功能？我按照您的建议将用法更改为“formatNavBar（$（'#menu'），{title:'Topnav'，icon:true}）；'此时会出现菜单图标，但它不起作用。你点击它，什么也没发生。非常感谢。一旦我重新启动服务器，我会尝试一下。不过它看起来是防弹的。你真是个天才，拉斐尔！Rafael-问题：nav中生成的HTML显示此网站的名称，用户应返回主页。但它会生成一个#而不是URL（在本例中，URL应该是howebridge.org）。如何附加此URL以显示在下面网站上生成的代码中
我刚刚为url添加了一个额外选项。。。这使得代码变得更好，因为它不再使用“黑客”来调整图标点击。