在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"

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

我被困在的地方是，在输出的代码中，它将.slicknav_menu显示在所有东西之上(就在主体下面)，我不确定在.js的什么地方可以包含一个标识的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中，没有内置的方式将徽标添加到菜单的左侧。

要实现您想要的效果，最简单的方法是使用JS并将徽标放在带有slicknav_menu类的div前面，然后将其向左浮动。

http://jsfiddle.net/gadw2j4y/

Answer 2

我在搜索相同问题的答案时遇到了这个问题，并成功地将以下代码应用到了我的网站上。

<script type="text/javascript">
    $(document).ready(function(){
        $('.slicknav_menu').prepend('<a href="index.php"><img class="logo" src="images/logo.jpg" alt="Website Logo" /></a>');
    });
</script>

在CSS中应用以下内容：

.logo {
float: left;
width: 25%;/*or whatever size you would like*/
height: auto;
}

Answer 3

您可以将徽标添加到label属性中。

$(function() {
    $('#menu').slicknav({
      label: '<div id="logo"><h1>Your Logo</h1></div>'
    });
});