Teknologi 3D pada Halaman WEB: Menubar pada Halaman Web

MEMBUAT MENU PADA INTERNET EXPLORER DENGAN ICON DI SEBELAH KIRI (SAMA DENGAN PROGRAM MICROSOFT OFFICE)
COPY KODE DI BAWAH INI! JALANKAN PADA INTERNET EXPLORER

HAPUS TAG BR/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
 <HTML><HEAD><TITLE>Mouse Capture Menu Sample #3</TITLE>
 <META http-equiv=Content-Type content="text/html; CHARSET=iso-8859-1">
 <META content=InetSDK name=AUTHOR>
 <META content=EN-US name=MS.LOCALE>
 <META content=noindex name=ROBOTS>
 <STYLE>.menucontainer {
 	BORDER-RIGHT: #505050 1px solid; BORDER-TOP: #cfcfcf 1px solid; FONT-SIZE: 8pt; Z-INDEX: 6; LEFT: 0px; BORDER-LEFT: #cfcfcf 1px solid; BORDER-BOTTOM: #505050 1px solid; FONT-FAMILY: Arial; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #000000
 }
 .menulabel {
 	BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; Z-INDEX: 7; BORDER-LEFT: #000000 1px solid; WIDTH: 75px; CURSOR: hand; COLOR: #ffffff; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; BACKGROUND-COLOR: #000000; TEXT-ALIGN: center
 }
 .menulabel2 {
 	BORDER-RIGHT: #505050 1px solid; BORDER-TOP: #cfcfcf 1px solid; Z-INDEX: 7; BORDER-LEFT: #cfcfcf 1px solid; WIDTH: 75px; CURSOR: hand; COLOR: #ffffff; BORDER-BOTTOM: #505050 1px solid; POSITION: absolute; BACKGROUND-COLOR: #000000; TEXT-ALIGN: center
 }
 .menulabel3 {
 	BORDER-RIGHT: #cfcfcf 1px solid; BORDER-TOP: #505050 1px solid; Z-INDEX: 7; BORDER-LEFT: #505050 1px solid; WIDTH: 75px; CURSOR: hand; COLOR: #ffffff; BORDER-BOTTOM: #cfcfcf 1px solid; POSITION: absolute; BACKGROUND-COLOR: #000000; TEXT-ALIGN: center
 }
 .menugroup {
 	BORDER-RIGHT: #505050 1px solid; BORDER-TOP: #cfcfcf 1px solid; DISPLAY: none; PADDING-LEFT: 0px; FONT-SIZE: 8pt; Z-INDEX: 7; LEFT: 0px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cfcfcf 1px solid; WIDTH: 150px; PADDING-TOP: 2px; BORDER-BOTTOM: #505050 1px solid; FONT-FAMILY: Arial; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #000000
 }
 .scratch {
 	BORDER-RIGHT: #999900 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffffdd 1px solid; DISPLAY: none; PADDING-LEFT: 5px; FONT-SIZE: 8pt; Z-INDEX: 4; LEFT: 0px; PADDING-BOTTOM: 5px; OVERFLOW: auto; BORDER-LEFT: #ffffdd 1px solid; WIDTH: 250px; PADDING-TOP: 5px; BORDER-BOTTOM: #999900 1px solid; FONT-FAMILY: Arial; POSITION: absolute; TOP: 0px; HEIGHT: 250px; BACKGROUND-COLOR: #ffffcc
 }
 .scratchx {
 	BORDER-RIGHT: #999900 1px solid; BORDER-TOP: #ffffdd 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 12pt; Z-INDEX: 4; LEFT: 0px; BORDER-LEFT: #ffffdd 1px solid; CURSOR: hand; BORDER-BOTTOM: #999900 1px solid; FONT-FAMILY: Arial; POSITION: relative; TOP: 0px; HEIGHT: 12px; BACKGROUND-COLOR: #ffffcc
 }
 </STYLE>
 
 <SCRIPT id=oScript>
 // Integer used to track the total number of menu groups.
 var iGroupCount=0;
 
 // Integer used to track the total number of menu items.
 var iItemCount=0;
 
 // Object placeholder for the srcElement of an event.
 var oWorkItem="";
 
 // Object placeholder for the last know menu.
 var oDistinctMenu="";
 
 // Object placeholder for the last known menu group.
 var oDistinctGroup="";
 
 // Boolean used to monitor the overall status of the menu.
 var bOpenMenu=false;
 
 // Integer used to specify the location of the History group.
 var iHistoryID=-1;
 
 // Additional information for sample menu item action.
 var sScratchInclude='<div component="scratch" class=scratchx>DHTML Menu Sample #1</div>';
 
 // When the body loads, setup intial settings.
 function fnInit(){
 	// Set the menu container to the width of the body.
 	//oMenuContainer.style.width=document.body.clientWidth-2;
 	// Use new setExpression to set the menu container to the width of the body.
 	oMenuContainer.style.setExpression("width","document.body.clientWidth-2");
 	
 	// Add in additional objects and set intial settings for sample menu item action.
 	oMenuContainer.innerHTML='<div id=oScratch class="scratch"></div>';
 	oScratch.style.top=document.body.clientHeight/2 - oScratch.offsetHeight/2;
 	oScratch.style.left=document.body.clientWidth/2 - oScratch.offsetWidth/2;
 	oScratch.innerHTML=sScratchInclude;
 	
 	// Add in menu groups and menu items.
 	fnAddMenuGroup("Search");
 	fnAddMenuItem(1,"Search Engines","fnSearch","folder");
 	fnAddMenuItem(1,"More Searching","fnSearch2","folder");
 	fnAddMenuGroup("Stuff");
 	fnAddMenuItem(2,"Random Nonsense","fnRandomNonsense","folder");
 	fnAddMenuGroup("My Records");
 	fnAddMenuItem(3,"Letter to Mom","fnNote1","document2");
 	fnAddMenuItem(3,"Letter to Herbie","fnNote2","document2");
 	fnAddMenuItem(3,"Grocery List","fnNote3","document2");
 	
 	// A special condition is set for the fnAddMenuItem ... if it has a value of ~SPACER, then a separator is used.
 	fnAddMenuItem(3,"~SPACER","Invalid");
 	fnAddMenuItem(3,"Certificates","fnNote4","certificate");
 	
 	// The HISTORY menu group is a special name within this script, so the name should not be used for other menu groups.
 	fnAddMenuGroup("History");
 	
 	// Set the height of the menu container to the height of the menu items plus a little extra slack space.
 	if(oMenuContainer.innerHTML!=""){
 		oMenuContainer.style.height=oLabel1.offsetHeight + oLabel1.offsetTop + 4;
 	}
 }
 
 // All click events for the menu go through here.
 // When mouse capture is set, all click events for everything goes through here.
 function fnSwitchMenu(){
 	oWorkItem=event.srcElement;
 
 	// If the object that was clicked is a menu label, then continue.
 	if(oWorkItem.component=="menulabel"){
 		// If the last known menu is different than the menu that was clicked, close that previous menu item.
 		// This is what makes the menu follow the mouse. It works in part with the fnHighlight function.
 		if((oDistinctMenu!=oWorkItem)&&(oDistinctMenu!="")){
 			oDistinctGroup=eval("oGroup" + oDistinctMenu.groupid);
 			oDistinctGroup.style.display="none";
 			oDistinctMenu.menustatus="closed";
 			oDistinctMenu.className="menulabel";
 		}
 		// Set the last known menu and menu group to the current object.
 		oDistinctMenu=oWorkItem;
 		oDistinctGroup=eval("oGroup" + oWorkItem.groupid);
 		// If the current menu is closed, open it and give the menu mouse capture.
 		if(oDistinctMenu.menustatus=="closed"){
 			oDistinctMenu.menustatus="open";	
 			oDistinctMenu.className="menulabel3";
 			oDistinctGroup.style.display="block";
 			if(bOpenMenu==false){
 				bOpenMenu=true;
 				oMenuContainer.setCapture();
 			}
 		}
 		else{
 			// If the menu is not closed, then close it and remove mouse capture.
 			bOpenMenu=false;
 			oMenuContainer.releaseCapture();
 			oDistinctMenu.menustatus="closed";
 			oDistinctGroup.style.display="none";
 		}
 	}
 	if(oWorkItem.component=="menuitem"){
 		// If the object is a menu item, then process its MENUACTION.
 		if(oWorkItem.menuaction!="Invalid"){
 			eval(oWorkItem.menuaction + "()");
 			// If the HISTORY group exists, then add the menu item to the history list.
 			if(iHistoryID!=-1){
 				fnAddMenuItem(iHistoryID,oWorkItem.innerText,oWorkItem.menuaction,"document");
 			}
 		}
 		// Remove capture from the menu and close it by clicking on the same menu item.
 		oMenuContainer.releaseCapture();
 		oDistinctMenu.click();
 		// Since the mouse is probably not over the menu anymore and the menu was closed, go ahead and set the className back to the original setting.
 		oDistinctMenu.className="menulabel";
 	}
 	// If the object is not any part of the menu, and the menu is open, close the menu, remove capture, but stop the event from processing.
 	if(!oWorkItem.component){
 		if(bOpenMenu==true){
 			oDistinctMenu.className="menulabel";
 			oMenuContainer.releaseCapture();
 			oDistinctMenu.click();
 			event.returnValue=false;
 		}
 	}
 	// Close the scratch pad used for the sample menu item action code.
 	if(oWorkItem.component=="scratch"){
 		oScratch.style.display="none";
 	}
 }
 
 // This function is used when the mouse moves over menu labels and menu items.
 function fnHighlight(){
 	// Only continue if the mouse is within the client area. This is only a concern when setCapture has been used.
 	if((event.clientX>0)&&(event.clientY>0)&&(event.clientX<document.body.offsetWidth)&&(event.clientY<document.body.offsetHeight)){
 		oWorkItem=event.srcElement;
 		// If the clicked object is a menu label, continue.
 		if(oWorkItem.component=="menulabel"){
 			// If the clicked object's label is the original, use the menulabel2 to highlight it.
 			if(oWorkItem.className=="menulabel"){
 				oWorkItem.className="menulabel2";
 				// If the last known menu is open, close it. We know this menu is not open because of the className.
 				if((oDistinctMenu!="")&&(oDistinctMenu.menustatus=="open")){
 					fnSwitchMenu(oWorkItem);
 					event.returnValue=false;
 				}
 			}
 			else{
 				// If the clicked object's label is not the original, and its menustatus is closed, set it back to the original.
 				if(oWorkItem.menustatus=="closed"){
 					oWorkItem.className="menulabel";
 				}
 			}
 		}
 		// If a menu item was clicked, continue.
 		if(oWorkItem.component=="menuitem"){
 			// if the menu item's menustatus is not active, then make it active.
 			if(oWorkItem.menustatus!="active"){
 				oWorkItem.style.borderBottomColor="#505050";
 				oWorkItem.style.borderRightColor="#505050";
 				oWorkItem.style.borderTopColor="#CFCFCF";
 				oWorkItem.style.borderLeftColor="#CFCFCF";
 				oWorkItem.menustatus="active";
 			}
 			// if the menu item's menustatus is active, set it to passive.
 			else{
 				oWorkItem.style.borderColor="#000000";
 				oWorkItem.menustatus="passive";
 			}
 		}
 	}
 	// If the mouse strays outside the clientarea and a menu is open, shut everything down.
 	else{
 		if((oDistinctMenu!="")&&(oDistinctMenu.menustatus=="open")){
 			fnSwitchMenu();
 			oDistinctMenu.className="menulabel";
 			event.returnValue=false;
 		}
 	}
 }
 
 // The fnAddMenuGroup function is used to dynamically add new menu groups.
 
 function fnAddMenuGroup(sGroupName){
 	// Increment the total number of menu groups.
 	iGroupCount++;
 	// Add the new menu group (label and drop down menu) to the menu container.
 	oMenuContainer.innerHTML+='' + sGroupName + '<div id=oGroup' + iGroupCount + ' class="menugroup"></div>';
 	// Refer to the new label and group using the iGroupCount.
 	var oNewLabel=eval("oLabel" + iGroupCount);
 	var oNewGroup=eval("oGroup" + iGroupCount);
 	// If this is the history group, record the iGroupCount.
 	if(sGroupName=="History"){
 		iHistoryID=iGroupCount;
 	}
 	// Align the label and group with the rest of the menu labels and groups.
 	fnAlign(oNewLabel,oNewGroup);
 }
 
 // Align the menu labels and groups with each other.
 function fnAlign(oLabel,oGroup){
 	oLabel.menustatus="closed";
 	oLabel.style.top=2;
 	oLabel.style.left=75 * (iGroupCount-1) + 2;
 	oGroup.style.top=oLabel.offsetHeight + oLabel.offsetTop+2;
 	oGroup.style.left=oLabel.offsetLeft;
 	oGroup.style.display="none";
 }
 
 // Add new menu items. The iGroupID is 1 - #Menu Labels. The sItemName is what will be displayed. sItemAction is a function call that will be made when the item is clicked. sItemImage is an optional image to go with the menu item. The source is hard coded, so will have to be changed to your favorite graphics directory. Image extensions are hard coded as ".gif".
 function fnAddMenuItem(iGroupId,sItemName,sItemAction,sItemImage){
 	// Increment the total number of menu items.
 	iItemCount++;
 	// Set the temporary image source to nothing.
 	var sTmpSrc="";
 	// If the sItemImage is not defined, set the temporary image source to the default.
 	if(sItemImage + ""=="undefined"){
 		sTmpSrc="canvas.gif";
 	}
 	// If sItemImage is defined, set the temporary image source to the name plus ".gif".
 	else{
 		sTmpSrc=sItemImage + ".gif";
 	}
 	// Assign a variable to the group the menu item will be added to using the iGroupID.
 	var oNewGroup=eval("oGroup" + iGroupId);
 	// If there is no tilde in the menu item name, then continue. I used tildes in this case to identify special cases, such as the ~SPACER.
 	if(sItemName.indexOf("~")==-1){
 		// Add the new menu item to the menu group.
 		oNewGroup.innerHTML+=' <img id="oItemImg' + iItemCount + '" src="/workshop/graphics/' + sTmpSrc + '" width=15 height=15 alt="">' + sItemName + ' ';
 		// Assign a variable to the new menu item.
 		var oNewItem=eval("oItem" + iItemCount);
 		// Set the default styles for the new menu item.
 		oNewItem.style.fontSize="12";
 		oNewItem.style.cursor="hand";
 		oNewItem.style.backgroundColor="#000000";
 		oNewItem.style.color="#FFFFFF";
 		oNewItem.style.textDecoration="none";
 		oNewItem.style.marginLeft="5px";
 		oNewItem.style.width=parseInt(oNewGroup.currentStyle.width) - 15;
 		oNewItem.style.border="1 solid";
 		oNewItem.style.borderColor="#000000";
 	}
 	// If there was a tilde, and if the name is ~SPACER, then just add a horizontal rule.
 	if(sItemName=="~SPACER"){
 		oNewGroup.innerHTML+='<hr>';
 	}
 }
 
 /* These functions provide the ACTION for menu items. */
 
 function fnNote1(){
 	oScratch.innerHTML=sScratchInclude;
 	oScratch.innerHTML+="Letter to MomDear Mom,College is real swell. Thanks for the preserves.Say, mom, did Dad tell you I called last week? Yeah, A bunch of us are driving down to the dunes next week for a class project and I have to bring the beer (lousy pen .. beans, it should read beans). When you send it, remember to sign your maiden name so it doesn't look like my mother is sending me money. Thanks mom. Lots of love, Herbie.PS: Regular mail is good. Next day air is better";
 	oScratch.style.display="block";
 }
 function fnNote2(){
 	oScratch.innerHTML=sScratchInclude;
 	oScratch.innerHTML+="Letter to HerbieDear Herbert,I'm glad to hear that you're making so many new friends. Your father and I were worried about culture shock so thought that this weekend would be a great time for a surprise visit. I know this is short notice, but we just thought it would be a great opportunity. We're very exciting about meeting your teachers and friends; isn't this the weekend of your class project? We could go there with you and meet everyone. It will be a grand time.Everyone here is fine. Your sister made the cheer leading squad, so why don't you call her or send her a card and congratulate her. Your father is doing well. Still no word from the cable company so he has to live with only eight channels. Anyway, I have a pot roast in the oven. By the way, your grandmother may decide to drop in on you in a few weeks, so your father and I may plan on a second 'surprise' visit. Be a good boy.Love Mom.";
 	oScratch.style.display="block";
 }
 function fnNote3(){
 	oScratch.innerHTML=sScratchInclude;
 	oScratch.innerHTML+="Grocery List<ul><li>Chips<li>Cookies<li>Smoked cheddar<li>Any frozen stuff<li>Pop<li>Stamps</ul>Note to self: Bring mom's Credit Card # to pay for it!";
 	oScratch.style.display="block";
 }
 function fnNote4(){
 	oScratch.innerHTML=sScratchInclude;
 	oScratch.innerHTML+="Herbie's List of Certificates<ul><li>CPR Certified<li>Water Safety Qualified<li>Emergency Medical Certified.<li>Certified Channel 2 Kids Club Member(expired)</ul>";
 	oScratch.style.display="block";
 }
 
 function fnSearch(){
 	var aSearch=new Array();
 	var aThrash=new Array();
 	aSearch[aSearch.length]="AltaVista|http://www.altavista.digital.com";
 	aSearch[aSearch.length]="Infoseek|http://www.infoseek.com";
 	aSearch[aSearch.length]="Lycos|http://www.lycos.com";
 	aSearch[aSearch.length]="Yahoo!|http://www.yahoo.com";
 	oScratch.innerHTML=sScratchInclude;
 	oScratch.innerHTML+="Search Engines (" + aSearch.length + ")";
 	for(var i=0;i<aSearch.length;i++){
 		aThrash=aSearch[i].split("|");
 		oScratch.innerHTML+='<a href="' + aThrash[1] + '">' + aThrash[0] + '</a> ';
 	}
 	oScratch.style.display="block";
 }
 
 function fnSearch2(){
 	var aSearch2=new Array();
 	var aThrash=new Array();
 	aSearch2[aSearch2.length]="Microsoft's Web Site|http://search.microsoft.com/";
 	oScratch.innerHTML=sScratchInclude;
 	oScratch.innerHTML+="Search Engines (" + aSearch2.length + ")";
 	for(var i=0;i<aSearch2.length;i++){
 		aThrash=aSearch2[i].split("|");
 		oScratch.innerHTML+='<a href="' + aThrash[1] + '">' + aThrash[0] + '</a> ';
 	}
 	oScratch.style.display="block";
 }
 
 function fnRandomNonsense(){
 	var aNonsense=new Array();
 	aNonsense[aNonsense.length]="The Book of Random Nonsense (volume 1)";
 	aNonsense[aNonsense.length]="Random Nonsense: Book II";
 	aNonsense[aNonsense.length]="Random Nonsense for the Whole Family";
 	aNonsense[aNonsense.length]="Another Book of Random Nonsense";
 	aNonsense[aNonsense.length]="The Condensed Book of Random Nonsense";
 	aNonsense[aNonsense.length]="Random Nonsense: The Comic Book";
 	aNonsense[aNonsense.length]="Random Nonsense: The Movie (coming this summer)";
 	aNonsense[aNonsense.length]="Random Nonsense Forever";
 	aNonsense[aNonsense.length]="Random Nonsense For Kids";
 	aNonsense[aNonsense.length]="Saturday Morning Random Nonsense";
 	aNonsense[aNonsense.length]="Volume 92 of Political Random Nonsense (8th Release)";
 	aNonsense[aNonsense.length]="The Great Big Book of Random Nonsense";
 	oScratch.innerHTML=sScratchInclude;
 	var iRand=parseInt(Math.random()*aNonsense.length);
 	oScratch.style.display="block";
 	oScratch.innerHTML+="Random Nonsense is Coming! #" + iRand + " of " + aNonsense.length + "";
 	oScratch.innerHTML+="" + aNonsense[iRand] + "";
 	oScratch.innerHTML+="<hr>";
 	oScratch.innerHTML+='<a href="javascript:fnRandomNonsense()">More Nonsense!</a>';
 }
 </SCRIPT>
 <LINK 
 href="Mouse Capture Menu Sample #3_files/basicSDKIE4.css" type=text/css 
 rel=stylesheet>
 <META content="MSHTML 6.00.2800.1141" name=GENERATOR></HEAD>
 <BODY vLink=#808080 aLink=#000000 link=#000000 bgProperties=fixed 
 bgColor=#ffffff leftMargin=0 topMargin=0 onload=fnInit()>
 <BLOCKQUOTE class=body>
 <DIV class=menucontainer id=oMenuContainer onmouseover=fnHighlight() 
 onclick=fnSwitchMenu() onmouseout=fnHighlight()></DIV>
 <DIV style="POSITION: absolute; TOP: 50px">
 <H1>Mouse Capture Menu Sample #3</H1>
 This sample uses the mouse capture functionality of Microsoft® Internet 
 Explorer 5 and later. The menu at the top of the page will use the 
 setCapture method when a menu item is opened. While the menu has mouse 
 capture, all onclick, onmouseover, and onmouseout events 
 will go through the functions defined on the menu for these events.
 When any menu item is clicked, or when any object outside the menu is 
 clicked, the releaseCapture method will be used to remove mouse capture 
 from the menu. </DIV>
 <DIV 
 style="POSITION: relative; TOP: 200px"> © 
 <A class=clsIncCpyRt 
 href="http://www.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm" 
 target=_top>2005 Microsoft Corporation. All rights reserved. Terms of use</A>. 
 </DIV></BLOCKQUOTE></BODY></HTML>

Teknologi 3D pada Halaman WEB

Sabtu, 06 Februari 2010

Menubar pada Halaman Web

HAPUS TAG BR/

Tidak ada komentar:

Mengenai Saya