picture menu with vertical submenu dropdown

**Mejse78** · 06-29-2012, 09:21 AM

Hi, there...

I'll try and explain, what I'm looking for...
I'm looking for some kind of docmenu (I think it's called)
- like the bubble effect menu CLICK HERE

BUT:
I want the title to each menuitem to be visible at all times (not just on roll over)
- and I want a line of submenu to appear beneath the pictures, when I hoover over a picture (menuitem)

Does this make sence?
Please ask if this is not understandeble.
Thanks for your time.

☼

**vwphillips** · 06-29-2012, 01:21 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

/*CSS for 2 demos on the page*/

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 200px;
height:80px;
border:solid red 0px;
}

.bubblewrap li img{
position:absolute;
width: 100px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
left:0px;
width:100%;
text-align:center;
background:white;
}

.menu {
 position:relative;width:600px;height:100px;border:solid red 1px;
}

.page {
 width:600px;height:100px;background-Color:#FFFFCC;
}

</style>

</head>

<body>
<ul id="orbs" class="bubblewrap">
 <li>
  <div class="tooltip" >Add to Stumbleupon</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Add to Stumbleupon" /></a>
 </li>
 <li>
  <div class="tooltip" >Add to Facebook</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Add to Facebook" /></a>
 </li>
 <li>
  <div class="tooltip" >Add to Digg</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Add to Digg" /></a>
 </li>
 <li>
  <div class="tooltip" >Add to Twitter</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Add to Twitter" /></a>
 </li>
 <li>
  <div class="tooltip" >Add RSS Feed</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Add RSS Feed" /></a>
 </li>
</ul>

<div id="menu" class="menu" >
<div class="page" >Menu 1</div>
<div class="page" >Menu 2</div>
<div class="page" >Menu 3</div>
<div class="page" >Menu 4</div>
<div class="page" >Menu 5</div>
</div>


<script type="text/javascript">
/*<![CDATA[*/
// Image Bubble (29-June-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcImageBubble(o){
 var ul=document.getElementById(o.ULID),menu=document.getElementById(o.MenuID),lis=ul.getElementsByTagName('LI'),m=o.MagBy,m=typeof(m)=='number'?m:1,ms=o.Animate,img,d,pw,ph,w,h,ary=[],clds=menu.childNodes,mary=[],z0=0,z1=0;
 for (;z0<lis.length;z0++){
  img=lis[z0].getElementsByTagName('IMG')[0];
  d=lis[z0].getElementsByTagName('DIV')[0];
  w=img.width;
  h=img.height;
  pw=lis[z0].offsetWidth;
  ph=lis[z0].offsetHeight;
  ary[z0]=[img,d,[w,h,(pw-w)/2,(ph-h)/2],[w*m,h*m,(pw-w*m)/2,(ph-h*m)/2]]
  img.style.width=ary[z0][2][0]+'px';
  img.style.height=ary[z0][2][1]+'px';
  img.style.left=ary[z0][2][2]+'px';
  img.style.top=ary[z0][2][3]+'px';
  d.style.top=ary[z0][2][3]-d.offsetHeight+'px';
  this.addevt(img,'mouseout','mse',z0,2);
  this.addevt(img,'mouseover','mse',z0,3);
 }
 for (;z1<clds.length;z1++){
  if (clds[z1].nodeType==1){
   clds[z1].style.position='absolute';
   clds[z1].style.zIndex=mary.length>0?'0':'1';
   clds[z1].style.left='0px';
   clds[z1].style.top='0px';
   this.opac(clds[z1],mary.length>0?0:100);
   mary.push([clds[z1],mary.length>0?0:100,'o'+z1]);
  }
 }
 this.mdes=['width','height','left','top'];
 this.ary=ary;
 this.mary=mary;
 this.lst=mary[0];
 this.ms=typeof(ms)=='number'?ms:1000;
}

