Question

我正在尝试尽可能地适应ZURB的基础我们使用的CMS。这是一个CMS，除了大约9人外，对所有人来说都是陌生的;它被称为Sitekit（sitekit.net），它不是最灵活的野兽。

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

    <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><li>，而Foundation需要更多特异性。我无法自定义CMS生成的代码。

我的问题是，将导航融入我的CMS的最简单方法是什么，在Foundation的Top Bar导航结构中工作？

Answer 1

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

它有一些糖选择：

标题：将显示在菜单左侧的字符串
url ：标题链接的网址
iconTitle ：将出现在菜单右侧的字符串
图标：在移动设备上启用右侧菜单图标的布尔值（true或false）

用法例如：

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

代码：

＆＃13;

var formatNavBar = function (menu, opts) {  
  $('span', menu).each(function () {
    var span = $(this);
    span.parent().prepend(span.children());
  });
  $('span', menu).remove();
  menu.addClass('top-bar').attr({
    'data-topbar': '',
    'role': 'navigation'
  });
  var section = $('<section>').addClass('top-bar-section');
  if ($('.title-area', menu).length === 0) {
    var titleUl = $('<ul>').addClass('title-area');
    var titleLi =  $('<li>').addClass('name');
    var title = $('<h1>');
    var titleLink = $('<a href="'+(opts.url || '#')+'">'+(opts.title || 'Menu')+'</a>');    
    titleUl.append(titleLi);
    titleLi.append(title);
    title.append(titleLink);    
    var mobile = $('<li>').addClass('toggle-topbar' + (opts.icon ? ' menu-icon' : ''))
    .html('<a href="#"><span>'+(opts.iconTitle || '')+'</span></a>');
    if (opts.icon) {
      $(document.body).on('click', '.toggle-topbar.menu-icon a', function() {
        menu.toggleClass('expanded');
      });
    }
    titleUl.append(mobile);            
    menu.prepend(titleUl);
  }
  section.append(menu.children());
  menu.append(section);
  $('ul', menu).addClass('left');
  $('li > ul', menu).each(function () {
    $(this).addClass('dropdown').parent().addClass('has-dropdown');
  });
  $(document).foundation('topbar', 'reflow');
};

formatNavBar($('#menu'), {title: 'Topnav', icon: true, url: 'http://www.howebridge.org'});

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <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>
            <li><a title="Ashton2" href="/leisure-centres-2016/howe-bridge/new_page2.htm">Ashton2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

＆＃13;

如果你想调整一些http://jsbin.com/nelafe/3

，这是一个JSbin

调整基础导航CSS

1 个答案: