If you want to display your menu as a stylish row of images you can scroll through and click on, you need to implement a JavaScript dockable menu. When you place your mouse cursor over one of the small images, it expands and you can click it to navigate to another page. A dockable menu script is useful for adding features to your website. Furthermore, it is displayed properly in all Web browsers and you can use it anywhere on your pages.
Instructions
1. Open a text editor, such as Notepad or WordPad to create a new text document.
2. Insert this code inside the editor:
function MacStyleDock(node, imageDetails, minimumSize, maximumSize, range){
var iconsNode = document.createElement('div');
node.appendChild(iconsNode);
var reflectedIconsNode = document.createElement('div');
node.appendChild(reflectedIconsNode);
iconsNode.style.textAlign = 'center';
reflectedIconsNode.style.textAlign = 'center';
iconsNode.style.height = maximumSize + 'px';
reflectedIconsNode.style.height = maximumSize + 'px';
var maximumWidth = 0;
var scale = 0;
var closeTimeout = null;
var closeInterval = null;
var openInterval = null;
var images = [];
var iconNodes = [];
var reflectedIconNodes = [];
var iconSizes = [];
for (var i = 0; i < imageDetails.length; i++){
iconNodes[i] = document.createElement('img');
iconNodes[i].style.position = 'relative';
iconSizes[i] = minimumSize;
reflectedIconNodes[i] = document.createElement('img');
updateIconProperties(i);
iconsNode.appendChild(iconNodes[i]);
reflectedIconsNode.appendChild(reflectedIconNodes[i]);
if (iconNodes[i].addEventListener){
iconNodes[i].addEventListener('mousemove', processMouseMove, false);
iconNodes[i].addEventListener('mouseout', processMouseOut, false);
iconNodes[i].addEventListener('click', imageDetails[i].onclick, false);
}else if (iconNodes[i].attachEvent){
iconNodes[i].attachEvent('onmousemove', processMouseMove);
iconNodes[i].attachEvent('onmouseout', processMouseOut);
iconNodes[i].attachEvent('onclick', imageDetails[i].onclick);
}
for (var j = 0; j < imageDetails[i].sizes.length; j++){
var image = document.createElement('img');
image.setAttribute(
'src',
imageDetails[i].name
+ imageDetails[i].sizes[j]
+ imageDetails[i].extension);
images.push(image);
}
}
function updateIconProperties(index){
var size = minimumSize + scale * (iconSizes[index] - minimumSize);
var sizeIndex = 0;
while (imageDetails[index].sizes[sizeIndex] < size
&& sizeIndex + 1 < imageDetails[index].sizes.length){
sizeIndex++;
}
if (size == maximumSize){
iconNodes[index].setAttribute('src',
imageDetails[index].name
+ maximumSize
+ '-full'
+ imageDetails[index].extension);
}else{
iconNodes[index].setAttribute('src',
imageDetails[index].name
+ imageDetails[index].sizes[sizeIndex]
+ imageDetails[index].extension);
}
reflectedIconNodes[index].setAttribute('src',
imageDetails[index].name
+ imageDetails[index].sizes[sizeIndex]
+ '-reflection'
+ imageDetails[index].extension);
iconNodes[index].setAttribute('width', size);
iconNodes[index].setAttribute('height', size);
reflectedIconNodes[index].setAttribute('width', size);
reflectedIconNodes[index].setAttribute('height', size);
iconNodes[index].style.marginTop = (maximumSize - size) + 'px';
reflectedIconNodes[index].style.marginBottom = (maximumSize - size) + 'px';
}
3. Append this code:
function processMouseMove(e){
window.clearTimeout(closeTimeout);
closeTimeout = null;
window.clearInterval(closeInterval);
closeInterval = null;
if (scale != 1 && !openInterval){
openInterval = window.setInterval(
function(){
if (scale < 1) scale += 0.125;
if (scale >= 1){
scale = 1;
window.clearInterval(openInterval);
openInterval = null;
}
for (var i = 0; i < iconNodes.length; i++){
updateIconProperties(i);
}
},
20);
}
if (!e) e = window.event;
var target = e.target || e.srcElement;
var index = 0;
while (iconNodes[index] != target) index++;
var across = (e.layerX || e.offsetX) / iconSizes[index];
if (across){
var currentWidth = 0;
for (var i = 0; i < iconNodes.length; i++){
if (i index + range){
iconSizes[i] = minimumSize;
}else if (i == index){
iconSizes[i] = maximumSize;
}else if (i < index){
iconSizes[i] =
minimumSize
+ Math.round(
(maximumSize - minimumSize - 1)
* (
Math.cos(
(i - index - across + 1) / range * Math.PI)
+ 1)
/ 2);
currentWidth += iconSizes[i];
}else{
iconSizes[i] =
minimumSize
+ Math.round(
(maximumSize - minimumSize - 1)
* (
Math.cos(
(i - index - across) / range * Math.PI)
+ 1)
/ 2);
currentWidth += iconSizes[i];
}
}
if (currentWidth > maximumWidth) maximumWidth = currentWidth;
if (index >= range
&& index < iconSizes.length - range
&& currentWidth < maximumWidth){
iconSizes[index - range] += Math.floor((maximumWidth - currentWidth) / 2);
iconSizes[index + range] += Math.ceil((maximumWidth - currentWidth) / 2);
}
for (var i = 0; i < iconNodes.length; i++) updateIconProperties(i);
}
}
function processMouseOut(){
if (!closeTimeout && !closeInterval){
closeTimeout = window.setTimeout(
function(){
closeTimeout = null;
if (openInterval){
window.clearInterval(openInterval);
openInterval = null;
}
closeInterval = window.setInterval(
function(){
if (scale > 0) scale -= 0.125;
if (scale <= 0){
scale = 0;
window.clearInterval(closeInterval);
closeInterval = null;
}
for (var i = 0; i < iconNodes.length; i++){
updateIconProperties(i);
}
},
20);
},
100);
}
}
}
4. Save the file in the folder containing the HTML page you want to insert the dock in and name it "dockable_menu.js". The ".js" extension is mandatory to change the file from a text document to a JavaScript file.
5. Open the webpage in any text or HTML editor. Insert this code between the "" and "" tags to execute the script:
6. Insert this code anywhere between the "" and "" tags:
The dock must be inserted inside this DIV structure.
7. Insert this code between the "
" and "
" tags:
var dock = new MacStyleDock(
document.getElementById('dock'),
[
{
name : 'image1',
extension : '.jpg',
sizes : [32, 64],
onclick : function(){
window.location = 'www.example.com';
}
},
{
name : 'image2',
extension : '.bmp',
sizes : [32, 64],
onclick : function(){
alert('You clicked on the wrong icon');
}
}
],
32,
64,
2);
You can insert as many items between the "[" and "]" tags as you want. Replace "image1" with the exact name of the image, without its extension. Replace ".jpg" with the extension of your image. In the "sizes" line, replace "32" with the image's minimum pixel size and "64" with the image's maximum pixel size. Use "window.location" in the "function" function to link the image to a webpage and "alert" if you just want to display a message. Replace "32" and "64" under the "]" tag with the minimum and maximum size of your dock icons. Replace "2" with the number of icons you have in your dock.
8. Save the webpage and load it in your Web browser to test the dockable menu.
Tags: imageDetails index, index setAttribute, iconNodes index, document createElement, scale scale