Я смотрю на создание динамической навигации, похожей на ту, что есть в w3schools (у меня недостаточно очков, чтобы можно было вставлять изображения, но пока я застрял со ссылками):
Они будут основаны на следующей таблице PHP:
введите описание изображения здесь
Где parent_id иchild_id равны 0 Я хочу, чтобы эти страницы были основными элементами навигации, поэтому в этом случае я хочу, чтобы DMX, VMAX, VMAX3, VMAX AF и PowerMax отображались на панели навигации.
После этогоИдея состоит в том, чтобы перечислить модели каждого продукта, однако это должно появиться только тогда, когда пользователь наводит указатель мыши на один из основных вариантов выбора, а parent_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);
}
}
КодЯ долженing на главной странице:
<?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;
}
Так что в принципе я не могу получить больше, чем изображение ниже, когда пытаюсь построить навигациюbar: введите описание изображения здесь Я могу получить основные разделы, такие как DMX, VMAX, VMAX3, VMAX AF и PowerMax для правильного заполнения.Однако он не отображается в одной горизонтальной линии, и показание parent_ids отображается только в том случае, если пользователь наводит курсор на основной раздел.
Любая помощь будет принята с благодарностью:)