2013-02-01 51 views
0

我正在調整Twitter的Bootstrap頂級菜單到Drupal菜單系統。直到現在,失敗。我正在使用Drupal模塊nicemenus在下拉菜單中顯示它們。如何使Twitter Bootstrap的css類適應drupal菜單?

這是使用CSS Bootstrap's的手工製作菜單列表:

<div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner" style="padding-left: 0px;"> 
     <div class="container"> 
      <ul class="nav"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1 
       <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#"><i class="icon-star"></i> Item 1</a></li> 
        <li><a href="#"><i class="icon-star"></i> Item 2</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Normal Menu Link without dropdown</a></li>  
      </ul> 
     </div> 
     </div> 
    </div> 

這是nicemenus菜單輸出,你可以看到引導是如此容易理解得多。

<div id="block-nice-menus-1" class="block block-nice-menus block-1 block-nice-menus-1 odd block-without-title"> 
    <div class="block-inner clearfix"> 

    <div class="content clearfix"> 
     <ul id="nice-menu-1" class="nice-menu nice-menu-down sf-js-enabled"> 
     <li class="menu-5674 menu-path-liganetnet first odd"><a href="">Link without Dropdowns</a></li> 
     <li class="menu-267 menuparent menu-path-front even"><a style="dropdown" class="dropdown active" href="/">Dropdown Link 1</a> 
      <ul style="display: none; visibility: hidden;"> 
       <li class="menu-2280 menu-path-node-196 first odd "><a href="">Item 1</a></li> 
       <li class="menu-270 menu-path-node-197 even "><a title="" href="">Item 2</a></li> 
       <li class="menu-271 menu-path-node-1464 odd last "><a title="" href="">Item 3</a></li> 
      </ul> 
     </li> 

     <li class="menu-268 menuparent menu-path-front odd"><a class="active" href="/">Dropdown Link 2</a> 
      <ul style="display: none; visibility: hidden;"> 
       <li class="menu-274 menu-path-node-214 first odd "><a title="" href="">Item 1</a></li> 
       <li class="menu-273 menu-path-node-213 even "><a title="" href="">Item 2</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div> 

我已經安裝了menu_attributes模塊,但是當我向它添加一些類時,它們只被添加到標記中。我怎樣才能以編程方式轉換這些css類?

做一個的print_r(),從來就發現這一點:

      [sidebar_second] => Array 
           (
            [nice_menus_1] => Array 
             (
              [#markup] => 

Link 1 without Dropdown 
Dropdown 1 
Dropdown 2 
Dropdown 3 



              [#contextual_links] => Array 
               (
                [block] => Array 
                 (
                  [0] => admin/structure/block/manage 
                  [1] => Array 
                   (
                    [0] => nice_menus 
                    [1] => 1 
                   ) 

                 ) 

               ) 

              [#block] => stdClass Object 
               (
                [module] => nice_menus 
                [delta] => 1 
                [theme] => liganet 
                [status] => 1 
                [weight] => -62 
                [region] => sidebar_second 
                [custom] => 0 
                [visibility] => 0 
                [pages] => 
                [title] => 
                [bid] => 744 
                [cache] => -1 
                [subject] => 
               ) 

我認爲這可能與頁面模板印刷父菜單變量來實現,然後打印孩子的班級裏瓦爾?我怎麼可以做到這一點與PHP?

感謝您的幫助!

回答

0

我做了模塊,因爲我有同樣的問題。

遵循以下步驟:

步驟1.

安裝模塊bootstrap_components從https //drupal.org/sandbox/m_roji28/2081231

從https //drupal.org安裝模塊菜單塊/項目/ menu_block

步驟2.

添加一個菜單塊,並記住菜單塊ID(菜單塊的增量)。 例子,如果菜單塊具有URL配置是這樣的:管理/結構/塊/管理/ menu_block/1 /配置,這意味着菜單塊ID爲1

步驟3.

假設你的主題是bartik,所以在bartik的template.php中加入這一行

<?php 
    function bartik_menu_link__menu_block__1(&$variables) { 
    // set options below 
     $options = array('component' => 'button_dropdowns'); 
    // stop, and enjoy 
    if(module_exists('bootstrap_components')){ 
     $pra_options = array(); 
     if(isset($variables['element']['#localized_options']['bootstrap_components'])) $pra_options = $variables['element']['#localized_options']['bootstrap_components']; 
     $variables['element']['#localized_options']['bootstrap_components'] = $options + $pra_options;//wajib ada index bootstrap_components 
     return theme_bootstrap_components_menu_link($variables); 
    } 
    else return theme_menu_link($variables); 
    }?> 

Step Finish。現在

,您的菜單塊將從

<ul class="menu clearfix"><li class="first leaf menu-mlid-611"><a style="f" class="e" rel="d" name="c" id="b" title="q" href="http://en.wikipedia.org/wiki/Sukarno"><i class="icon-camera-retro"></i>Sukarno</a></li> 
    <li class="leaf menu-mlid-612"><a title="" href="http://en.wikipedia.org/wiki/Suharto"><i class="icon-globe"></i>Suharto</a></li> 
    <li class="leaf menu-mlid-613"><a title="" href="http://en.wikipedia.org/wiki/B._J._Habibie"><i class="icon-compass"></i>B. J. Habibie</a></li> 
    <li class="leaf menu-mlid-614"><a title="" href="http://id.wikipedia.org/wiki/Abdurrahman_Wahid"><i class="icon-bolt"></i>Abdurrahman Wahid</a></li> 
    <li class="leaf menu-mlid-615"><a title="" href="http://en.wikipedia.org/wiki/Megawati_Sukarnoputri"><i class="icon-female"></i>Megawati Sukarnoputri</a></li> 
    <li class="last leaf menu-mlid-616"><a title="" href="http://en.wikipedia.org/wiki/Susilo_Bambang_Yudhoyono"><i class="icon-bug"></i>Susilo Bambang Yudhoyono</a></li> 
    </ul> 

改爲

<div class="btn-group-vertical"> 
    <button type="button" onclick="window.location.href='http://en.wikipedia.org/wiki/Sukarno'" style="f" class="e btn btn-default" rel="d" name="c" id="b" title="q"><i class="icon-camera-retro"></i>Sukarno</button> 

    <button class="btn btn-default" type="button" onclick="window.location.href='http://en.wikipedia.org/wiki/Suharto'" title="http://en.wikipedia.org/wiki/Suharto"><i class="icon-globe"></i>Suharto</button> 

    <button class="btn btn-default" type="button" onclick="window.location.href='http://en.wikipedia.org/wiki/B._J._Habibie'" title="http://en.wikipedia.org/wiki/B._J._Habibie"><i class="icon-compass"></i>B. J. Habibie</button> 

    <button class="btn btn-default" type="button" onclick="window.location.href='http://id.wikipedia.org/wiki/Abdurrahman_Wahid'" title="http://id.wikipedia.org/wiki/Abdurrahman_Wahid"><i class="icon-bolt"></i>Abdurrahman Wahid</button> 

    <button class="btn btn-default" type="button" onclick="window.location.href='http://en.wikipedia.org/wiki/Megawati_Sukarnoputri'" title="http://en.wikipedia.org/wiki/Megawati_Sukarnoputri"><i class="icon-female"></i>Megawati Sukarnoputri</button> 

    <button class="btn btn-default" type="button" onclick="window.location.href='http://en.wikipedia.org/wiki/Susilo_Bambang_Yudhoyono'" title="http://en.wikipedia.org/wiki/Susilo_Bambang_Yudhoyono"><i class="icon-bug"></i>Susilo Bambang Yudhoyono</button> 
    </div>