2015-10-20 3 views
0

Прежде всего мой вопрос: как я могу свернуть свое меню при просмотре на дополнительном маленьком экране?Bootstrap 3 CSS menu collapse extra small window

Дополнительная информация: Я создаю сайт с Joomla 3.4.x. Я создал свой собственный шаблон Bootstrap 3. Вот URL-адрес тестового сервера: http://chjc.nl.testbyte.nl

Меню работает, как и планировалось, за исключением дополнительных небольших устройств: меню должно скрываться при открытии страницы. Затем он должен отображаться, когда я нажимаю кнопку «гамбургер» справа вверху. Вместо этого он всегда показывает и захватывает большую часть экрана смартфона. Как я могу заставить его рушиться при загрузке страницы?

Я даже не уверен, если это CSS вопрос, или JQuery, Bootstrap или что там у вас ...

Thanx заранее,

Thom Thomsterdam.nl

+0

Привет, я думаю, ваша разметка в порядке, вот рабочая демонстрация (https://jsfiddle.net/t4ym3/101/embedded/result/). Тем не менее, я могу видеть некоторые ошибки JavaScript, уметь фиксировать это и возвращаться к нам, если проблема не решена? –

+0

thankxs raja. Я посмотрел на javascript и нашел некоторые сообщения об ошибках в моей консоли веб-разработки. Проблема в том, что я ничего не знаю о javascript и/или jQuery. Поэтому, если кто-нибудь может отладить это, пожалуйста, помогите. –

+0

уверен, что я могу попробовать .. –

ответ

0

You необходимо правильно организовать и структурировать свой HTML-код. Проблема в том, что ваши микширование и включая скрипты, стили повсеместно. Порядок очень важен.

The Javascript ошибки $ is not a function потому, что вы используете jQuery.noConflict(); так вместо того, чтобы делать:

$(function() { 
$('[data-rspnsv]').rspnsv({ 
    delay: 200, 
    duration: 3000 
    }); 
}); 

изменить его (заменить $ с jQuery)

jQuery(function() { 
jQuery('[data-rspnsv]').rspnsv({ 
    delay: 200, 
    duration: 3000 
}); 
}); 

Или

jQuery(...).slabText is not a function Что касается как я вижу, вы объявляете функцию jQuery("h1.slabbed").slabText({..}) с с добавлением предварительной ссылки на плагин. И так далее .. Я бы также рекомендовал не включать в свой встроенный JavaScript и рассмотреть вопрос об организации свои функции следующим образом:

var $Slabbed = jQuery("h1.slabbed"), 
$Carouselitem = jQuery(".carousel"); 

window.myApp = { 

SlabText : function(){ 
    if($Slabbed.length > 0){ 
     $Slabbed.slabText({ 
      viewportBreakpoint: 380, 
      minCharsPerLine: 10 
     }); 
    } 
}, 
Carousel: function(){ 
    if($Carouselitem.length > 0){ 
     $Carouselitem.carousel({ 
      interval: 15e3, 
      pause: "hover" 
     }); 
    } 
}, 
Init : function(){ 

    // Init SlabText 
    myApp.SlabText(); 

    // Init Carousel 
    myApp.Carousel(); 
} 
}; 

jQuery(document).ready(function() { 
    myApp.init(); 
}); 

Что касается вашей navbar, у меня не было проблем, воспроизводя свой example.However, я вижу три bootstrap.min.css файлов - Что есть что ??

попробовать это в разделе & <head></head> добавить только ваш CSS и сохранить JS для последующего

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> 
<link rel="stylesheet" href="css/vendor.css"/> 
<link rel="stylesheet" href="css/template-styles.css"/> 
<link rel="stylesheet" href="css/custom.css"/> 
  • bootstrap.min.css - Оставьте самозагрузки, как это сейчас, чтобы избежать портя стилей по умолчанию.Как только вы получите достаточно зрелыми, вы можете настроить его столько, сколько вы хотите
  • vendor.css - Плагины/Производители
  • template-styles.css - стили вашего шаблона
  • custom.css - Ваш собственный пользовательский стайлинга

Тогда перед вашим закрытием <body> теги добавьте JS и назовите ваш App.init();

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script> 
<script type="text/javascript" src="js/jquery-noconflict.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/plugins.js"></script> 
<script type="text/javascript" src="js/app.js"></script> 
<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     App.init(); 
}); 
</script> 
</body> 

Демо-версияJSFiddle - попробуйте изменить размер браузера

Пожалуйста, не делайте копирования/вставки, так как эта демонстрация не является решением проблемы. Я загружаю библиотеку bootstrap из CDN и добавляю ваши собственные стили, которые также содержат стили по умолчанию для начальной загрузки. Это беспорядок. Вам нужно очистить все ваши стили, как упоминалось ранее! это просто доказательство концепции, что ваша navbar разметка верна & работает так, как предполагается.

+0

Raja: Большое вам спасибо за то, что вы сделали. Я должен был сказать тебе раньше. Сегодня мы запустили сайт на https://www.chjc.nl. Как вы можете себе представить, мне нужно было установить приоритеты, а меню смартфона не было на вершине списка. Я изучил ваши предложения и смог избавиться от нескольких javascripts из app.js, которые я скопировал у кого-то другого, но только в незнании. Когда я посмотрел на него, я обрезал файл и только держал бит «shrink navbar on scroll». –

+0

Я не знаю, насколько хорошо вы знаете Joomla, но многие расширения добавляют свои собственные js и css, поэтому вы видите 3 файла с именем bootstrap.min.css. Только /templates/thomsterdam-bootstrap-3/css/bootstrap.min.css содержит стиль для всего веб-сайта, остальные - для двух расширений. Я очень сильно отредактировал bootstrap css, отсюда и мой собственный bootstrap.min.css. Я рассмотрю варианты сжатия, которые вы предложили, для этого есть ряд расширений joomla. Я также рассмотрю образец вашей скрипки и надеюсь решить проблему с меню смартфона. Кому-то все еще интересно? Я открыт для предложений. –