Question

我正在考虑构建一种动态导航，其外观类似于w3schools（我没有足够的点数来嵌入图像，但目前仅停留在链接上）：

这些将基于以下PHP表：

parent_id和child_id为0的情况下，我希望这些页面成为主要的导航选择，因此在这种情况下，我希望DMX，VMAX，VMAX3，VMAX AF和PowerMax显示在导航栏上。

此后，我们的想法是列出每种产品的型号，但这仅在用户将鼠标悬停在主要选择之一上时才会出现，parent_id等于页面的ID。

最后，当您将鼠标悬停在parent_id的结果上时，您将获得child_id，这将由child_id等于parent_id决定。

我在代码中调用的函数是：

function loop_array($array = array(), $parent_id = 0){
    if(!empty($array[$parent_id])){
        echo '<ul>';
            foreach($array[$parent_id] as $items){
                echo '<li>';
                ?>
                    <a href="view.php?id=<?php echo $items['id'] ?>"><?php echo $items["title"] ?></a>
                    <?php loop_array($array, $items['id']);echo '<br><br><br><br>';
            }
        echo '</ul>';
    }
}

function display_menus(){
    $con = mysqli_connect("localhost", "root", "", "solvedesktop");
    $query = $con->query("SELECT * FROM pages WHERE published = 1");
    $array = array();

    if(mysqli_num_rows($query)){
        while($rows = mysqli_fetch_array($query)){
            $array[$rows['parent_id']][] = $rows;
        }
        loop_array($array);
    }
}

我在主页上使用的代码是：

<?php require_once(__DIR__."/../includes/functions.php"); ?>
<?php require_once(__DIR__."/../includes/config.php"); ?>
<?php require_once(__DIR__."/../includes/header.php"); ?>
<?php $page = getPage($_GET["id"]); ?>
<h2 style="text-align:center;">PSE Solve Desktop</h2>
                <?php display_menus(); ?>
        </div>
<div>
    <?php echo returnPageError(); ?>
</div>
<h2> <?php echo $page['title']; ?> </h2>
<br>
<p> <?php echo $page['body']; ?></p>
<script>
    CKEDITOR.replace( 'body' );
</script>

我目前拥有的CSS是：

 ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00008B;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: #000000;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

因此，基本上，在尝试构建导航栏时，我无法超出下图： enter image description here 我可以正确地填充DMX，VMAX，VMAX3，VMAX AF和PowerMax等主要部分。但是，它并没有在一条水平线上显示，并且仅当用户将鼠标悬停在主要部分上时，才会显示parent_id。

任何帮助将不胜感激：）

Answer 1

这里的问题是 CSS ，只需在菜单项中添加一些max-width。

这个解决了还是不让我知道。

动态PHP导航菜单

1 个答案: