使用带有 SlickNav 的徽标答案

【问题标题】：Use a logo with SlickNav使用带有 SlickNav 的徽标
【发布时间】：2014-09-03 18:43:09
【问题描述】：

我已经能够使用建议的标记在我的网站中成功实施 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 中的哪个位置可以为徽标添加 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

【问题讨论】：

为什么要在JS中包含logo？
如果没有必要我不这样做——只是它从 JS 调用 .slicknav_menu 类——它不在我的标记中......

标签： javascript jquery navigation slicknav

【解决方案1】：

遗憾的是，SlickNav 没有内置方法可以在菜单左侧添加徽标。

完成您想要的最简单的方法是使用 JS 并将徽标添加到带有 slicknav_menu 类的 div 并将其浮动。

http://jsfiddle.net/gadw2j4y/

【讨论】：

查看我对brand 属性的回答。也许它是在您的帖子之后介绍的？

【解决方案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;
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

在 slicknav.css 文件中找到这行 css 代码

.slicknav_menu:before,
.slicknav_menu:after { content: " "; display: table;}
.slicknav_menu:after { clear: both }

替换成

.slicknav_menu:after { content: url(../img/logo.png); display: table;}
.slicknav_menu:before { clear: both }

【讨论】：

【解决方案5】：

在 .css 文件中，您可以找到将 logo 设置为菜单背景的代码：

.slicknav_menu:before{
float: left;
height: 90px;
background: url(logo.png)no-repeat;
width: 110px;
margin-left: 7px;
margin-top: 7px;}

请记住更改 height 属性以将其调整为您的徽标高度，否则您的徽标会出现剪切。问候。

【讨论】：

【解决方案6】：

SlickNav 支持的品牌属性正是您所寻找的：

$('#mymenu').slicknav({
        brand: "<img src='/mylogo.png'>"
    });

我不确定该功能在您发帖时是否可用，但它肯定存在并且现在可以使用。

【讨论】：