Добавить в заголовок для отзывчивой навигации 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

можно добавить свои Заголовок со свойствами позиционирования и отображения: ни один в умолчанию. И когда появится отзывчивое меню, появится окно: 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)? Если нет, создайте его и убедитесь, что он вызывается (в вашем HTML) ПОСЛЕ вашего плагина MeanMenu (и после JQuery), а затем просто поместите код, который я использовал в этот файл, и он должен работать нормально – wickywills

Хорошо, что это работает. Но контент находится выше и отличается от реагирующей навигации. Странно, как мне нужно обновить страницу в режиме reponsive, чтобы увидеть контент. – 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

ответ

Смежные вопросы