javascript - 使用带有 SlickNav 的标志

Question

我已经能够使用建议的标记在我的站点中成功实现 SlickNav:

%nav
      #logo
        = link_to 'index.html#top' do
          = image_tag "logo.png"     
      %ul#menu
        %li
          = link_to "ONE", "#1"
        %li
          = link_to "TWO", "#2"
        %li 
          = link_to "THREE", "#3"
        %li 
          = link_to "FOUR", "#4"

在某个断点处，它隐藏导航然后显示 SlickNav - 一切正常。

我卡住的地方是，在输出的代码中，它显示 .slicknav_menu 高于其他所有内容(就在正文下方)，我不确定在 .js 中的什么地方我可以为 Logo 添加 div？

<div class="slicknav_menu"><a href="#" aria-haspopup="true" tabindex="0" class="slicknav_btn slicknav_collapsed" style="outline: none;"><span class="slicknav_menutxt"></span><span class="slicknav_icon slicknav_no-text"><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span></span></a><ul class="slicknav_nav slicknav_hidden" aria-hidden="true" role="menu" style="display: none;">
        <li>
          <a href="#1" role="menuitem" tabindex="-1">ONE</a>
        </li>
        <li>
          <a href="#2" role="menuitem" tabindex="-1">TWO</a>
        </li>
        <li>
          <a href="#3" role="menuitem" tabindex="-1">THREE</a>
        </li>
        <li>
          <a href="#4" role="menuitem" tabindex="-1">FOUR</a>
        </li>
      </ul></div>

期望的效果:

http://oi60.tinypic.com/2egcpky.jpg

Answer 1

不幸的是，SlickNav 没有内置的方法可以将 Logo 添加到菜单的左侧。

完成您想要的最简单方法是使用 JS 并使用类 slicknav_menu 将 Logo 添加到 div 并将其向左浮动。

http://jsfiddle.net/gadw2j4y/