从PHP数组构建一个bootstrap下拉式多级菜单

时间：2016-02-20 18:38:28

标签： php arrays twitter-bootstrap menu

我试图用PHP中的数组创建一个自举下拉菜单。

我编写了一个递归菜单函数，但我正在努力添加bootstrap所需的自定义html属性。

我的菜单数组采用以下格式：

$menu = array(
   'calendar' => array(
      'text'   => 'Calendar',
      'rights' => 'user'
   ),
   'customers' => array(
      'text'   => 'Customers',
      'rights' => 'user',
      'sub' => array(
         'create-new' => array(
            'text'   => 'Create new customer',
            'rights' => 'user'
         ),
         'show-customers' => array(
            'text'   => 'Show all customers',
            'rights' => 'user'
         )
      )
   )
);

PHP用于从上面的数组构建菜单：

function buildMenu($menu_array, $is_sub=FALSE) {

   $attr = (!$is_sub) ? ' id="menu"' : ' class="submenu"';
   $menu = "<ul".$attr.">";

   foreach($menu_array as $id => $properties) {
      foreach($properties as $key => $val) {
         if(is_array($val)) {
            $sub = buildMenu($val, TRUE);
         }
         else {
            $sub = NULL;
            $$key = $val;
         }
      }
      if(!isset($url)) {
         $url = $id;
      }
      $menu .= "<li><a href=".$url.">".$text."</a>".$sub."</li>";
      unset($url, $text, $sub);
   }

   return $menu . "</ul>";
}

echo $output = buildMenu($menu);

我想要的输出是：

<ul class="nav navbar-nav">
    <li><a href="#">Calendrier</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Customers <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Create new customer</a></li>
            <li><a href="#">Show all customers</a></li>
        </ul>
    </li>
</ul>

5 个答案:

答案 0 :(得分：1)

您的菜单功能对我有用，但菜单的html属性需要进行一些更改：

<?php
function buildMenu(array $menu_array, $is_sub=FALSE)
{
   $ul_attrs = $is_sub ? 'class="dropdown-menu"' : 'class="nav navbar-nav"';
   $menu = "<ul $ul_attrs>";

   foreach($menu_array as $id => $attrs) {
      $sub = isset($attrs['sub']) 
         ? buildMenu($attrs['sub'], TRUE) 
         : null;
      $li_attrs = $sub ? 'class="dropdown"' : null;
      $a_attrs  = $sub ? 'class="dropdown-toggle" data-toggle="dropdown"' : null;
      $carat    = $sub ? '<span class="caret"></span>' : null;
      $menu .= "<li $li_attrs>";
      $menu .= "<a href='$id' $a_attrs>${attrs['text']}$carat</a>$sub";
      $menu .= "</li>";
   }

   return $menu . "</ul>";
}

您可以传入父路径段而不是$ is_sub boolean来构建url路径，或者将URL明确添加到菜单数组中并进行相应调整。

答案 1 :(得分：0)

你可以澄清一下无法回显子菜单吗？你的意思是： - 第一级显示，但第二级没有 - 没有出现:) - 或者您只是不确定如何编辑代码以实现所需的输出？

我问，因为使用你的脚本显示的东西为：

<?php

$menu = array(
   'calendar' => array(
      'text'   => 'Calendar',
      'rights' => 'user'
   ),
   'customers' => array(
      'text'   => 'Customers',
      'rights' => 'user',
      'sub' => array(
         'create-new' => array(
            'text'   => 'Create new customer',
            'rights' => 'user'
         ),
         'show-customers' => array(
            'text'   => 'Show all customers',
            'rights' => 'user'
         )
      )
   )
);

buildMenu($menu);

function buildMenu($menu_array, $is_sub=FALSE) {

   $attr = (!$is_sub) ? ' id="menu"' : ' class="submenu"';
   $menu = "<ul".$attr.">";

   foreach($menu_array as $id => $properties) {
      foreach($properties as $key => $val) {
         if(is_array($val)) {
            $sub = buildMenu($val, TRUE);
         }
         else {
            $sub = NULL;
            $$key = $val;
         }
      }
      if(!isset($url)) {
         $url = $id;
      }
      $menu .= "<li><a href=".$url.">".$text."</a>".$sub."</li>";
      unset($url, $text, $sub);
   }

   return $menu . "</ul>";
}

echo $output = buildMenu($menu);
 ?>

对我来说很好，但结果（添加标签/新行）更像是

<ul id="menu">
    <li><a href=calendar>Calendar</a></li>
    <li>
        <a href=customers>Customers</a>
        <ul class="submenu">
            <li><a href=create-new>Create new customer</a></li>
            <li><a href=show-customers>Show all customers</a></li>
       </ul>
    </li>
</ul>

答案 2 :(得分：0)

我继续将url属性添加到数组中，因此数组如下所示：

$menu = array(
   'calendar' => array(
      'text'   => 'Calendar',
      'rights' => 'user',
      'url'    => '#' 
   ),  
   'customers' => array(
      'text'   => 'Customers',
      'rights' => 'user',
      'sub' => array(
         'create-new' => array(
            'text'   => 'Create new customer',
            'rights' => 'user',
            'url'    => '#' 
         ),
         'show-customers' => array(
            'text'   => 'Show all customers',
            'rights' => 'user',
            'url'    =>  '#' 
         )   
      )   
   )   
);

