如何使用php或javascript将特定的css id添加到父菜单中

Question

We are developing a menu which is taking datas from mysql.

DB Structure;

id  | name      | link      |   parent_id   
-----------------------------------------
1   | Home      | p.php     |   0
2   | Portfolio | p.php     |   0
3   | Projects  | p.php     |   0
4   | Contact   | p.php     |   0
5   | Web Design| p.php     |   2
6   | Grap. Desg| p.php     |   2
.
.
.
14  | Quote     | p.php     |   6 
.
-----------------------------------------

PHP and PDO;

<?php
$baseUri = $_SERVER['PHP_SELF'];
$menuHtml='';
function createMenu($parentId){
    global $baseUri;
    global $menuHtml;
    global $db;
    $query = $db->prepare('SELECT * FROM menu_options WHERE `parent_id` = ?');
    $query->bindParam(1, $parentId, PDO::PARAM_INT);
    $query->execute();
    $rowCount = $query->rowCount();
    if ($rowCount == 0) return;
    if ($parentId == 0)
        $menuHtml.="<ul id=\"menu\">
";
    else
    $menuHtml.='<ul>';
    while($row = $query->fetch(PDO::FETCH_OBJ))
    {
        $menuHtml.='<li><a href="'.$row->url.'">'.$row->name.'</a>';
        createMenu($row->id);
        $menuHtml.='</li>';
    }   
$menuHtml.='</ul>';
return $menuHtml;
}
echo createMenu(0);
?>

And HTML Result;

<ul>
    <li><a href="index.php">HOMEPAGE</a></li>
    <li class=""><a href="articles.php">CORPORATE</a>
        <ul style="visibility: hidden; display: none;">
            <li><a href="article.php?i=1">About Us</a></li>
            <li><a href="article.php?i=1">Mission Vision</a></li>
            <li><a href="project2.php">Company Tag</a></li>
            <li><a href="project2.php">Production</a></li>
        </ul>
     </li>
     <li class=""><a href="projects.php">PRODUCTS</a>
        <ul style="visibility: hidden; display: none;">
            <li><a href="project4.php">Meltblown</a></li>
            <li><a href="support.php">Spunbond</a></li>
            <li><a href="quote.php">Sms &amp; Smms</a></li>
            <li><a href="">Composites</a></li>
        </ul>
     </li>
     <li><a href="articles.php?i=1">QUALITY</a></li>
     <li><a href="articles.php?i=1">NEWS</a></li>
     <li><a href="gallery.php">GALLERY</a></li>
     <li><a href="contact.php">CONTACT</a></li>
</ul>

We think some kind of if else statement with $baseUri = $_SERVER['PHP_SELF']; but it doesnt solve our problem. We want to add a css class with PHP for Eg.; If we are in index.php Menu must look like;

<ul>
        <li><a class="current" href="index.php">HOMEPAGE</a></li>
        <li class=""><a href="articles.php">CORPORATE</a>

We have submenus, and those submenus has parent menu. We want to add specific CSS class to only parent_id = 0. If a submenu's parent menu is bigger than 0 it should be look up parent menu's parent menu. It's a little bit complicated and we are confused.

Answer 1

You could add a p parameter in your URLs, representing the parentId

<ul>
    <li><a href="index.php?p=0">HOMEPAGE</a></li>
    <li class=""><a href="articles.php?p=1">CORPORATE</a>
        <ul style="visibility: hidden; display: none;">
            <li><a href="article.php?i=1&p=1">About Us</a></li>
            <li><a href="article.php?i=1&p=1">Mission Vision</a></li>
            <li><a href="project2.php&p=1">Company Tag</a></li>
            <li><a href="project2.php&p=1">Production</a></li>
        </ul>
     </li>
     <li class=""><a href="projects.php?p=2">PRODUCTS</a>
        <ul style="visibility: hidden; display: none;">
            <li><a href="project4.php?p=2">Meltblown</a></li>
            <li><a href="support.php?p=2">Spunbond</a></li>
            <li><a href="quote.php?p=2">Sms &amp; Smms</a></li>
            <li><a href="">Composites</a></li>
        </ul>
     </li>
     <li><a href="articles.php?i=1&p=3">QUALITY</a></li>
     <li><a href="articles.php?i=1&p=4">NEWS</a></li>
     <li><a href="gallery.php?p=5">GALLERY</a></li>
     <li><a href="contact.php?p=6">CONTACT</a></li>
</ul>

And then in your PHP you write this :

$page=-1;
if(isset($_GET['p'])){
    $page = htmlspecialchars($_GET['p']);
}

and later in the code when you add your <li> elements, you write that (note the add of theClassYouWantToAdd)

if($parentId == $page){
    $menuHtml.='<li class="theClassYouWantToAdd"><a href="'.$row->url.'">'.$row->name.'</a>';
} else {
    $menuHtml.='<li><a href="'.$row->url.'">'.$row->name.'</a>';
}