zxcImageBubble.prototype={

 mse:function(nu,ud){
  var ary=this.ary[nu],img=ary[0],d=ary[1],mdes=this.mdes,mary=this.mary,z0=0;
  for (;z0<mdes.length;z0++){
   clearTimeout(this['to'+nu+z0]);
   this.animate(img,mdes[z0],parseInt(img.style[mdes[z0]]),ary[ud][z0],new Date(),this.ms,'to'+nu+z0);
  }
  clearTimeout(this['dly'+nu]);
  this.animate(d,'top',parseInt(d.style.top),ary[ud][3]-d.offsetHeight,new Date(),this.ms,'dly'+nu);
  d.style.top=ary[ud][3]-d.offsetHeight+'px'
  if (ud==3){
   if (this.lst&&mary[nu]){
    this.lst[0].style.zIndex='0';
    clearTimeout(this[this.lst[2]]);
    this.animate(this.lst,'o',this.lst[1],0,new Date(),this.ms,this.lst[2]);
   }
   if (mary[nu]){
    this.lst=mary[nu];
    this.lst[0].style.zIndex='1';
    clearTimeout(this[this.lst[2]]);
    this.animate(this.lst,'o',this.lst[1],100,new Date(),this.ms,this.lst[2]);
   }
  }
 },

 animate:function(obj,mde,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   if (mde!='o'){
    obj.style[mde]=now+'px';
   }
   else {
    obj[1]=now
    this.opac(obj[0],now);
   }
  }
  if (ms<mS){
   oop[to]=setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,to); },10);
  }
  else {
   if (mde!='o'){
    obj.style[mde]=t+'px';
   }
  }
 },

 opac:function(obj,opc){
  obj.style.filter='alpha(opacity='+opc+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
 }

}


new zxcImageBubble({
 ULID:'orbs',    // the unique ID name of the parent UL.               (string)
 MenuID:'menu',  // the unique ID name of the menu parent DIV.         (string)
 MagBy:1.2,      //(optional) the image magnification.                 (number, default = 1)
 Animate:500     //(optional) the animation duration in milli seconds. (number, default = 1000)
});

/*]]>*/
</script></body>

</html>

**Mejse78** · 07-01-2012, 10:43 AM

Thanks for taking your time

I have some questions....

Is it possible to make the red menu box only apear, when I hover over a picture?
- and place it, so that it's left side is right under the picture?

And teqhnical.... can I put the script in an js file, instead of having it at the bottom of my html page?

And.... I can see, that you have theese two classes: menu and page... what is the page class for, exactly?

Thanks
☼

**vwphillips** · 07-01-2012, 12:30 PM

all class names are for style purposes only
the scripts can be external

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

/*CSS for 2 demos on the page*/

.bubblewrap{
position:relative;
top:20px;
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 200px;
height:80px;
border:solid red 0px;
}

.bubblewrap li img{
position:absolute;
width: 100px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
left:0px;
width:100%;
text-align:center;
background:white;
}

.parent {
 position:relative;overflow:hidden;width:1200px;height:200px;border:solid red 1px;
}

.menu {
 position:relative;left:50px;top:20px;width:600px;height:100px;
}

.page {
 width:600px;height:100px;background-Color:#FFFFCC;
}

</style>

<script type="text/javascript">
/*<![CDATA[*/
// Image Bubble (01-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcImageBubble(o){
 var ul=document.getElementById(o.ULID),menu=document.getElementById(o.MenuID),lis=ul.getElementsByTagName('LI'),m=o.MagBy,m=typeof(m)=='number'?m:1,ms=o.Animate,img,d,pw,ph,w,h,ary=[],clds=menu.childNodes,mary=[],z0=0,z1=0;
 for (;z0<lis.length;z0++){
  img=lis[z0].getElementsByTagName('IMG')[0];
  d=lis[z0].getElementsByTagName('DIV')[0];
  w=img.width;
  h=img.height;
  pw=lis[z0].offsetWidth;
  ph=lis[z0].offsetHeight;
  ary[z0]=[img,d,[w,h,(pw-w)/2,(ph-h)/2],[w*m,h*m,(pw-w*m)/2,(ph-h*m)/2]]
  img.style.width=ary[z0][2][0]+'px';
  img.style.height=ary[z0][2][1]+'px';
  img.style.left=ary[z0][2][2]+'px';
  img.style.top=ary[z0][2][3]+'px';
  d.style.top=ary[z0][2][3]-d.offsetHeight+'px';
  this.addevt(img,'mouseout','mse',z0,2);
  this.addevt(img,'mouseover','mse',z0,3);
 }
 for (;z1<clds.length;z1++){
  if (clds[z1].nodeType==1){
   clds[z1].style.position='absolute';
   clds[z1].style.zIndex='2';
   clds[z1].style.left='0px';
   clds[z1].style.top='0px';
   this.opac(clds[z1],0);
   mary.push([clds[z1],0,'o'+z1,'lft'+z1]);
  }
 }
 this.mdes=['width','height','left','top'];
 this.ary=ary;
 this.menu=menu;
 this.mary=mary;
 this.lst=mary[0];
 this.ms=typeof(ms)=='number'?ms:1000;
}

