为MeanMenu添加标题JQuery响应式导航

我正在使用MeanMenu JQuery插件为我的网站创建响应式导航，我想知道如何在标题名称中添加导航模式。为MeanMenu添加标题JQuery响应式导航

我的JQuery技能并不强，我不确定。

演示：http://www.meanthemes.com/demo/meanmenu/demo.html。在响应中查看它，右侧有3个栏，用作菜单抽屉。我想添加一个标题旁边的酒吧。

导航的大部分响应部分都是用JQuery编写的，这对我来说是一些新东西。

希望对此有所帮助。

Link:http://jsfiddle.net/dDRZe/4/

谢谢。

来源

2014-01-21 Jeiman

您可以新增标题与性质定位和显示：无拖欠。当响应菜单出现时，span将显示：block。而已。 – Kumar

也许你可以做这样的事情：

的Javascript

$(window).resize(function() { 
    if (window.innerWidth < 480) { 
     $('.mean-bar').before('<div class="myDiv">content</div>'); 
    } 
});

CSS

.myDiv { 
    color: #fff; 
    position: absolute; 
    top: 0px; 
    left: 20px; 
    line-height: 40px; 
}

更新简单的解决方案

添加到你的页面的顶部：

<div class="myDiv">Content</div>

CSS显示/隐藏：

.myDiv { 
    color: #fff; 
    position: absolute; 
    top: 0px; 
    left: 20px; 
    line-height: 40px; 
    display:none; 
} 
@media screen and (max-width:480px){ 
    .myDiv { 
     display:block; 
    } 
}

这会给你一个div，你可以把你想要的任何标题上和风格如何你想用CSS。

来源

2014-01-21 09:42:33 wickywills

我确定。但我在哪里写它在JQuery中。导航的每个部分都有各种方法。不确定我应该放置哪个部分。 – Jeiman

@Jeiman：你有自己定制的JavaScript文件（例如myscripts.js）吗？如果没有，创建一个并确保在你的MeanMenu插件（和Jquery之后）之后调用它（在你的HTML中），然后把我用过的代码放到那个文件中，它应该可以正常工作 – wickywills

好了。但内容高于和低于响应式导航。这很奇怪，我必须刷新页面以响应模式才能看到内容。 – Jeiman

Solution: 
    1. Open jquery.meanmenu.fork.js 
    2. Find meanMenuOpen: <span /><span /><span />", //text/markup you want when menu is closed 
    3. Add whatever meanMenuOpen: "<span class='titelmenu'>MENU</span><span /><span /><span />", 
     //text/markup you want when menu is closed 
    4. Style with CSS 
    5. CSS: 

     .mean-container a.meanmenu-reveal span.titelmenu{ 
      background: transparent !important; 
      margin-top:0px; 
      font-family: "open_sansregular",serif;} 

     .titelmenu{ 
      padding: 13px 13px 11px; 
      position: absolute; 
      top: 0px; 
      right: 30px; 
      cursor: pointer; 
      color: #107aa2; 
      text-decoration: none; 
      line-height: 22px; 
      display: block; 
      font-weight: 700;} 

     .mean-container a.meanmenu-reveal span{background: #107aa2 !important;} 


6: jQuery: 

jQuery(document).ready(function($) { 

$("menu-selector: class or id").wrap("<div class=\'meanmenu-wrapper\'></div>"); 
$("menu-selector: class or id .meanmenu-wrapper").meanmenu({ 
    meanScreenWidth: "767", 
    meanRemoveAttrs: true, 
    meanMenuContainer: "#header or another", 
    meanMenuClose: "" 
}); 

});

来源

2015-08-16 06:44:59 develway

这是我如何解决（IE> = 9）...

@media screen and (max-width:480px){ 
    a.meanmenu-reveal::after { 
     content: "menu"; 
     font-size: 16px; 
     position: absolute; 
     text-indent: 0; 
     left: -40px; 
     bottom: 12px; 
    } 
}

来源

2016-12-11 18:28:04

为MeanMenu添加标题JQuery响应式导航

回答

相关问题