将固定徽标添加到 jquery 菜单顶部？答案

【问题标题】：Add a fixed logo to top of jquery menu?将固定徽标添加到 jquery 菜单顶部？
【发布时间】：2014-05-17 14:32:42
【问题描述】：

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

我已经尝试过使用 headers 插件，但即使只使用文本也没有运气。

任何帮助都会很棒。

谢谢。

【问题讨论】：

标签： jquery mmenu

【解决方案1】：

由于 mmenu 有点查看所有标签并克隆它，我发现最好在页面加载后添加它。例如，我的代码如下所示。（您可以忽略我的大部分选项，并用您自己的选项替换。）

         $(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);
   });

唯一的问题是，他们也绝对将他们的元素定位在那个菜单中。所以我不得不添加一些自定义 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;}

【讨论】：

【解决方案2】：

谢谢你。我有同样的查询，它工作得很好。我注意到一些 CSS 类在回答后发生了变化。

.mm-panels{
top:100px;
}

公开自定义 DIV。

【讨论】：

【解决方案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 格式，如上，将位置：顶部和高度设置为 1~4、1=top:40px 和 4=top:160px。

此代码可能不适合您的情况，但这就是它的工作方式。

【讨论】：