zxcImageBubble.prototype={

 mse:function(nu,ud){
  var ary=this.ary[nu],img=ary[0],d=ary[1],mdes=this.mdes,mary=this.mary,lft=0,z0=0;
  for (;z0<mdes.length;z0++){
   clearTimeout(this['to'+nu+z0]);
   this.animate(img,mdes[z0],parseInt(img.style[mdes[z0]]),ary[ud][z0],new Date(),this.ms,'to'+nu+z0);
  }
  clearTimeout(this['dly'+nu]);
  this.animate(d,'top',parseInt(d.style.top),ary[ud][3]-d.offsetHeight,new Date(),this.ms,'dly'+nu);
  d.style.top=ary[ud][3]-d.offsetHeight+'px'
  while (img.parentNode){
   lft+=img.offsetLeft;
   if (img.nodeName.toUpperCase()=='DIV'){
    break;
   }
   img=img.parentNode;
  }
  this.animate(this.menu,'left',this.menu.offsetLeft,lft+(ud==2?0:ary[2][0]-ary[3][0]),new Date(),this.ms,mary[nu][3]);
  if (mary[nu]){
   clearTimeout(this[mary[nu][2]]);
   mary[nu][0].style.zIndex=ud;
   this.animate(mary[nu],'o',mary[nu][1],ud==2?0:100,new Date(),this.ms,mary[nu][2]);
  }
 },

 animate:function(obj,mde,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   if (mde!='o'){
    obj.style[mde]=now+'px';
   }
   else {
    obj[1]=now
    this.opac(obj[0],now);
   }
  }
  if (ms<mS){
   oop[to]=setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,to); },10);
  }
  else {
   if (mde!='o'){
    obj.style[mde]=t+'px';
   }
  }
 },

 opac:function(obj,opc){
  obj.style.filter='alpha(opacity='+opc+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
 }

}


/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){

new zxcImageBubble({
 ULID:'orbs',    // the unique ID name of the parent UL.               (string)
 MenuID:'menu',  // the unique ID name of the menu parent DIV.         (string)
 MagBy:1.2,      //(optional) the image magnification.                 (number, default = 1)
 Animate:500     //(optional) the animation duration in milli seconds. (number, default = 1000)
});

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>

</head>

<body>
<div class="parent" >
<ul id="orbs" class="bubblewrap">
 <li>
  <div class="tooltip" >Add to Stumbleupon</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Add to Stumbleupon" /></a>
 </li>
 <li>
  <div class="tooltip" >Add to Facebook</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Add to Facebook" /></a>
 </li>
 <li>
  <div class="tooltip" >Add to Digg</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Add to Digg" /></a>
 </li>
 <li>
  <div class="tooltip" >Add to Twitter</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Add to Twitter" /></a>
 </li>
 <li>
  <div class="tooltip" >Add RSS Feed</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Add RSS Feed" /></a>
 </li>
</ul>

<div id="menu" class="menu" >
<div class="page" >Menu 1</div>
<div class="page" >Menu 2</div>
<div class="page" >Menu 3</div>
<div class="page" >Menu 4</div>
<div class="page" >Menu 5</div>
</div>
</div>



</body>

</html>

**Mejse78** · 07-01-2012, 02:48 PM

Thank you SO much!
This looks really nead ☼

**Mejse78** · 07-01-2012, 02:53 PM

Ohh.... one more thing, now that I look closer at it....

Can it be so, that I can put links in that yellow box (page) and be able to click on them, befor the box disapears again?

Sorry for keeping on asking..
☼

**Mejse78** · 07-01-2012, 03:22 PM

I can't find the positioning of the yellow box..

This is my HTML:

Code:

<!DOCTYPE HTML>
<html>

<head>
	
	
    <link href="css/basic.css" rel="stylesheet" type="text/css" media="screen">
	<link href="css/bubble.css" rel="stylesheet" type="text/css" media="screen">  
    <script type="text/javascript" src="js/bubbles.js"></script> 
    <script type="text/javascript" src="js/bubblesmenu.js"></script> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Type" content="cache" />
	<meta name="robots" content="INDEX,FOLLOW" />
	<meta name="keywords" content="Enter Keywords" />
	<meta name="description" content="Description Here" />
	
	<title>Web Site By Timothy Web Design - www.timothywebdesign.com</title>
	
    
    
    <!-- Google Analytics Code Goes Below Here -->
        
    
    <!-- End Google Analytics Code -->
<style type="text/css">

/*CSS for 2 demos on the page*/

.bubblewrap{
position:relative;
top:20px;
list-style-type:none;
margin:0px auto 0px auto;
padding:0;
}

.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 150px;
height:80px;
border:solid red 0px;
}

