auror Report post Posted June 3, 2006 well the topic explains most of it. While I was looking at elmanuals i realized the menu was kind of lame so I started to make a new one. I decided to put the menu in a frame on the left side. Unfortunatly whenever you chose a option from a menu instead of Openening the page on the right side it opens it on the left side. Here's the code...... The menu code <HTML><body bgcolor="#000000"><HEAD><style type="text/css"> <!-- a.bi{ background-color:black; color:green; display:block; font-family:; font-size:; font-weight:; padding:3px 3px 3px 3px; text-decoration:none; border-color: #225555 #000000 #000000 #225555; border-style:solid; border-width:2px; } a.bi:hover{ background-color:; color:; } a.mi{ background-color:black; color:green; display:block; font-family:; font-size:; font-weight:; padding: 3px 3px 3px 3px; text-decoration:none; } a.mi:hover{ background-color:; color:; } .mn{ background-color:black; border-color: #225555 #000000 #000000 #225555; border-style:solid; border-width:2px; z-index:100; } .sp{ BORDER-TOP:#000000 1px solid; MARGIN:2px; BORDER-BOTTOM:#225555 1px solid } //--> </style> <!--paste above inbetween your HEAD tags--> <!--paste below inbetween your body tags--></HEAD><script language="JavaScript"> <!--// var D6=window,Y7=document;function B8(){this.ver=navigator.appVersion;this.agent=navigator.userAgent;this.dom=Y7.getElementById?1:0;this.opera5=this.agent.indexOf("Opera 5")>-1;this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:1;this.ie4=(Y7.all && !this.dom && !this.opera5)?1:1;this.ie=this.ie4||this.ie5||this.ie6;this.mac=this.agent.indexOf("Mac")>-1;this.ns6=(this.dom && parseInt(this.ver)>=5)?1:0;this.ns4=(Y7.layers && !this.dom)?1:0;this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5);return this}bw=new B8();z=1;b=1;g="";if(bw.opera5||bw.ns6){b=2};if(bw.ie){g=" style='width: 100%'"}else{z=6}mt=0;ml=0;w=150;mh=23;mw=ml-w;k=0;mt=mt-z;p="<a class='mi'"+g+" href='";q="' title='";r="\"; return true' onmouseout='window.status=\"\"; return true'>";t="</a>";a="' onmouseover='window.status=\"";v="<div class=sp></div>" m=new Array();n=new Array();s=new Array();sw=new Array();su=new Array();st=new Array() m[0]='Main';n[0]='#';sw[0]=150;su[0]='Main';st[0]="";s[0]="" +p+"http://www.elmanuals.com/index.shtml"+q+a+"Home"+r+"Home"+t +p+"http://www.elmanuals.com/neededinformation.shtml"+q+a+"Needed Information"+r+"Needed <br> Information"+t m[1]='General Information';n[1]='#';sw[1]=150;su[1]='General Information';st[1]="";s[1]="" +p+"http://www.elmanuals.com/attributes.shtml"+q+a+"Attributes"+r+"Attributes"+t +p+"http://www.elmanuals.com/cost.shtml"+q+a+"Cost List"+r+"Cost List"+t +p+"http://www.elmanuals.com/cloaks.shtml"+q+a+"Cloaks"+r+"Cloaks"+t +p+"http://www.elmanuals.com/experience.shtml"+q+a+"Experience"+r+"Experience"+t +p+"http://www.elmanuals.com/faq.shtml"+q+a+"FAQ"+r+"FAQ"+t +p+"http://www.elmanuals.com/gamecommands.shtml"+q+a+"Game Commands"+r+"Game <br> Commands"+t +p+"http://www.elmanuals.com/guildcommands.shtml"+q+a+"Guild Commands"+r+"Guild <br> Commands"+t +p+"http://www.elmanuals.com/harvest.shtml"+q+a+"Harvesting"+r+"Harvesting"+t +p+"http://www.elmanuals.com/jobs.shtml"+q+a+"Jobs"+r+"Jobs"+t +p+"http://www.elmanuals.com/newbie.shtml"+q+a+"Newbie Manual"+r+"Newbie Manual"+t +p+"http://www.elmanuals.com/nexus.shtml"+q+a+"Nexuses"+r+"Nexuses"+t +p+"http://www.elmanuals.com/perks.shtml"+q+a+"Perks"+r+"Perks"+t m[2]='Coordinates';n[2]='#';sw[2]=150;su[2]='Coordinates';st[2]="";s[2]="" +p+"http://www.elmanuals.com/coordpermap.shtml"+q+a+"By Map"+r+"By Map"+t m[3]='Maps';n[3]='#';sw[3]=150;su[3]='Maps';st[3]="";s[3]="" +p+"http://www.elmanuals.com/maps/"+q+a+"Galarandel's Maps"+r+"Galarandel's <br> Maps"+t m[4]='Crafting';n[4]='#';sw[4]=150;su[4] ='Crafting';st[4]="";s[4]="" +p+"http://www.elmanuals.com/craftingjewelry.shtml"+q+a+"Jewelry"+r+"Jewelery"+t m[5]='Fighting';n[5]='#';sw[5]=150;su[5] ='Fighting';st[5]="";s[5]="" +p+"http://www.elmanuals.com/animalstats.shtml"+q+a+"Animal Stats"+r+"Animal Stats"+t +p+"http://www.elmanuals.com/monsterstats.shtml"+q+a+"Monster Stats"+r+"Monster Stats"+t +p+"http://www.elmanuals.com/monsterdrops.shtml"+q+a+"Monster Drops"+r+"Monster Drops"+t +p+"http://www.elmanuals.com/killlvls.shtml"+q+a+"Killing Levels"+r+"Killing Levels"+t m[6]='Magic';n[6]='#';sw[6]=150;su[6]='Magic';st[6]="";s[6]="" +p+"http://www.elmanuals.com/alchemy.shtml"+q+a+"Alchemy"+r+"Alchemy"+t +p+"http://www.elmanuals.com/Potions.shtml"+q+a+"Potions"+r+"Potions"+t +p+"http://www.elmanuals.com/sigils.shtml"+q+a+"Sigils"+r+"Sigils"+t +p+"http://www.elmanuals.com/Spells.shtml"+q+a+"Spells"+r+"Spells"+t +p+"http://www.elmanuals.com/summoning.shtml"+q+a+"Summoning"+r+"Summoning"+t +p+"http://www.elmanuals.com/magicwepons.shtml"+q+a+"Magic Wepons"+r+"Magic Wepons"+t m[7]='Manufactoring';n[7]='#';sw[7]=150;su[7]='Manufactoring';st[7]="";s[7]="" +p+"http://www.elmanuals.com/manufacturingarmour.shtml"+q+a+"Armour"+r+"Armour"+t +p+"http://www.elmanuals.com/manufacturingclothes.shtml"+q+a+"Clothes"+r+"Clothes"+t +p+"http://www.elmanuals.com/manufacturingweapons.shtml"+q+a+"Wepons"+r+"Wepons"+t m[8]='Quests';n[8]='#';sw[8]=150;su[8]='Quests';st[8]="";s[8]="" +p+"http://www.elmanuals.com/gods.shtml"+q+a+"God"+r+"God"+t +p+"http://www.elmanuals.com/quests.shtml"+q+a+"Normal"+r+"Normal"+t m[9]='Research';n[9]='#';sw[9]=150;su[9]='Research';st[9]="";s[9]="" +p+"http://www.elmanuals.com/biologyresearch.shtml"+q+a+"Biology"+r+"Biology"+t +p+"http://www.elmanuals.com/mineralresearch.shtml"+q+a+"Mineral"+r+"Mineral"+t m[10]='Other Help Sites';n[10]='#';sw[10]=150;su[10]='Other Help Sites';st[10]="";s[10]="" +p+"http://goatsgomoo.maclenet.com/newbfaq/"+q+a+"Newbie Help Manual"+r+"Newbie Help <br> Manual"+t +p+"http://www.eternal-lands.net/elrocks/"+q+a+"ELRocks.com"+r+"ELRocks.com"+t +p+"http://eternalguide.knows.it/"+q+a+"EL Walk Through"+r+"EL Walk <br> Through"+t +p+"http://www.geocities.com/aworldwithoutwind/main.html"+q+a+"Newbie Help Manual"+r+"Newbie Help <br> Manual"+t m[11]='Other';n[11]='#';sw[11]=150;su[11]='Other';st[11]="";s[11]="" +p+"http://www.eternal-lands.com"+q+a+"EL Website"+r+"EL Website"+t +p+"http://www.eternal-lands.com/forum/"+q+a+"EL Forum"+r+"EL Forum"+t +p+"http://elmanuals.com/v-web/bulletin/bb/index.php"+q+a+"EL Manuals Forum"+r+"EL Manuals <br> Forum"+t +p+"http://www.elmanuals.com/ellight.shtml"+q+a+"EL Light Download"+r+"EL Light <br> Download"+t +p+"http://pub20.bravenet.com/guestbook/1675416419"+q+a+"EL Manuals GB"+r+"EL Manuals <br> Guest Book"+t +p+"http://www.elmanuals.com/thanks.shtml"+q+a+"Thanks To....."+r+"Thanks To....."+t +p+"http://eternal-lands.solexine.fr/~radu/online_players.htm"+q+a+"Whos Online"+r+"Whos Online"+t ma=m.length if (k==1) {mw2=ml-w; for (i=0; i < ma; i++){document.write("<div id='sb"+i+"' class='mn' style='position: absolute; top:"+(mt+mh)+";left:"+(mw+=w+2)+";width:"+(sw[i]-b)+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'>"+s[i]+"</div>")} for (i=0; i < ma; i++){document.write("<div style='position: absolute; top:"+mt+";left:"+(mw2+=w+2)+";width:"+w+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'><a class='bi'"+g+" href='"+n[i]+q+st[i]+a+su[i]+r+m[i]+t+"</div>")}} else {mw2=mt-mh;mt2=mt-mh+2 for (i=0; i < ma; i++){document.write("<div id='sb"+i+"' class='mn' style='position: absolute; top:"+(mt2+=(mh+1))+";left:"+(ml+w-10)+";width:"+sw[i]+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'>"+s[i]+"</div>")} for (i=0; i < ma; i++){document.write("<div style='position: absolute; top:"+(mw2+=(mh+1))+";left:"+ml+";width:"+w+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'><a class='bi'"+g+" href='"+n[i]+q+st[i]+a+su[i]+r+m[i]+t+"</div>")}} function lib_obj(obj,nest){nest=(!nest) ? "":'document.'+nest+'.';this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;this.ref=bw.dom||bw.ie4?document:this.css.document;this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;this.y=parseInt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0;return this} function lib_doc_size(){this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;this.x50=this.x2/2;this.y50=this.y2/2;return this;} lib_obj.prototype.showIt = function(){this.css.visibility="visible"} lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"} function libinit(){page=new lib_doc_size();o=new Array();for (i=0; i < ma; i++){o[i]=new lib_obj('sb'+i);o[i].hideIt()}} libinit() //--> </script></BODY></HTML> The Frame code.... <html> <head> <title>Menu</title> </head> <frameset cols="260,*"> <frame src="C:/menu.html" name="leftside"> <frame src="http://www.elmanuals.com/index.shtml" name="rightside"> <noframes> <body> <p><a href="http://www.elmanuals.com/index.shtml">Your browser does not support frames. Click Here to enter my main Page</a> </p> </body> </noframes> </frameset> </html> If you want to see the menu copy and paste the codes and call the menu one menu.html and save it in C:\ (not in a subfolder). And then copy and paste the frame code and call it frame.html thanks Share this post Link to post Share on other sites
ttlanhil Report post Posted June 3, 2006 eh, I'm not gonne read it all... but I don't think I need to. are you familiar with the target= option in links? you can direct to a different window (or in this case, frame) <a href="pagename" target="otherframename">click me</a> of course... these days a CSS menu without frames is widely enough supported to be preferrable (CSS is a lot better, but back in the day support for it was limited enough to make it not always work) Share this post Link to post Share on other sites
auror Report post Posted June 3, 2006 (edited) Holy Crap css looks way easier then Javascript and i won't get that stupid active x warning Edited June 16, 2006 by auror Share this post Link to post Share on other sites
ttlanhil Report post Posted June 3, 2006 (edited) Holy Crap css looks way easier then javawell... it is and it isn't.they're very different with very different purposes. CSS is for the display settings of webpages that's with xHTML for the layout and flow, the only colour/etc settings in xHTML are the references to the styles in CSS... it's a bit more work if you simply want something red... but it's worth it when you later decide "actually, it'd be good bold as well". since it's a style that's set for all the areas, it's one change and you've adjusted all the areas set with that style on, potentially, a humongous business website (yes, it's reasonable to have a stylesheet for an entire website. you can always have several and override some of the settings for website areas, which is sometimes appropriate. and you can have styles just for that page, if appropriate. CSS really is a Good Thing) mind you... getting a complex and really good stylesheet is a lot harder than a networked multi-threaded "hello networked world" java server (I did one of them for uni, what a way to spend the better part of an hour) I resisted learning xHTML (which, basically, is HTML that's more "pure" xml (as in all tags must be closed... eg <p/> instead of <p>) and using CSS instead of tags for display settings) for a while, since it was more complex... but now that I've done some xHTML+CSS I wouldn't go back. one warning... CSS has different compatability issues than java... in most cases you can get away with CSS version 1 support... if you design the page well, then lack of CSS support should gracefully degrade to something that's still completely readable, even if it's not as flashy (when I did a CSS side-menu-popout thing for uni, lack of CSS made it simply list the links at the top of the page... not as pretty, but it worked fine) many browsers nowadays will support CSS 2, to some degree, it's a dev's decisions where to aim there is, of course, one browser (and, gee, guess which...) that doesn't always work nicely... browsers should support no CSS, CSS 1, CSS 2, or worst-case some reasonable clump inbetween (like CSS 1 with one set of CSS 2 features). IE had issues where it'd use the settings incorrectly rather than ignore them. fun, eh? (I don't have that side-popout-menu thing handy... but it's what I learnt a fair bit of CSS doing, and it only took a night or two, so it shouldn't take long to adapt something from the 'net) and i won't get that stupid active x warningeeh... anytime you have activeX issues, you should go hit someone (probably the person using activex)... it's dangerous and not cross-platform (despite what some people think, the web isn't only seen through bug-covered windows)for stuff like online virus scans (eg trendmicro's housecall) using stuff with that security issue (that it can actually affect your computer) means that it's okay... but it's rare that there's a good reason for technologies like activex edit: hey waitamin... when you said 'java', did you mean java? not javascript? (they have 2 things in common. they're programming languages, and they have 'java' in the name... it ends around there) Edited June 3, 2006 by ttlanhil Share this post Link to post Share on other sites
auror Report post Posted June 16, 2006 Just finished a DHTML (yes it is DHTML) heres a picture I think it looks pretty cool.... and it works for all newer browsers heres what the mouseover submenu looks like (cant show in the picture above after all when you press Print Screen it's not animated) Share this post Link to post Share on other sites
0ctane Report post Posted June 16, 2006 Keep it simple. Or at least subdue that animation. Or make it not infinitely loop. Share this post Link to post Share on other sites
Arnieman Report post Posted June 16, 2006 The red just doesn't seem to go with the rest of the image... Share this post Link to post Share on other sites
auror Report post Posted June 16, 2006 (edited) If i loop it once the animation is done and I mouseover another submenu it won't work EDIT: Im not very good with colors I have never been much of a artist what shoule I use then blue maybe..... Edited June 16, 2006 by auror Share this post Link to post Share on other sites
auror Report post Posted June 16, 2006 how about this green one. It's like the red one but green and no animation.... Share this post Link to post Share on other sites
Arnieman Report post Posted June 17, 2006 The green seems to work better, with the green already in use on the site. Red clashed a bit much for my liking, but that's mainly a style thing... Share this post Link to post Share on other sites
auror Report post Posted June 17, 2006 ok thanks for your input I think it looks better to Share this post Link to post Share on other sites
m_bee Report post Posted June 17, 2006 Green is fine, still, I think that the right-most submenu is softer in the eye. Maybe you should use that style too in the main menu, or at least make it a bit less bright, just my opinion, im not a graphics artist either. Keep up the good job Share this post Link to post Share on other sites
Thordin Report post Posted June 17, 2006 The menu is looking good, but I too call for less bright colors, this would make some people to hurt eyes if watched for longet time... And good job. BTW: never, NEVER EVER use frames, they won't be supported long, according to W3.org. Use CSS instead, cleaner, easier and nicer CSS positioning will do the job better and it's more controllable and more precise. Share this post Link to post Share on other sites
auror Report post Posted June 17, 2006 thats what i used for this menu instead of frames it works much better Share this post Link to post Share on other sites