3

提案されたマークアップを使用して、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

4

6 に答える 6

0

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 }
于 2015-10-09T07:55:55.837 に答える