Javascript 使用带有SlickNav的徽标
我已经能够使用建议的标记成功地在我的站点中实现SlickNav:Javascript 使用带有SlickNav的徽标,javascript,jquery,navigation,slicknav,Javascript,Jquery,Navigation,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
%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"
在一个确定的断点,它隐藏导航,然后显示平滑导航-一切正常
我被卡住的地方是,在输出的代码中,它显示.slick nav_菜单高于其他所有内容(就在主体下方),我不确定在.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>
-
-
-
-
预期效果:
不幸的是,使用SlickNav时,没有内置的方法在菜单的左侧添加徽标 实现您想要的最简单的方法是使用JS,使用class
slicknav_菜单将徽标预先添加到div中,然后将其向左浮动
我在搜索同一个问题的答案时遇到了这个问题,并成功地将以下代码应用到了我的网站上
<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>
在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 }
您可以将徽标添加到label属性中
$(function() {
$('#menu').slicknav({
label: '<div id="logo"><h1>Your Logo</h1></div>'
});
});
$(函数(){
$(“#菜单”).slicknav({
标签:“你的标志”
});
});
在.css文件中,您可以找到将徽标设置为菜单背景的代码:
.slicknav_menu:before{
float: left;
height: 90px;
background: url(logo.png)no-repeat;
width: 110px;
margin-left: 7px;
margin-top: 7px;}
请记住,更改“高度”属性可将其调整为您的徽标高度,否则您的徽标将被剪切。问候。SlickNav支持品牌属性,可实现您想要的:
$('#mymenu').slicknav({
brand: "<img src='/mylogo.png'>"
});
$(“#我的菜单”).slicknav({
品牌:“
});
我不确定你发表文章时该功能是否可用,但现在它肯定已经存在并正在运行。为什么需要在JS中包含徽标?如果没有必要,我也不知道-只是它从JS中调用了.slick nav_menu类-它不在我的标记中…请参阅我的答案,关于品牌
属性。也许是在你的帖子之后介绍的?
$('#mymenu').slicknav({
brand: "<img src='/mylogo.png'>"
});