1

我正在使用 MeanMenu jQuery 响应式菜单插件在我的网页上进行导航。一切似乎都运行良好，但我不知道如何在菜单关闭时更改菜单标题。我只想将“菜单”一词添加到三个栏或用这个词替换三个栏。这是 .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;
}

但我的解决方案没有显示。我该如何解决？谢谢您的帮助！

4

2 回答 2

1

知道了。感谢国王的回答。

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;  
}
于 2014-01-23T23:35:09.030 回答
0

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>

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

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

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

}

工作相同。

于 2013-09-24T03:48:07.633 回答