然后修改代码。有很多变化，最值得注意的是你不需要遍历每个键=＆gt;数组中的值对 - 因为你知道他们将要命名的是什么，你可以只访问它们（我假设你的子菜单总是有一个名为＆＃34的子键运行; sub＆ ＃34;如果我错了，请纠正我。我提出的最终代码，假设您的密钥名称将始终是＆＃39; text＆＃39;，＆＃39; url＆＃39;和＆＃39; sub＆＃39;是这样的：

function buildMenu($menu_array, $is_sub=FALSE) {

   $attr = (!$is_sub) ? ' class="nav navbar-nav' : ' class="dropdown-menu"';
   $menu = "<ul".$attr.">";

   foreach($menu_array as $menu_item) {

     //set our link text
     $text = $menu_item['text'];

     //if we have a submenu
     if(isset($menu_item['sub'])) {

        //construct the submenu
        $sub = buildMenu($menu_item['sub'], TRUE);

        //give our li the appropriate class
        $li_class = 'class="dropdown"';

        //we don't need a real url for a dropdown
        $url = '#';

        //set up our additional anchor attributes
        $additional_attr = 'class="dropdown-toggle" data-toggle="dropdown"';
     } else {
        //no submenu
        $sub = '';

        //no li class needed
        $li_class = '';

        //assign our url (if it exists)
        $url = isset($menu_item['url']) ? $menu_item['url'] : '';

        //no additional attributes needed for our anchor tag
        $additional_attr = '';
     }

     //construct the whole thing
     $menu .= "<li $li_class><a href='".$url." '" . $additional_attr . ">".$text."</a>".$sub."</li>";
   }

给出了输出：

<ul class="nav navbar-nav>
    <li ><a href='#'>Calendar</a></li>
    <li class="dropdown">
        <a href='#' class="dropdown-toggle" data-toggle="dropdown">Customers</a>
        <ul class="dropdown-menu">
            <li ><a href='#'>Create new customer</a></li>
            <li ><a href='#'>Show all customers</a></li>
        </ul>
    </li>
</ul>

答案 3 :(得分：0)

这是一个三级引导程序下拉菜单：

<?php
$menu = array(
    'link1' => array(
        'text'      => 'Link1',
    ),
    'link2' => array(
        'text'      => 'Link2',
        'sub_link2' => array(
            'sub_link2-1'   => array(
                'text'      => 'Sub_Link2',
            ),
        )
    ),
    'link3' => array(
        'text' => 'Link3',
        'sub_link3' => array(
            'sub_link3-1'   => array(
                'text'      => 'Sub_Link3',
            ),
            'sub_link4-1'   => array(
                'text'      => 'Sub_Link4',
                'sub_link4' => array(
                    'sub_link_4-1'  => array(
                        'text'      => 'Sub_Link_4-1',
                    ),
                    'sub_link_4-2'  => array(
                        'text'      => 'Sub_Link_4-2',
                    )
                )
            )
        )
    )
);

build_menu($menu);

function build_menu($menu_array, $is_sub = false)
{
    $attr = $is_sub ? ' class="dropdown-menu"' : ' class="nav navbar-nav"';
    $menu .= '<ul' . $attr . '>';

    foreach($menu_array as $id => $properties)
    {
        foreach($properties as $key => $val)
        {
            if(is_array($val))
            {
                $sub = build_menu($val, true);
            }
            else
            {
                $sub = NULL;
                $$key = $val;
            }
        }
        if(!isset($url))
        {
            $url = $id;
        }

        $li_class = ($is_sub && $sub) ? ' class="dropdown-submenu"' : '';
        $a_class = $sub ? 'class="dropdown-toggle" data-toggle="dropdown"' : '';
        $carret = ($sub && !$li_class) ? ' <i class="caret"></i>' : '';
        $menu .= '<li' . $li_class . '><a ' . $a_class . ' href="' . $url . '">'. $text . '' . $carret . '</a>' . $sub . '</li>';
        unset($url, $text, $sub);
    }

    $menu .= '</ul>';
    return $menu;
}

?>

在html输出中：

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <?php
            echo $output = build_menu($menu);
        ?>
    </div>

生成此html代码：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li><a  href="link1">Link1</a></li>
        <li><a class="dropdown-toggle" data-toggle="dropdown" href="link2">Link2 <i class="caret"></i></a>
            <ul class="dropdown-menu">
                <li><a  href="sub_link2-1">Sub_Link2</a></li>
            </ul>
        </li>
        <li><a class="dropdown-toggle" data-toggle="dropdown" href="link3">Link3 <i class="caret"></i></a>
            <ul class="dropdown-menu">
                <li><a  href="sub_link3-1">Sub_Link3</a></li>
                <li class="dropdown-submenu">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="sub_link4-1">Sub_Link4</a>
                    <ul class="dropdown-menu">
                        <li><a  href="sub_link_4-1">Sub_Link_4-1</a></li>
                        <li><a  href="sub_link_4-2">Sub_Link_4-2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

答案 4 :(得分：0)

mysql表结构如下

SN-ID-Title-Link-ParentID-User
01-400-Search-#-0-zaman
02-100-Admin-#-0-zaman

我如何在数组中添加它

相关问题
最新问题