scottsbt
10-30-2011, 02:19 PM
1) Script Title: AnyLink JS Drop Down Menu v2.3
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
3) Describe problem:
ACTUALLY, I HAVE TWO PROBLEMS.
PROBLEM ONE:
Possible browser compatibility issue? I'm hoping someone might be able to clue me in on how to fix it.
I merged the Anylink code into one scottsbtmenu.js file. The html being called by document writes. The css is merged into my site css file.
I'm using a mix of single col and multi-col dropdowns. The problem is that it works great on Mozilla and Google Chrome. BUT NOT on IE9. I don't have any way atm to see if it works on older IE versions.
On IE, the multi-col is not displaying correctly. It shows up instead as one column with just a slightly wider spacing where the efc break should be.
You can view our site/menu here:
http://www.scottsbt.com
PROBLEM TWO:
This one I can live with if I have to, but I'd really like it if it could be solved.
I can't link to an outside site / full web address. If I try, it sticks http://www.scottsbt.com/ in front of the addresses. I had this problem even when testing the script code in it's original separate file format.
I worked around it by just using /fishing/index.htm, etc., and kept all the addresses within our site. There are however a few outside links that I'd really like to include, like linking to NJ fish and wildlife site, our facebook page, etc.
Doing the links this way results in another problem, where sometimes the links get confused if you click on another link on the menu, and it mixes up the sub folder for that link with the one you are on, resulting in a 404 error.
I made a "reset" button for that to make it more obvious to the users that they can reset it if the menu gets glitchy, even though technically, they could click on any of the actual buttons to reload the website back to the default address.
It won't let me post the js here, it made the post two long. I'll add it to this thread in two pieces. (turned out to be 4 quick replies to make the blocks short enough)
Here's my css for anylink:
/* begin anylinkmenu css */
/* 9/16/2011 scottsbt.com/navigation/ menu settings anylinkmenu sample css
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
*/
.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: yellow;
}
/* ######### Default class for drop down menus ######### */
.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: lightyellow;
width: 200px; /* default width for menu */
}
.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}
.anylinkmenu a:hover{ /*hover background color*/
background: black;
color: white;
}
/* ######### Alternate multi-column class for drop down menus ######### */
.anylinkmenucols{
position: absolute;
width: 550px; /* This was 250, my link names are longer, or three column, so I made it wider */
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 0px; /* padding was 10px */
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #DFFDF4;/* items below this copied from single col CSS to modify the dual */
line-height: 18px;
}
.anylinkmenucols li a{
/* items below this copied from single col CSS to modify the dual orig: padding-bottom: 3px;
added "a" next to "li" above to make it affect the link? as done in single col */
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
border-right-width:medium; /* removing right radius got rid of the curve on the right side of the underline on columns */
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}
.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #DFFDF4; /* #c1f9e9; my orig col color*/
/* items below this copied from single col CSS to modify the dual */
/* border: 1px solid black; <--- this doesn't look right, made box within box, ugh */
}
.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.anylinkmenucols a:hover{ /*hover background color - copied from the single col to match */
background: black;
color: white;
}
/* ######### class for shadow DIV ######### */
.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}
/* end anylinkmenu css */
Any help at all would be wonderful! I've been pretty happy with the DD script overall. I was using MenuMaker previously and wanted to get away from program dependancy.
Thanks! ~Mo
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
3) Describe problem:
ACTUALLY, I HAVE TWO PROBLEMS.
PROBLEM ONE:
Possible browser compatibility issue? I'm hoping someone might be able to clue me in on how to fix it.
I merged the Anylink code into one scottsbtmenu.js file. The html being called by document writes. The css is merged into my site css file.
I'm using a mix of single col and multi-col dropdowns. The problem is that it works great on Mozilla and Google Chrome. BUT NOT on IE9. I don't have any way atm to see if it works on older IE versions.
On IE, the multi-col is not displaying correctly. It shows up instead as one column with just a slightly wider spacing where the efc break should be.
You can view our site/menu here:
http://www.scottsbt.com
PROBLEM TWO:
This one I can live with if I have to, but I'd really like it if it could be solved.
I can't link to an outside site / full web address. If I try, it sticks http://www.scottsbt.com/ in front of the addresses. I had this problem even when testing the script code in it's original separate file format.
I worked around it by just using /fishing/index.htm, etc., and kept all the addresses within our site. There are however a few outside links that I'd really like to include, like linking to NJ fish and wildlife site, our facebook page, etc.
Doing the links this way results in another problem, where sometimes the links get confused if you click on another link on the menu, and it mixes up the sub folder for that link with the one you are on, resulting in a 404 error.
I made a "reset" button for that to make it more obvious to the users that they can reset it if the menu gets glitchy, even though technically, they could click on any of the actual buttons to reload the website back to the default address.
It won't let me post the js here, it made the post two long. I'll add it to this thread in two pieces. (turned out to be 4 quick replies to make the blocks short enough)
Here's my css for anylink:
/* begin anylinkmenu css */
/* 9/16/2011 scottsbt.com/navigation/ menu settings anylinkmenu sample css
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
*/
.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: yellow;
}
/* ######### Default class for drop down menus ######### */
.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: lightyellow;
width: 200px; /* default width for menu */
}
.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}
.anylinkmenu a:hover{ /*hover background color*/
background: black;
color: white;
}
/* ######### Alternate multi-column class for drop down menus ######### */
.anylinkmenucols{
position: absolute;
width: 550px; /* This was 250, my link names are longer, or three column, so I made it wider */
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 0px; /* padding was 10px */
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #DFFDF4;/* items below this copied from single col CSS to modify the dual */
line-height: 18px;
}
.anylinkmenucols li a{
/* items below this copied from single col CSS to modify the dual orig: padding-bottom: 3px;
added "a" next to "li" above to make it affect the link? as done in single col */
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
border-right-width:medium; /* removing right radius got rid of the curve on the right side of the underline on columns */
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}
.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #DFFDF4; /* #c1f9e9; my orig col color*/
/* items below this copied from single col CSS to modify the dual */
/* border: 1px solid black; <--- this doesn't look right, made box within box, ugh */
}
.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.anylinkmenucols a:hover{ /*hover background color - copied from the single col to match */
background: black;
color: white;
}
/* ######### class for shadow DIV ######### */
.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}
/* end anylinkmenu css */
Any help at all would be wonderful! I've been pretty happy with the DD script overall. I was using MenuMaker previously and wanted to get away from program dependancy.
Thanks! ~Mo