在jquery菜单顶部添加固定徽标？

Question

有谁知道是否可以在访问子菜单时将徽标/图像添加到固定不变的jquery mmenu的顶部？

我试过使用标头附加组件，但即使是纯文本，也能获得零运气。

任何帮助都会很棒。

谢谢。

Answer 1

由于mmenu kinda会查看所有标签并对其进行克隆，因此我发现最好在页面加载之后添加它。 例如，我的代码如下所示。 （您可以忽略我的大多数选项，而用自己的选项代替。）

  $(document).ready(function() { $("#menu").mmenu({ "classes": "mm-slide mm-light", "header": true, "": true, "searchfield": { "placeholder": "Search", "add": true, "search": true } }); var VarName = "<div id='forStyling'><img src='images/globe.png' alt='' /><a href='/'>Company Home</a></div>"; $('nav#menu').prepend(VarName); }); 

唯一的问题是，它们也将元素绝对定位在该mmenu中。 因此，我必须添加一些自定义CSS以将其全部删除。 在我的示例中，我认为徽标高40像素（包括填充）

  .mm-menu > .mm-search {top:40px;} .mm-menu.mm-hassearch .mm-header {top:90px;} .mm-menu.mm-hasheader.mm-hassearch > .mm-panel.mm-list {padding-top:140px;} 

Answer 2

谢谢你 我有相同的查询，它运行完美。 我注意到自回答以来，某些CSS类已更改。

.mm-panels{
top:100px;
}

公开自定义DIV。

Answer 3

您可以使用以下js来做到这一点：

<script type="text/javascript">
            $(function() {
                $('nav#smenu').mmenu({
                    navbars     : [
                        {
                    height  : 4,
                    position    : 'top',
                    content     : [                         
                            '<div id="logo" class="site-logo"><img src="../logo.png"></div>',
                                'prev',
                                'title'
                            ],
                    }
                    ]
                });
            });
</script>

棘手的是将您的顶部内容设为html格式，如上，将position：top和height设置为1〜4、1 = top：40px和4 = top：160px。

该代码可能不适合您的使用情况，但这就是它的工作原理。