Minislide Navigation

Original Post: 1.3.06
Updated Post: 10.11.08

Back in 2006, I was playing around with a couple of navigation treatments that I’d seen – Simplebits’ MiniTabs and SlayerOffice’s Focus Slide – and I came up with a navigation “mash-up” of the two that I called the Mini Slide Navigation, in an ode to each of the two navigations I mashed together. Hover over the different navigation items immediately below to see it in action.

Since the original publication, two people (that I’m aware of) have built on what I did and improved the original. Visit Rob Glazebrook’s Smart Mini Tabs and Brian McAllister’s Animated MiniTabs to see what they did.

And now, I’ve built on what they did and added a few other tweaks to the base code as I’ve incorporated some PHP into the mix, along with updated Javascript and CSS. So what exactly have I done? I’m glad you asked. Basically, I enabled the navigation to be employed as an include that uses PHP, so the navigation will be able to indicate what page the user is currently on and then “snap’ to where they hover within the navigation.

Step One

First, I established some PHP conditions to determine the current or “active” directory. I had to use three different variables because on my site I have pages that go three directories deep:

<?php $currentDir = dirname($_SERVER['PHP_SELF']); ?>
<?php $subDir = array_pop(array_slice(split( "/" ,dirname($_SERVER['PHP_SELF'])),0,-1));?>
<?php $subsubDir = array_pop(array_slice(split( "/" ,dirname($_SERVER['PHP_SELF'])),0,-2));?>

Step Two

Then, I put in some “if/then” and “elseif” items in the navigation code itself, which basically outputs what the current directory is from the above conditions. Depending on which level directiony is output, that then determines what element of the navigation is “active”. So on the web page, the correct navigation is highlighted.

<?php if ($currentDir == '/sandbox') {echo 'class="active"'; } elseif ($subDir == 'sandbox') {echo 'class="active"'; } elseif ($subsubDir == 'sandbox') {echo 'class="active"'; }?>

Mark Up Code

The markup for the navigation you see in the above example is as follows:

<div class="navigation">
<?php $currentDir = dirname($_SERVER['PHP_SELF']); ?>
<?php $subDir = array_pop(array_slice(split( "/" ,dirname($_SERVER['PHP_SELF'])),0,-1));?>
<?php $subsubDir = array_pop(array_slice(split( "/" ,dirname($_SERVER['PHP_SELF'])),0,-2));?>
<ul id="minislide" class="right">
	<li><a <?php if ($currentDir == '/') {echo 'class="active"'; }?> href="#" title="">Home</a></li>
	<li><a <?php if ($currentDir == '/sandbox') {echo 'class="active"'; } elseif ($subDir == 'sandbox') {echo 'class="active"'; } elseif ($subsubDir == 'sandbox') {echo 'class="active"'; }?>  href="#" title="">Short</a></li>
	<li><a <?php if ($currentDir == '/house') {echo 'class="active"'; } elseif ($subDir == 'house') {echo 'class="active"'; } elseif ($subsubDir == 'house') {echo 'class="active"'; }?>  href="#" title="">Very Long</a></li>
	<li><a <?php if ($currentDir == '/resume') {echo 'class="active"'; } elseif ($subDir == 'resume') {echo 'class="active"'; } elseif ($subsubDir == 'resume') {echo 'class="active"'; }?> href="#" title="">Very Very Very Long</a></li>
	<li><a <?php if ($currentDir == '/contact') {echo 'class="active"'; }?>  href="#" title="">Supercalifragilisticexpialidocious</a></li>
	<li><a <?php if ($currentDir == '/about') {echo 'class="active"'; }?>  href="#" title="">About</a></li>
</ul>
</div>

Installation

  1. All the stylesheets, javascripts, and code can be downloaded from the links below.
  2. Link to the CSS and the Javascript files within the <head> of your site.
  3. Copy the code above, customize it as needed, and save it as its own *.php file
  4. Put the *.php file in your “/include/” folder, and then link to it from the pages you want the navigation to appear on
  5. Tweak and refine as needed. And, you’re done!

Downloads

This has been tested on the modern versions of Chrome, Firefox and IE.

Let me know if you see any bugs or make any enhancements/edits so I can update my version. Enjoy!

Write a Comment

Comment

  1. Hi Ronnie: I took a look at the navigation in FF 26 and I’m seeing the same thing. I’m not sure what is going on but I’ll look into the script to see if I can solve it. This navigation and JS has worked fine on FF in the past so definitely surprised it is breaking. No promises on a solution as this mash up is now about 8 years old at this point but I’ll give it a shot.

    Steve