php - 使用 php、js 和 mysql 的导航菜单

Question

注意:代码中有原始和新。

我的问题是，原始“父级”对 SEO 不是很友好，不按计划行事，它也不会在站点地图中获取。

但是新是 SEO 友好的，将在站点地图中被选中，最终将按计划进行。

我需要它是一个链接，这样您就可以在左侧看到带有每个菜单/子菜单名称的导航菜单，并在页面中央看到带有每个子菜单名称的图片取决于您在左侧导航菜单中单击的父项。

添加 new 行后，由于链接，我得到了页面刷新，因此子菜单仅在刷新前闪烁打开一秒钟。

我需要帮助解决的是:

-使子菜单在页面刷新期间保持打开状态，以便您可以同时使用侧边栏导航和中心导航中的导航。

提前致谢!
//吉姆

这是我当前的菜单:

<div id="container">
    <dl>
    <?php 
        $select_category = mysql_query("SELECT * FROM menu WHERE hidden = 0 ORDER BY menu ASC");
            while($ln = mysql_fetch_array($select_category)){
                $idcat = $ln['nmr'];
                $catname = str_replace(' ', '-', $ln['menu']);
    ?>

            *Original*: <dt><a href="#/<?php echo $catname; ?>/" style="color:#000;" ><strong><?php echo $ln['menu']; ?></strong></a></dt>

        *New*: <dt><a href="http://www.mysite.com/cats/<?php echo $msub['nmr'];?>/<?php echo $mname; ?>/" style="color:#000;" ><strong><?php echo $mn['menu']; ?></strong></a></dt>

        <?php 
            $select_sub = mysql_query("SELECT * FROM submenu WHERE nmrmenu = '$idcat' AND hidden = 0");
            if(mysql_num_rows($select_sub) == 0){
            }else {
        ?>
        <dd>
        <ul>
        <?php
            while($lsub = mysql_fetch_array($select_sub)){
                $subname = str_replace(' ', '-', $lsub['submenu']);
                $pil = '&raquo;';
                $brnr = $lsub['nmr'];
        ?> 
        <li> <a href="http://www.mysite.com/cat/<?php echo $lsub['nmr'];?>/<?php echo $subname; ?>/" style="color:#333;"> <?php echo $pil; ?>&nbsp;<?php echo $lsub['submenu']; ?></a></li>
        <?php } ?>
        </ul>
        </dd>
       <?php } ?>
      </dl>
     <?php } ?>
   </div>

CSS:

#container{ margin:auto; margin-left:10px; }
dl, dt, dd, ul, li, a{ margin:0; padding:0; }
a{ text-decoration: none; color:#0F0; }
li{ padding-left:.6em; list-style-type:none; color:#FF0; }
dl{ width:100px; }
dt{  }

JS:

$(function()
{
    $("dd:not(first)").hide();
    $("dt a").click(function()
     {
         $("dd").slideUp("normal");
         $(this).parent("dt").next("dd").slideDown("normal");
     });
});

这是一个 jsFiddle我的代码。

Answer 1

首先，您需要清理 html 和 css。然后您将要检查用户正在查看哪个页面，如果它是一个类别，则显示该特定的子导航。

这是您清理过的 php/html。我认为您弄乱了变量名，所以如果这不起作用，可能就是这个原因。

例如，您有 *New*: <dt><a href="http://www.mysite.com/cats/<?php echo $msub['nmr'];?>但是$msub['nmr'];没有在上面使用它的代码中设置。

<ul id="nav-container">
<?php 
$select_category = mysql_query("SELECT * FROM menu WHERE hidden = 0 ORDER BY menu ASC");
while ($ln = mysql_fetch_array($select_category)) {
  $idcat = $ln['nmr'];
  $catname = str_replace(' ', '-', $ln['menu']);

  echo '<li>'
  echo '<a href="http://www.mysite.com/cats/'.$msub['nmr'].'/'.$mname.'/" ><strong>'.$mn['menu'].'</strong></a>';
  echo '<ul';

  // This is where we check which page you're on, and show the sub navigation if it corresponds to that page.
  if ($GET['cat'] == $msub['nmr'])
    echo ' style="display:block;">';
  else
    echo '>';


  while ($lsub = mysql_fetch_array($select_sub)) {
    $subname = str_replace(' ', '-', $lsub['submenu']);
    $pil = '&raquo;';
    $brnr = $lsub['nmr'];

    echo '<li><a href="http://www.mysite.com/cat/'.$lsub['nmr'].'/'.$subname.'/">'.$pil.'&nbsp;'.$lsub['submenu'].'</a></li>';
  }

  echo '</ul>';
  echo '</li>';
}

?>

</ul>

这是与之配套的 CSS。

a {
    text-decoration: none;
    color: #333;
}
li {
    padding-left: .6em;
    list-style-type:none;
    color:#FF0;
}

#nav-container li ul {
    display: none; /* Hide all sub navigations to start with */
}

由于我使用 css 的方式，您不再需要使用 JavaScript :)