.bubblewrap li img{
position:absolute;
width: 100px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
left:0px;
width:100%;
text-align:center;
background:transparrent;
}

.parent {
 position:relative;overflow:hidden;width:900px;height:200px;border:solid red 1px;
}

.menu {
 position:relative;left:50px;top:20px;width:400px;height:50px;
}

.page {
 width:400px;height:50px;background-Color:#b7cfc2;
}

</style>

<script type="text/javascript">
/*<![CDATA[*/
// Image Bubble (01-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcImageBubble(o){
 var ul=document.getElementById(o.ULID),menu=document.getElementById(o.MenuID),lis=ul.getElementsByTagName('LI'),m=o.MagBy,m=typeof(m)=='number'?m:1,ms=o.Animate,img,d,pw,ph,w,h,ary=[],clds=menu.childNodes,mary=[],z0=0,z1=0;
 for (;z0<lis.length;z0++){
  img=lis[z0].getElementsByTagName('IMG')[0];
  d=lis[z0].getElementsByTagName('DIV')[0];
  w=img.width;
  h=img.height;
  pw=lis[z0].offsetWidth;
  ph=lis[z0].offsetHeight;
  ary[z0]=[img,d,[w,h,(pw-w)/2,(ph-h)/2],[w*m,h*m,(pw-w*m)/2,(ph-h*m)/2]]
  img.style.width=ary[z0][2][0]+'px';
  img.style.height=ary[z0][2][1]+'px';
  img.style.left=ary[z0][2][2]+'px';
  img.style.top=ary[z0][2][3]+'px';
  d.style.top=ary[z0][2][3]-d.offsetHeight+'px';
  this.addevt(img,'mouseout','mse',z0,2);
  this.addevt(img,'mouseover','mse',z0,3);
 }
 for (;z1<clds.length;z1++){
  if (clds[z1].nodeType==1){
   clds[z1].style.position='absolute';
   clds[z1].style.zIndex='2';
   clds[z1].style.left='0px';
   clds[z1].style.top='0px';
   this.opac(clds[z1],0);
   mary.push([clds[z1],0,'o'+z1,'lft'+z1]);
  }
 }
 this.mdes=['width','height','left','top'];
 this.ary=ary;
 this.menu=menu;
 this.mary=mary;
 this.lst=mary[0];
 this.ms=typeof(ms)=='number'?ms:1000;
}

