用于 mysql 数据库数据的大型下拉菜单 css

Posted 2023-05-09

【中文标题】用于 mysql 数据库数据的大型下拉菜单 css

【英文标题】：Mega dropdown menu css for mysql database data

【发布时间】：2018-06-08 22:43:02

【问题描述】：

我想制作来自 mysql 数据库的大型下拉菜单。下面是我的php代码。代码运行良好。但问题是我无法为下面的代码制作大型下拉菜单。

我需要像这里的示例这样的大型菜单：https://bootsnipp.com/snippets/featured/bootstrap-mega-menu

我的问题是如何使用下面的 php 代码制作更多 div 。

请帮我css 用于如上所示的大型下拉菜单。

<?php 
$sql = "SELECT id, product, parent_id, category_link FROM category ORDER BY parent_id, id";
$results = mysqli_query($conn,$sql) or die(mysqli_error()) ;
if($results)

    while($result = mysqli_fetch_array($results))
    
        $category['categories'][$result['id']] = $result; 
        $category['parent_cats'][$result['parent_id']][] = $result['id']; 
    


function getCategories($parent, $category) 

    $html = "";
    if (isset($category['parent_cats'][$parent]))
    
        $html .= "<div id='wrapper'>";
        $html .= "<ul class='mega-menu'>\n";
        foreach ($category['parent_cats'][$parent] as $cat_id)
        
            if (!isset($category['parent_cats'][$cat_id]))
            
              $html .= "<li class='mega-menu-drop'>\n  <a class='mega-menu-content' href='" . $category['categories'][$cat_id]['category_link'] . "'>" . $category['categories'][$cat_id]['product'] . "</a>\n</li> \n";
            
            if (isset($category['parent_cats'][$cat_id]))
            
              $html .= "<li class='mega-menu-drop'>\n  <a class='mega-menu-content' href='" . $category['categories'][$cat_id]['category_link'] . "'>" . $category['categories'][$cat_id]['product'] . "</a> \n";
              $html .= getCategories($cat_id, $category);
              $html .= "</li> \n";
            
        
        $html .= "</ul> \n";
        $html .= "</div>";

    
    return $html;

?>
<?php echo $data['category'] = getCategories(0, $category);?>

【问题讨论】：

你能问个问题吗？您已经有了可以遵循的示例。应用适当的类名并优化由 PHP 代码创建的标记。

我无法像示例页面中那样为 css 创建大型菜单。

【参考方案1】：

根据您的评论。我想你需要一些 CSS。 这将适用于鼠标悬停。但不像你的例子那样点击：

.mega-menu-drop 
  display:none


.mega-menu:hover .mega-menu-drop 
  display:block

【讨论】：

请提供一个渲染的标记示例。我无法使用 PHP 代码，因为我不知道您的数据