带有php，js和mysql的导航菜单

Question

Note: original & new inside the code.

My issue here is that the original "parent" is not very SEO friendly and does not act according to plan, it also does not get fetched up in sitemaps.

However the new is SEO friendly, will get picked up in sitemaps and will be according to plan in the end.

I need it to be a link so that you can see both the navigation menu to the left with the name of each menu / sub-menu and in the center of the page have a picture with the name for each sub-menu depending on which parent you click in the navigation menu on the left.

With the new line added i get a page refresh due to the link, so the sub-menus only flash open for a second before the refresh.

What i need help solving is:

-Making the sub-menu stay open during page refresh so you can use both the navigation from the sidebar navigation and the center navigation.

Thanks in beforehand!
//Jim

This is my current menu:

<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");
     });
});

Here's a jsFiddle of my code.

Answer 1

First you'll want to clean up your html and css. Then you're going to want to check which page the user is viewing and if it's a category, show that specific sub navigation.

Here's your cleaned up php/html. I think you've messed up your variable names, so if this doesn't work, that's probably why.

Example, you have *New*: <dt><a href="http://www.mysite.com/cats/<?php echo $msub['nmr'];?> but $msub['nmr']; is not set in the code above where it is used.

<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>

Here's the CSS to go with it.

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 */
}

Because of the way I used css, you no longer need to use JavaScript :)