PDA

View Full Version : AnyLink Vertical Menu - Problem



tobe
08-03-2006, 09:36 PM
Hey everybody,
i've got a problem with the AnyLink Vertical Menu. I tried to insert it into a div. so far so good ... but if i move the div from the upper left corner to any other position, the submenu moves exactly the this difference from its menuentry.
so if i move the div top: 180px the submenu moves 180px plus 180px ...
anyone got an idea ... i tried to manipulation the javascript without result ...

i need help with that ...

thx guys

jscheuer1
08-04-2006, 04:37 AM
Please post a link to the script here on DD that you are using. And, in this case, it would help us to help you if we had a link to your page or a copy of the code that can reproduce the effect that you are talking about. One thing that I can think of, off the top of my head, is that if you want to position this menu, do it in the flow of the page, not with absolute or relative positioning of a container. Whatever you do though, it might be OK as long as the drop down division or whatever it is called is outside of all containers except the body tag (assuming you've the good sense not to over style that element).

tobe
08-04-2006, 04:56 PM
sry ... i should have thought about this ... but it was late ... so ... here are the scripts:

nearly original AnyLink script (menu.html):


<style type="text/css">

#dropmenudiv{
position:absolute;
background-color: transparent;
border:0px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px solid black;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: transparent;
}

/* Sample CSS definition for the example list. Remove if desired */
.navlist li {
font-weight: bold;
text-decoration: none;
font:normal 12px Verdana;
width: 135px;
background-color: transparent;
list-style-type: none;
}

.navlist a{

text-decoration: none;
font:normal 12px Verdana;
}

</style>


<script type="text/javascript">

/***********************************************
* AnyLink Vertical Menu- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'
menu1[4]='<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>'


//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a>'
menu2[1]='<a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a>'
menu2[2]='<a href="http://news.bbc.co.uk">JavaScript Reference</a>'
menu2[4]='<a href="http://www.javascriptkit.com/java/">Java Applets</a>'
menu2[3]='<a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a>'
menu2[4]='<a href="http://www.javascriptkit.com/howto/">Design Tutorials</a>'

var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

</script>
</head>
<ul class="navlist">
<li onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><a href="http://www.dynamicdrive.com">Dynamic Drive</a><span style="position: relative; left: 30px"><img src="img/menu_arrow.jpg"></span></li>
<li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="http://www.javascriptkit.com">JavaScript Kit</a><span style="position: relative; left: 30px"><img src="img/menu_arrow.jpg"></span></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
</ul>


index.php:


<?php
include("inc/config.inc");
echo "<html>\n";

echo "<head>\n";
echo "<link rel=\"stylesheet\" href=\"style.css\" />\n";
echo "</head>\n";

echo "<body>\n";
/*
echo "<div id=header>\n";
echo "</div>\n"; //end div id=headers

echo "<div id=news>\n";
echo "</div>\n"; //end div id=news
*/
echo "<div id=\"navi\">\n";
include("menu.html");
echo "</div>\n"; //end div id=navi
/*
echo "<div id=\"main\">\n";
echo "test";
echo "</div>\n"; //end div id=main

echo "<div id=logo>\n";
echo "</div>\n"; //end div id=logo
*/
echo "</body>\n";
echo "</html>\n";
?>

style.css:


body
{
background-color:transparent;
}

span
{

}
div
{
background-color:transparent;
}


#main
{
height:auto; /*IE-bug with min-height*/
min-height:350px;
/*width:820px;*/
position:absolute;
background-color:transparent;
left:180px;
top:180px;
right:20px;
z-index:2;
border:1px solid black;
}
li
{
list-style:none;
text-decoration:none;
}

#navi
{
height:auto; /*IE-bug with min-height*/
min-height:350px;
width:180px;
position:absolute;
left:0px;
top:180px;
z-index:100;
border:1px solid black;
}



Problempage (http://www.respecc-t.de/test/menu/)
thx

jscheuer1
08-05-2006, 06:17 AM
Hmm, this is a little strange but, I copied your problem page and then put the script's style and script code in the head of the page (as I believe the instructions tell you to), and the problem went away:


<html>
<head>
<link rel="stylesheet" href="style.css" />
<style type="text/css">

#dropmenudiv{
position:absolute;
background-color: transparent;
border:0px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px solid black;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: transparent;
}

/* Sample CSS definition for the example list. Remove if desired */
.navlist li {
font-weight: bold;
text-decoration: none;
font:normal 12px Verdana;
width: 135px;
background-color: transparent;
list-style-type: none;
}

.navlist a{

text-decoration: none;
font:normal 12px Verdana;
}

</style>


<script type="text/javascript">

/***********************************************
* AnyLink Vertical Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'
menu1[4]='<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>'


//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a>'
menu2[1]='<a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a>'
menu2[2]='<a href="http://news.bbc.co.uk">JavaScript Reference</a>'
menu2[4]='<a href="http://www.javascriptkit.com/java/">Java Applets</a>'
menu2[3]='<a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a>'
menu2[4]='<a href="http://www.javascriptkit.com/howto/">Design Tutorials</a>'

var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

</script>

</head>
<body>
<div id="navi">

<ul class="navlist">
<li onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><a href="http://www.dynamicdrive.com">Dynamic Drive</a><span style="position: relative; left: 30px"><img src="img/menu_arrow.jpg"></span></li>
<li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="http://www.javascriptkit.com">JavaScript Kit</a><span style="position: relative; left: 30px"><img src="img/menu_arrow.jpg"></span></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
</ul>
</div>
</body>
</html>