使用的标志与SlickNav

我已经使用建议的标记已经能够成功地实现SlickNav到我的网站：使用的标志与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"

在certiain断点，它隐藏的资产净值则显示SlickNav - 都好。

我被卡住的地方是在输出的代码中，它显示.slicknav_menu高于其他所有内容（就在body下面），我不知道.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>

预期的效果：不幸的是与SlickNav

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

来源

2014-09-03 jkoler

为什么你需要在JS中包含标志？ – APAD1 2014-09-03 18:45:39

如果没有必要，我不会 - 只是它从JS中调用.slicknav_menu类 - 它不在我的标记中。 – jkoler 2014-09-03 19:13:12

没有内置的方式来标志添加到菜单的左侧。

最简单的方式来完成你想要是使用JS和带班slicknav_menu前面加上徽标div和浮动它留下什么。

http://jsfiddle.net/gadw2j4y/

来源

2014-09-04 18:24:00 ComputerWolf

我碰到这个问题就来了，同时寻找答案同样的问题，已经应用了下面的代码到我的网站成功。

<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; 
}

来源

2015-08-29 02:24:53 Michael

找到这一行的CSS代码中slicknav.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 }

来源

2015-10-09 07:55:55 user2739717

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

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

来源

2016-07-08 08:54:30 Ross

文件中

的CSS，你可以找到的代码设置标志作为菜单的背景：

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

记住更改height属性将其调整到您的标志高度，otherwhise您标志appers削减。问候。

来源

2017-10-09 19:28:30 Drako

使用的标志与SlickNav

回答

相关问题