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="minislide-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>


  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!


A zip file of the code is below. It includes a basic HTML page, the JS and the CSS.


Need Help?

I’ll do my best to help out if you run into issues. I have tested this 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!

Use this field to share an example image (a page or image URL) you're interested in seeing on a Desktop Wallpaper (optional)

Making a request? Support Stephen's work.

1 Comment
Inline Feedbacks
View all comments

Click or scan a QR code below and
show some support for Stephen's wallpaper work.

Send $5+ with
Square's Cash App

Buy Stephen a gift from his Amazon Wish List

Send $5+ with Paypal