Mini Slide Navigation (UPDATED)

Originally Published: January 3, 2006 | Original Blog Post

Updated: October 10, 2008 | Blog Post

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.

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 using PHP, while still indicating what page the user is on

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));?>


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"'; }?>

All the stylesheets, javascripts, and code can be found below. This has been tested on IE 7+ and Firefox 3+. Let me know if you make any enhancements or edits so I can update my version. Enjoy!

 

The style sheet and Javascript for the navigation is below:

• Download Style Sheet
  
• Download Javascript

The markup for the navigation you see above is as follows.

<div class="nav">
<?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>


 

 

---