zxcImageBubble.prototype={

 mse:function(nu,ud){
  var ary=this.ary[nu],img=ary[0],d=ary[1],mdes=this.mdes,mary=this.mary,lft=0,z0=0;
  for (;z0<mdes.length;z0++){
   clearTimeout(this['to'+nu+z0]);
   this.animate(img,mdes[z0],parseInt(img.style[mdes[z0]]),ary[ud][z0],new Date(),this.ms,'to'+nu+z0);
  }
  clearTimeout(this['dly'+nu]);
  this.animate(d,'top',parseInt(d.style.top),ary[ud][3]-d.offsetHeight,new Date(),this.ms,'dly'+nu);
  d.style.top=ary[ud][3]-d.offsetHeight+'px'
  while (img.parentNode){
   lft+=img.offsetLeft;
   if (img.nodeName.toUpperCase()=='DIV'){
    break;
   }
   img=img.parentNode;
  }
  this.animate(this.menu,'left',this.menu.offsetLeft,lft+(ud==2?0:ary[2][0]-ary[3][0]),new Date(),this.ms,mary[nu][3]);
  if (mary[nu]){
   clearTimeout(this[mary[nu][2]]);
   mary[nu][0].style.zIndex=ud;
   this.animate(mary[nu],'o',mary[nu][1],ud==2?0:100,new Date(),this.ms,mary[nu][2]);
  }
 },

 animate:function(obj,mde,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   if (mde!='o'){
    obj.style[mde]=now+'px';
   }
   else {
    obj[1]=now
    this.opac(obj[0],now);
   }
  }
  if (ms<mS){
   oop[to]=setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,to); },10);
  }
  else {
   if (mde!='o'){
    obj.style[mde]=t+'px';
   }
  }
 },

 opac:function(obj,opc){
  obj.style.filter='alpha(opacity='+opc+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
 }

}


/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){

new zxcImageBubble({
 ULID:'orbs',    // the unique ID name of the parent UL.               (string)
 MenuID:'menu',  // the unique ID name of the menu parent DIV.         (string)
 MagBy:1.2,      //(optional) the image magnification.                 (number, default = 1)
 Animate:500     //(optional) the animation duration in milli seconds. (number, default = 1000)
});

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>

</head>

<body>
<div id="space">
<div id="wrapper">
		
				
		<div id="banner">
			<img src="images/banner2.gif" />
		</div>
		
				
<div >
<ul id="orbs" class="bubblewrap">
 
 <li>
  <div class="tooltip" >Add to Stumbleupon</div>
  <a href="http://dynamicdrive.com"><img src="http://i1086.photobucket.com/albums/j447/Mejse78/aktive.png" border="0" alt="Photobucket"></a>
  
 </li>
 
 
 <li>
  <div class="tooltip" >Add to Facebook</div>
  <a href="http://dynamicdrive.com"><img src="http://i1086.photobucket.com/albums/j447/Mejse78/aktive.png" border="0" alt="Photobucket"></a>
 </li>
 
 <li>
  <div class="tooltip" >Add to Digg</div>
  <a href="http://dynamicdrive.com"><img src="http://i1086.photobucket.com/albums/j447/Mejse78/aktive.png" border="0" alt="Photobucket"></a>
 </li>
 
 
 <li>
  <div class="tooltip" >Add to Twitter</div>
  <a href="http://dynamicdrive.com"><img src="http://i1086.photobucket.com/albums/j447/Mejse78/aktive.png" border="0" alt="Photobucket"></a>
 </li>
 
  <li>
  <div class="tooltip" >Add to Twitter</div>
  <a href="http://dynamicdrive.com"><img src="http://i1086.photobucket.com/albums/j447/Mejse78/aktive.png" border="0" alt="Photobucket"></a>
 </li>
 
 

</ul>

<div id="menu" class="menu" >
<div class="page" ><a href="http://dynamicdrive.com">xxxx</a>    <a href="http://dynamicdrive.com">yyyy</a></div>
<div class="page" >Menu 2</div>
<div class="page" >Menu 3</div>
<div class="page" >Menu 4</div>
<div class="page" >Menu 5</div>
</div>
</div>


	
		<div id="leftnav">
				
		</div>
			
        <div id="content">
            
        </div>
            
        <div id="rightside">
            
        </div>
	
		<div id="footer">
		
		</div>
   	</div>     
   </div>

</body>
</html>

**Mejse78** · 07-01-2012, 03:22 PM

Code:

/* Timothy Framework - www.timothyframework.com */
/* This work is licensed under the MIT License - http://www.opensource.org/licenses/mit-license.php */


/* Reset */

html, body { margin: 0; padding: 0; border: 0;  
				background: transparent; font-size:10px; }

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	}

img 	{ margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
	margin: 0; padding: 0; border: 0;
	vertical-align: baseline;
	background: transparent;
	}
	
table { border-collapse: collapse; border-spacing: 0; }
	
input, select, textarea, form, fieldset {
	margin: 0; padding: 0; border: 0;
	}

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
	display:block; }

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { 
	font-family: Arial, Helvetica, sans-serif;
	font-size:100%;
	font-weight: normal;
	font-style: normal;
	line-height: 100%; 
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;
	}

