Mini Slide Navigation es un menú horizontal que mediante javascript introduce un atractivo borde inferior deslizante.
1.- Tenemos un menú en forma de lista, tal que así:
<ul id="navheader">
<li id="home"><a href="#" title="Home">Home</a></li>
<li id="portfolio"><a href="#" title="Portfolio">Portfolio</a></li>
<li id="methodology"><a href="#" title="Methodology">Methodology</a></li>
<li id="prices"><a href="#" title="Prices">Prices</a></li>
<li id="contact"><a href="#" title="Contact">Contact</a></li>
</ul>
2.- Archivo javascript a guardar en nuestro servidor:
/******************************************************
Focus Slide
version 1.0
last revision: 12.17.2004
steve@slayeroffice.com
Should you improve upon or
modify this code, please let me know
so that I can update the version hosted
at slayeroffice.
PLEASE LEAVE THIS NOTICE INTACT!
******************************************************/
window.onload = init;
var d=document; // shortcut reference to the document object
var activeLI = 0; // the currently "active" list element - value represents its index in the liObj array
var zInterval = null; // interval variable
var SLIDE_STEP = 10; // how many pixels to move the sliding div at a time
var SLIDER_WIDTH = 80; // the width of the sliding div. used to calculate its left based on the width and left of the active LI element
function init() {
// bail out if this is an older browser or Opera which gets the offsets wrong
// the opera issue is fixable by subtracting the container UL's width from the offsetLefts...but I dont care enough to do it
// this does NOT break opera, it just wont get the sliding thing
if(!document.getElementById || window.opera)return;
// create references to the LI's
mObj = d.getElementById("navheader");
liObj = mObj.getElementsByTagName("li");
// set up the mouse over events
for(i=0;i
liObj[i].xid = i;
liObj[i].onmouseover = function() { initSlide(this.xid); }
}
// create the slider object
slideObj = mObj.appendChild(d.createElement("div"));
slideObj.id = "slider";
// position the slider over the first LI
x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3)-5;
y = liObj[activeLI].offsetTop-3;
slideObj.style.top = y + "px";
slideObj.style.left = x + "px";
}
function initSlide(objIndex) {
// return if the user is mousing over the currently active LI
if(objIndex == activeLI)return;
// clear the interval so we can start it over in a few lines to avoid doubling up on intervals
clearInterval(zInterval);
// set the active list item to the object index argument
activeLI = objIndex;
// figure out the destination for the sliding div element
destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3))-5;
// start the interval
intervalMethod = function() { doSlide(destinationX); }
zInterval = setInterval(intervalMethod,10);
}
function doSlide(dX) {
// get the current left of the sliding div
x = slideObj.offsetLeft;
if(x+SLIDE_STEP
// div is less than its destination, move it to the right
x+=SLIDE_STEP;
slideObj.style.left = x + "px";
} else if (x-SLIDE_STEP>dX) {
// div is more than its destination, move to the left
x-=SLIDE_STEP;
slideObj.style.left = x + “px”;
} else {
// div is within the boundaries of its destination. put it where its supposed to be
// and clear the interval
slideObj.style.left = dX + “px”;
clearInterval(zInterval);
zInterval = null;
}
}
(En servicios de alojamiento gratuítos (como el mío, Blogsome), que no permiten almacenar archivos javascript pero sí imágenes, podemos subirlos cambiando la extensión al archivo (.js por .jpg).)
3.- Código CSS para incluir en nuestra hoja de estilos, fácilmente personalizable:
/*-----------
www.sgclark.com
Stephen Clark
Mini-Slide Navigation - www.sgclark.com/sandbox/minislide
Last Updated: 1/28/2006
Inspired by Simplebits MiniTab Nav, and SlayerOffice Focus Slide Nav
------------*/
#navheader {
position:relative;
margin:0 auto;
width:100%;
height:18px;
border-top:1px solid #fff;
border-bottom:1px solid #78919B;
background-color:#ffffff;
padding:6px 0 0 0;
z-index:0;
}
#navheader li {
position:relative;
display:inline;
font:10px verdana;
padding:0;
z-index:20;
display : block;
float : left;
}
#navheader li a {
text-decoration:none;
color:#000000;
display : block;
text-align : center;
width : 80px;
}
#navheader li a:hover {
text-decoration:none;
color:#999999;
cursor: hand;
}
#slider {
position:absolute;
border-bottom:5px solid #78919B;
width:80px;
height:16px;
margin:0 2px 0 2px 0;
z-index:2;
margin-left : 5px;
}
/*---- Navigation Page Indicators ----*/
body#minislide li#home {
border-bottom: 5px solid #cccccc;
color:#999999;
height:13px;
width:80px;
z-index:1;
}
4.- Finalmente, introducir en la plantilla (entre los head) la llamada al archivo javascript que hemos guardado en el servidor:
<script type="text/javascript" src="/scripts/focus_slide.js"></script>
{
Sindica el feed