Question

我在我的网页上使用MeanMenu jQuery Responsive菜单插件进行导航。一切似乎都运作良好，但我无法弄清楚如何在关闭时更改菜单的标题。我只是想在三个栏上添加“菜单”这个词，或者用这个词替换三个栏。这是.js文件中的一行：

meanMenuOpen: "<span /><span /><span />", // text/markup you want when menu is closed, styling in CSS provides 3 bars with these spans

我这样填写了这句话：

meanMenuOpen: "<span />Menu<span /><span />", // text/markup you want when menu is closed, styling in CSS provides 3 bars with these spans

这部分的CSS如下所示：

.mean-container a.meanmenu-reveal span {
    display: block;
    background: #fff;
    height: 3px;
    margin-top: 3px;
}

但我的解决方案没有显示出来。我该如何解决这个问题？谢谢你的帮助！

Answer 1

知道了。感谢King的回答。

jquery.meanmenu.js

meanMenuOpen: "<span /><span /><span /><div class='menu_title'>Menu</div>", // text/markup you want when menu is closed

CSS

.menu_title {
    display: block;
    position:relative;
    float:right;
    bottom:1em;
    margin-right:2em;
    color:#FFFFFF;
    font-size: 16px;
    line-height: 22px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;  
}

Answer 2

SPAN指的是汉堡包图标。虽然这可能不是很漂亮的代码，但它的工作方式与我在流行的浏览器上测试它的方式相同;

CSS

.menu_title {
   display: block;
   position:relative;
   float:right;
   height: 1em;
   bottom:.65em;
   margin-right:2.5em;  
}

HTML

<header>
<nav>
<div class="menu_title">Menu</div>
<ul>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
</ul>
</nav>
</header>

我还使用基础4的可见性类来隐藏它以用于中等屏幕（隐藏为中等）但是媒体查询;

@media all and (min-width:768px){

.menu_title{
   display:none !important; 
   visibility:hidden;
   }

}

运作相同。

无法在jQuery（MeanMenu）中更改菜单标题

2 个答案: