Карты Google в боковом меню

Я пытаюсь добавить диаграммы Google в боковое меню. Вот мой файлКарты Google в боковом меню

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!-- Bootstrap --> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="src/css/jquery.sliding_menu.css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <div class="container"> 
    <!-- Menu --> 

    </div> 
    <!-- Contenido --> 
    </div> 

    <script src="//code.jquery.com/jquery-1.10.2.min.js" ></script> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
    <script src="src/js/jquery.sliding_menu.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $('#menu ul').sliding_menu_js({ 
      header_title:'Nombre sitio web!', 
      header_logo: "http://placehold.it/250x120" 
     }); 

    }); 
    </script> 
    </body> 
</html>

Вот код, чтобы скользить боковое меню.

(function ($) { 
    'use strict'; 
    $.fn.extend({ 
     sliding_menu_js: function (opciones) { 

      // Configuraci贸n Base por defecto 
      var config = { 
       header_title: false, 
       header_logo: false, 
       toggle_button: true, 
       transitionSpeed: 0.5, 
       easing: 'ease' 
      }; 

      if (opciones) { 
       jQuery.extend(config, opciones); 
      } 

      // Se agregan elementos b谩sicos 
      $('<div/>', { id: 'sliding_menu_js_btn'}).appendTo('body'); 

      $('<div/>', { id: 'sliding_menu_js', class: 'cerrado' }).appendTo('body'); 

      $('<div/>', { class: 'header' }).appendTo('#sliding_menu_js'); 

      $('<ul/>').appendTo('#sliding_menu_js'); 

      $('<div/>', { id: 'sliding_menu_js_over' }).appendTo('body'); 


      // Se agrega un padding top para mostrar todo el contenido del sitio 
      $('body').css('padding-top', '60px'); 

      // Se copia el menu original 
      $('#sliding_menu_js ul').append($(this).html()); 

      // Se eliminan elementos innecesarios 
      $('.divider').remove(); 
      $('#sliding_menu_js ul').removeClass(); 
      $('#sliding_menu_js ul li').removeClass(); 
      $('#sliding_menu_js ul li a').removeClass(); 

      // Titulo 
      if (config.header_title) { 
       $('#sliding_menu_js .header').prepend("<h3>" + config.header_title + "</h3>"); 
       $('#sliding_menu_js_btn').append("<h3>" + config.header_title + "</h3>"); 
      } 

      // Logo 
      if (config.header_logo) { 
       $('#sliding_menu_js .header').prepend("<img src='" + config.header_logo + "' />"); 
      } 

      // Transici贸n 
      $('#sliding_menu_js').css('transition', 'right ' + config.transitionSpeed + 's ' + config.easing); 


      $('#sliding_menu_js_btn').click(function() { 
       toggle(); 
      }); 

      $('#sliding_menu_js_over').click(function() { 
       ocultar(); 
      }); 

      // Al presionar cualquier enlace dentro del menu 
      $('#sliding_menu_js ul li a').click(function() { 
       // ocultar(); 
      }); 

      // Muestra/Oculta el panel 
      function toggle(){ 
       if ($('#sliding_menu_js').hasClass('open')) { 
        ocultar(); 
       } else { 
        mostrar(); 
       } 
      } 

      // Muestra la barra lateral 
      function mostrar(){ 
       if ($('#sliding_menu_js').hasClass('cerrado')) { 
        $('#sliding_menu_js').css('right','5px'); 
        $('#sliding_menu_js').removeClass('cerrado'); 
        $('#sliding_menu_js').addClass('open'); 
        $('#sliding_menu_js_over').show(); 
       }; 
      } 

      // Oculta la barra lateral 
      function ocultar(){ 
       if ($('#sliding_menu_js').hasClass('open')) { 
        $('#sliding_menu_js').css('right','-250px'); 
        $('#sliding_menu_js').removeClass('open') 
        $('#sliding_menu_js').addClass('cerrado') 
        $('#sliding_menu_js_over').hide(); 
       }; 
      } 
     } 
    }) 
})(jQuery)

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

источник

2014-01-30 user2147744

Для навигации по боковой панели вы можете иметь div с классами bs-sidebar в Bootstrap. Следующий код создаст боковую панель для вас, когда в 3/12 части страницы в режиме отдыха 9/12 вы можете оставить свой контент. Вы можете увеличить или уменьшить размер панели при повторном использовании.

<div class="container bs-docs-container"> 
<div class="row"> 
<div class="col-md-3"> 
<div class="bs-sidebar hidden-print affix-top" role="complementary"> 
<ul class="nav bs-sidenav"> 
<li> 
<a href="#">Put your Side Pane Options Here</a> 
</li> 
</ul> 
</div> 
</div> 
<div id="IntroductionPane" class=" col-md-9" role="main"> 
Main Content Goes Here 
</div> 
</div><!--Ends Row--> 
</div><!--Ends Container Div-->

источник

2014-01-30 09:25:31 Learner

Карты Google в боковом меню

ответ

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