Selam senin için şöyle bir örnek yaptım umarım fikir konusunda yardımcı olur.
<?php
$db = new mysqli('localhost', 'root', '', 'r10');
$db->query('SET NAMES utf8');
$query = $db->query('SELECT * FROM kategoriler ORDER BY title ASC');
$categoryData = array();
while ($row = $query->fetch_object()) {
// Kategorileri parent-child ilişkisine göre düzenleme
// $categoryData dizisine her kategoriyi ilgili parent_id altında grupluyoruz
$categoryData[$row->parent_id][] = $row;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tab Örnek</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rubik:400,500,600,700,800&subset=latin-ext">
<link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css">
<style type="text/css">
body{font-family:Rubik;font-size:14px;background:#f0f0f0;padding-top:150px}
main{padding-top:200px}
.box{box-shadow:rgba(0,0,0,.1) 0 6px 18px;border-radius:6px;background:#fff;overflow:hidden;max-width:640px;margin:0 auto}
.box-headline{padding:15px 25px;border-bottom:1px solid #eee}
.box-headline h3{font-size:13px;font-weight:500;margin:0}
.box-body{padding:15px 25px}
.box ul{margin:0;padding:0;list-style:none}
.box-tab-menu{padding:10px 15px;border-bottom:1px solid #eee}
.box-tab-menu ul{display:flex;align-items:center}
.box-tab-menu ul li{padding:7px 15px;display:flex;align-items:center;user-select:none;cursor:pointer;transition:all .3s ease-in-out;margin-right:1em;border-radius:6px}
.box-tab-menu ul li:hover{background-color:#f0f0f0}
.box-tab-menu ul li i.fa{width:30px;height:30px;border-radius:100%;background-color:#CCC;display:flex;align-items:center;justify-content:center;margin-right:10px;color:#555}
.box-tab-menu ul li span{font-weight:500}
.box-tab-menu ul li.active{background-color:#00bd9d;color:#fff;cursor:inherit}
.box-tab-menu ul li.active i.fa{background-color:#208876;color:#fff}
.box-tab{height:0;opacity:0;visibility:hidden;transition:all .3s ease-in-out}
.box-tab.active{height:auto;visibility:visible;opacity:1;display:block}
.box-tab li{margin-right:1em;margin-bottom:1em}
.box-tab li:last-child{margin-bottom:0}
.box-tab li:before{content:"\f00c";width:20px;color:rgb(255,255,255);font-size:.7em;line-height:20px;text-align:center;height:20px;display:inline-block;margin-right:1em;font-family:FontAwesome;background:#CCC;border-radius:100%}
</style>
</head>
<body>
<div class="container">
<div class="box box-tabs">
<div class="box-tab-menu">
<ul data-key="kategoriler">
<?php
// Ana kategoriler
foreach ($categoryData[0] as $index => $category) {
echo '<li' . ( ! $index ? ' class="active"' : '') . '><i class="fa ' . $category->icon . '"></i><span>' . $category->title . '</span></li>';
}
?>
</ul>
</div>
<?php foreach ($categoryData[0] as $index => $category): ?>
<div class="box-tab<?php echo ( ! $index ? ' active' : ''); ?>">
<div class="box-body">
<ul>
<?php
foreach ($categoryData[$category->id] as $sub_category) {
echo '<li>' . $sub_category->title . '</li>';
}
?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script>
$(function(){
// Sekme geçişini yönetme
if ($(".box-tabs").length) {
$(".box-tabs ul li").click(function(){
// Kullanıcının seçtiği sekmenin sırasını localStorage'a kaydetme
localStorage.setItem("activeTab_" + $(this).parent().data("key"), $(this).index());
$(".box-tabs ul li, .box-tabs .box-tab").removeClass("active");
$(this).addClass("active");
$(".box-tabs .box-tab").eq($(this).index()).addClass("active");
});
// Sayfa yenilendiğinde kullanıcının son seçtiği sekme görüntüleniyor
if (current = localStorage.getItem("activeTab_" + $(".box-tabs ul").data("key"))) {
$(".box-tabs ul li, .box-tabs .box-tab").removeClass("active");
$(".box-tabs ul li").eq(current).addClass("active");
$(".box-tabs .box-tab").eq(current).addClass("active");
}
}
});
</script>
</body>
</html>
hocam harika olmuş elinize sağlık