Navigation menu with php, js and 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.

@Technoh here is a fiddle jsfiddle.net/eFPpC The JS doesn't seem to work on it however, but hopefully it makes a little more sense. — Jim Sundqvist
– Jim Sundqvist, Commented Aug 28, 2013 at 14:11
I've fixed your jsFiddle and added it to your question (you forgot to include jQuery). Now, the main difference between your new and old code is that the old code did not trigger a refresh so the navigation could stay open. With your new code, the whole page gets refreshed. The only thing I can think of to keep the navigation open would be to use ajax to swap out the page content. — Graham Walters
– Graham Walters, Commented Aug 28, 2013 at 14:25
@GrahamWalters Thanks mate, much appreciated with the edits. Perhaps you are able to provide some coded answer to what i can do? I've searched about this pretty long, and some people seem to get it to work with different measures than ajax, however on my dynamic menu it doesn't seem to work with their setup. — Jim Sundqvist
– Jim Sundqvist, Commented Aug 28, 2013 at 14:33
Any chance you can link me to an example of what you're trying to do? I must be missing something if they're not using ajax. — Graham Walters
– Graham Walters, Commented Aug 28, 2013 at 14:35

Graham Walters · Accepted Answer · 2013-08-28 16:08:04Z

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

answered Aug 28, 2013 at 16:08

Graham Walters

2,0642 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Technoh Over a year ago

But you still need to show sub-menus when clicking on the parent category, so won't you still need javascript for that?

Graham Walters Over a year ago

While the page is being built, the php will insert style="display:block;" on whichever sub nav is to be displayed. Here's a jsFiddle of what the output should look like. The jsFiddle is an example of what would be shown when you navigate to http://www.mysite.com/cats/123/Cars/

Technoh Over a year ago

In your jsfiddle if you click on Guns you are taken to the page instead of the sub-menu sliding down and the Cars sub-menu sliding up. Jim will correct me if I'm wrong but I think that is the expected behavior he is looking for.

Jim Sundqvist Over a year ago

I will give this a try, i think it looks like it's the way i want it to be in the fiddle. @Technoh feel free to give a answer as well, i will try all answers i get when i get to the office tomorrow morning.

Graham Walters Over a year ago

Having the sub nav slid down and then refresh the page is not exactly the best user experience. I got rid of the javascript for that reason. If he wanted the navigation to animate like that, then I would go back to my ajax recommendation because the entire page would not have to refresh.

|

Collectives™ on Stack Overflow

Navigation menu with php, js and mysql

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related