使用的標誌與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

回答

相關問題