Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:20
Positioning problem with position:relative
Poster: digitalpacman
Dated: Monday April 7 2008 - 18:52:32 BST
Hello,
I upgraded to the new version to try using _buildAfterLoad=true but apparently milonic is old school and uses onload= instead of when the DOM is loaded.
So that means if there is a 404 image that hangs your menus dont load.
Anyway....
My problem is that the parent element to where my menu is located there is position:relative. So when it tries doing absolute it sends the submenu flying way off to the side. (its treating the top left of the parent as the top left of the document)
Code:
<div id="myid1" style="position:relative;top:0;left:0;margin-top:100px;margin-left:100px;">
<script>
with(milonic=new menuname("m_v3p0")) {
style=navStyle3;
itemwidth="";
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Brands;url=http://www.www.com/category-s/84.htm;pagematch=[-_]s/84\\.htm$|searchresults\\.asp\\?cat=84$;showmenu=m_v3p84;");
aI("text=Cosmetics;url=http://www.www.com/category-s/4.htm;pagematch=[-_]s/4\\.htm$|searchresults\\.asp\\?cat=4$;showmenu=m_v3p4;");
aI("text=Skincare;url=http://www.www.com/category-s/1.htm;pagematch=[-_]s/1\\.htm$|searchresults\\.asp\\?cat=1$;showmenu=m_v3p1;");
aI("text=Bodycare;url=http://www.www.com/category-s/2.htm;pagematch=[-_]s/2\\.htm$|searchresults\\.asp\\?cat=2$;showmenu=m_v3p2;");
aI("text=Candles;url=http://www.www.com/category-s/34.htm;pagematch=[-_]s/34\\.htm$|searchresults\\.asp\\?cat=34$;showmenu=m_v3p34;");
aI("text=Men;url=http://www.www.com/category-s/33.htm;pagematch=[-_]s/33\\.htm$|searchresults\\.asp\\?cat=33$;showmenu=m_v3p33;");
aI("text=Travel + Gifts;url=http://www.www.com/category-s/35.htm;pagematch=[-_]s/35\\.htm$|searchresults\\.asp\\?cat=35$;");
}
with(milonic=new menuname("m_v3p1")) {
style=subNavStyle3;
aI("text=normal/dry ;url=http://www.www.com/category-s/47.htm;pagematch=[-_]s/47\\.htm$|searchresults\\.asp\\?cat=47$;");
aI("text=oily ;url=http://www.www.com/category-s/46.htm;pagematch=[-_]s/46\\.htm$|searchresults\\.asp\\?cat=46$;");
}
drawmenus()
</script>
</div>
<script>
with(milonic=new menuname("m_v3p0")) {
style=navStyle3;
itemwidth="";
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Brands;url=http://www.www.com/category-s/84.htm;pagematch=[-_]s/84\\.htm$|searchresults\\.asp\\?cat=84$;showmenu=m_v3p84;");
aI("text=Cosmetics;url=http://www.www.com/category-s/4.htm;pagematch=[-_]s/4\\.htm$|searchresults\\.asp\\?cat=4$;showmenu=m_v3p4;");
aI("text=Skincare;url=http://www.www.com/category-s/1.htm;pagematch=[-_]s/1\\.htm$|searchresults\\.asp\\?cat=1$;showmenu=m_v3p1;");
aI("text=Bodycare;url=http://www.www.com/category-s/2.htm;pagematch=[-_]s/2\\.htm$|searchresults\\.asp\\?cat=2$;showmenu=m_v3p2;");
aI("text=Candles;url=http://www.www.com/category-s/34.htm;pagematch=[-_]s/34\\.htm$|searchresults\\.asp\\?cat=34$;showmenu=m_v3p34;");
aI("text=Men;url=http://www.www.com/category-s/33.htm;pagematch=[-_]s/33\\.htm$|searchresults\\.asp\\?cat=33$;showmenu=m_v3p33;");
aI("text=Travel + Gifts;url=http://www.www.com/category-s/35.htm;pagematch=[-_]s/35\\.htm$|searchresults\\.asp\\?cat=35$;");
}
with(milonic=new menuname("m_v3p1")) {
style=subNavStyle3;
aI("text=normal/dry ;url=http://www.www.com/category-s/47.htm;pagematch=[-_]s/47\\.htm$|searchresults\\.asp\\?cat=47$;");
aI("text=oily ;url=http://www.www.com/category-s/46.htm;pagematch=[-_]s/46\\.htm$|searchresults\\.asp\\?cat=46$;");
}
drawmenus()
</script>
</div>
I am aware that I can put the sub memus OUTSIDE the parent.. and inside the direct child of the body. Well I don't want to do this because its easier to style it this way because I have menu menus.
#myid1 .nav {
}
#myid1 .nav_hover {
}
#myid2 .nav {
}
#myid2 .nav_hover {
}
If only... if only milonic when looping up the nodelist to the body to get the position just did if computedstyle.position = relative or absolute then set this as the new top left if the children are siblings. if this was a perfect world, I guess.
Anyone have a way around this issue or am I yet again out of my luck?
Re: Positioning problem with position:relative
Poster: Ruth
Dated: Thursday April 10 2008 - 5:26:03 BST
Could you please contact Milonic about this issue. I am not a programmer, I don't even know what you mean by old school of onload instead of DOM.
The only ways I know for the relative positioned to work is either the old method of main separated from subs and the program called after the body tag and before the main menu is load, or the newer buildAfterLoad.
I find most of my solutions by getting the page that is having the problem and experimenting, not from a knowledge base of css, programming or such.
Ruth