侧边菜单上的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)

我使用的是正常图表谷歌，这个问题是我应该在哪里添加谷歌图表代码，使其侧面菜单内，可见当侧菜单上滑动到左侧。

答

对于侧窗格导航，您可以在Bootstrap中将div与类bs-sidebar一起使用。以下代码将在3/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-->

侧边菜单上的Google图表

相关推荐