ol, ul { list-style: none; }





/* Global */

html 	{	}
body	{ background-color: #7e9f8d; }



/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }

h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }



/* Text Elements */

p           	{ color:#000; font-size:12px; line-height:150%;  }
p .left			{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right 		{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }




a           	{   }
a:link			{ color: #00f;  }
a:visited		{ color: #0f0;  }
a:active		{ color: #000;  }
a:focus			{ color: #666;  }
a:hover     	{ color: #f00;  }



/* Images */







/* Lists */

ul          	{  }
ol          	{ list-style-type:decimal; }

ul li		    { color:#000; font-size:12px; }
ol li	     	{ color:#000; font-size:12px; }

dl          	{  	}
dt       		{  	}
dd          	{ 	}





/* Containers */

	
#space			{ height: auto; width: 1000px; margin: 0px auto 0px auto; background-color:#FFF; }

#wrapper		{ width: 940px; margin: 0px auto 0px auto; background-color:#FFF }

#banner 		{ padding-top: 20px;  }


					




/*HOME*/



#content		 	{ height: 400px;  }

#leftnav 			{   }

#leftside 			{   }

#rightside 			{   }

#content 			{   }

#footer 			{   }

**vwphillips** · 07-01-2012, 04:12 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

/*CSS for 2 demos on the page*/

.bubblewrap{
position:relative;
top:20px;
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 200px;
height:80px;
border:solid red 0px;
}

.bubblewrap li img{
position:absolute;
width: 100px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
left:0px;
width:100%;
text-align:center;
background:white;
}

.parent {
 position:relative;overflow:hidden;width:1200px;height:200px;border:solid red 1px;
}

.menu {
 position:relative;left:50px;top:20px;width:600px;height:100px;
}

.page {
 width:600px;height:100px;background-Color:#FFFFCC;
}

</style>

<script type="text/javascript">
/*<![CDATA[*/
// Image Bubble (01-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcImageBubble(o){
 var ul=document.getElementById(o.ULID),menu=document.getElementById(o.MenuID),lis=ul.getElementsByTagName('LI'),m=o.MagBy,m=typeof(m)=='number'?m:1,ms=o.Animate,img,d,pw,ph,w,h,ary=[],clds=menu.childNodes,mary=[],z0=0,z1=0;
 for (;z0<lis.length;z0++){
  img=lis[z0].getElementsByTagName('IMG')[0];
  d=lis[z0].getElementsByTagName('DIV')[0];
  w=img.width;
  h=img.height;
  pw=lis[z0].offsetWidth;
  ph=lis[z0].offsetHeight;
  ary[z0]=[img,d,[w,h,(pw-w)/2,(ph-h)/2],[w*m,h*m,(pw-w*m)/2,(ph-h*m)/2]]
  img.style.width=ary[z0][2][0]+'px';
  img.style.height=ary[z0][2][1]+'px';
  img.style.left=ary[z0][2][2]+'px';
  img.style.top=ary[z0][2][3]+'px';
  d.style.top=ary[z0][2][3]-d.offsetHeight+'px';
  this.addevt(img,'mouseout','mse',z0,2);
  this.addevt(img,'mouseover','mse',z0,3);
 }
 this.ary=ary;
 for (;z1<clds.length;z1++){
  if (clds[z1].nodeType==1){
   this.addevt(clds[z1],'mouseover','mse2',z1,3);
   this.addevt(clds[z1],'mouseout','mse2',z1,2);
   clds[z1].style.position='absolute';
   clds[z1].style.zIndex='2';
   clds[z1].style.left='0px';
   clds[z1].style.top='0px';
   this.opac(clds[z1],0);
   mary.push([clds[z1],0,'o'+z1,'lft'+z1,this.pos(mary.length)]);
  }
 }
 menu.style.visibility='hidden';
 this.mdes=['width','height','left','top'];
 this.menu=menu;
 this.mary=mary;
 this.lst=null;
 this.ms=typeof(ms)=='number'?ms:1000;
}

zxcImageBubble.prototype={

 mse2:function(nu,ud){
  if (this.ary[this.lst]){
   this.mse(this.lst,ud);
  }
 },

 mse:function(nu,ud){
  var oop=this,ary=oop.ary[nu],img=ary[0],d=ary[1],mdes=oop.mdes,mary=oop.mary,lft=0,z0=0;
  for (;z0<mdes.length;z0++){
   clearTimeout(oop['to'+nu+z0]);
   oop.animate(img,mdes[z0],parseInt(img.style[mdes[z0]]),ary[ud][z0],new Date(),oop.ms,'to'+nu+z0);
  }
  clearTimeout(oop['dly'+nu]);
  oop.animate(d,'top',parseInt(d.style.top),ary[ud][3]-d.offsetHeight,new Date(),oop.ms,'dly'+nu);
  d.style.top=ary[ud][3]-d.offsetHeight+'px'
  while (img.parentNode){
   lft+=img.offsetLeft;
   if (img.nodeName.toUpperCase()=='DIV'){
    break;
   }
   img=img.parentNode;
  }
  if (mary[nu]){
   oop.animate(oop.menu,'left',oop.menu.offsetLeft,mary[nu][4],new Date(),oop.ms,mary[nu][3]);
   clearTimeout(oop[mary[nu][2]]);
   mary[nu][0].style.zIndex=ud;
   oop.menu.style.visibility='visible';
   oop.animate(mary[nu],'o',mary[nu][1],ud==2?0:100,new Date(),oop.ms,mary[nu][2]);
   this.lst=nu;
  }
 },

 pos:function(nu){
  var ary=this.ary[nu],img=ary[0],lft=0;
  while (img.parentNode){
   lft+=img.offsetLeft;
   if (img.nodeName.toUpperCase()=='DIV'){
    break;
   }
   img=img.parentNode;
  }
  return lft+ary[2][0]-ary[3][0];
 },

 animate:function(obj,mde,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   if (mde!='o'){
    obj.style[mde]=now+'px';
   }
   else {
    obj[1]=now
    this.opac(obj[0],now);
   }
  }
  if (ms<mS){
   oop[to]=setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,to); },10);
  }
  else {
   if (mde!='o'){
    obj.style[mde]=t+'px';
   }
   else if (t==0){
    oop.menu.style.visibility='hidden';
   }
  }
 },

 opac:function(obj,opc){
  obj.style.filter='alpha(opacity='+opc+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
 }

}


/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){

new zxcImageBubble({
 ULID:'orbs',    // the unique ID name of the parent UL.               (string)
 MenuID:'menu',  // the unique ID name of the menu parent DIV.         (string)
 MagBy:1.2,      //(optional) the image magnification.                 (number, default = 1)
 Animate:500     //(optional) the animation duration in milli seconds. (number, default = 1000)
});

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>

</head>

<body>
<div class="parent" >
<ul id="orbs" class="bubblewrap">
 <li>
  <div class="tooltip" >Add to Stumbleupon</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Add to Stumbleupon" /></a>
 </li>
 <li>
  <div class="tooltip" >Add to Facebook</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Add to Facebook" /></a>
 </li>
 <li>
  <div class="tooltip" >Add to Digg</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Add to Digg" /></a>
 </li>
 <li>
  <div class="tooltip" >Add to Twitter</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Add to Twitter" /></a>
 </li>
 <li>
  <div class="tooltip" >Add RSS Feed</div>
  <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Add RSS Feed" /></a>
 </li>
</ul>

<div id="menu" class="menu" >
<div class="page" >Menu 1</div>
<div class="page" >Menu 2</div>
<div class="page" >Menu 3</div>
<div class="page" >Menu 4</div>
<div class="page" >Menu 5</div>
</div>
</div>



</body>

</html>

**Mejse78** · 07-13-2012, 09:44 AM

Hi again...

I've tried looking at this again.. but I need help.
I've been trying to work with positioning of menu and page... but it doesn't work.. so it must be further down the code, where I'm lost :'|

When I hover over the first img the blue box apears too far to the right.

I would like it to appear under the img I'm hovering over.

I would allso like it to be possible to click on a link in the blue box.
(As it is now, it dissapears, when I move the mouse.

Can you help?

Thread: picture menu with vertical submenu dropdown

Thread Tools

Search Thread

picture menu with vertical submenu dropdown

my basic css - so far

I'm still lost.

Bookmarks

Bookmarks

Posting Permissions