By: M. Qasim Nadeem. Menus. Top navigation IE only. <html> <head> <style> span. border:groove 2px; padding:3px; font-family:arial; font-size:12px;

Size: px

Start display at page:

Download "By: M. Qasim Nadeem. Menus. Top navigation IE only. <html> <head> <style> span. border:groove 2px; padding:3px; font-family:arial; font-size:12px;"

Cuthbert Eaton
6 years ago
Views:

1 Menus Top navigation IE only <html> <head> <style> span border:groove 2px; padding:3px; font-family:arial; font-size:12px; width:100px; height:70px; background-color:#c0c0c0; position:relative; top:-80px; left:-10px; </style> <script type="text/javascript"> function showmenu(elmnt) elmnt.style.top="-15px" function hidemenu(elmnt) elmnt.style.top="-80px"

2 </script> </head> <body> <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)"> <a href="/default.asp">home</a><br /> <a href="/js/default.asp">javascript</a><br /><br /><hr /> My Personal Website<br /> </span> <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)"> <p></p> <p></p> <p> <a href=" /> <a href=" /><br /></p> <hr /> Browser<br /> </span> <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)"> <p></p> <p></p> <p> <a href=" Vista</a><br /> <a href=" /><br /></p> <hr /> Search<br />

3 </span> </body> </html> Left navigation IE and Opera only <html> <head> <style> table font-size:12; background-color:#c0c0c0; span border:groove 2px; padding:3; font-family:arial; font-size:12; width:90; height:40; background-color:#c0c0c0; position:relative; top:-15; left:-80; </style>

4 <script type="text/javascript"> function showmenu(elmnt) elmnt.style.left="-10" function hidemenu(elmnt) elmnt.style.left="-80" </script> </head> <body> <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)"> <table border="0" width="100%"> <tr> <td width="90%"><a href="/default.asp">home</a></td> <td rowspan="2">a</td> </tr><tr> <td><a href="/js/default.asp">javascript</a></td> </tr> </span> <br />

5 <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)"> <table width="100%"> <tr> <td width="90%"><a href=" <td rowspan="2">b</td> </tr><tr> <td><a href=" </tr> </span> <br /> <span onmouseover="showmenu(this)" onmouseout="hidemenu(this)"> <table width="100%"> <tr> <td width="90%"><a href=" <td rowspan="2">c</td> </tr><tr> <td><a href=" </tr> </span> </body> </html>

6 Drop down navigation (select box) <html> <head> <script type="text/javascript"> function go() location=document.forms[0].gowhere.value </script> </head> <body> <form> <select id="gowhere" onchange="go()"> <option>-select location- <option value="abc.html">my Personal Info <option value="resume.html">my Resume <option value="snap.html"> My Passport snapshot </select> </form> </body> </html> Top drop down IE and Opera only <html> <head> <style> bodyfont-family:arial;

7 tablefont-size:80%;background:black acolor:black;text-decoration:none;font:bold a:hovercolor:# td.menubackground:lightblue table.menu font-size:100%; position:absolute; visibility:hidden; </style> <script type="text/javascript"> function showmenu(elmnt) document.getelementbyid(elmnt).style.visibility="visible" function hidemenu(elmnt) document.getelementbyid(elmnt).style.visibility="hidden" </script> </head> <body> <h3>drop down menu</h3> <table width="100%"> <tr bgcolor="#ff8080"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> <a href="/default.asp">tutorials</a><br />

8 <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="/html/default.asp">html</a></td></tr> <tr><td class="menu"><a href="/xhtml/default.asp">xhtml</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">css</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">xml</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">xsl</a></td></tr> </td> <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')"> <a href="/default.asp">scripting</a><br /> <table class="menu" id="scripting" width="120"> <tr><td class="menu"><a href="/js/default.asp">javascript</a></td></tr> <tr><td class="menu"><a href="/vbscript/default.asp">vbscript</a></td></tr> <tr><td class="menu"><a href="default.asp">dhtml</a></td></tr> <tr><td class="menu"><a href="/asp/default.asp">asp</a></td></tr> <tr><td class="menu"><a href="/ado/default.asp">ado</a></td></tr> </td> <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')"> <a href="/site/site_validate.asp">validation</a><br /> <table class="menu" id="validation" width="120"> <tr><td class="menu"><a href="/site/site_validate.asp">validate HTML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">validate XHTML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">validate CSS</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">validate XML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">validate WML</a></td></tr> </td> </tr>

9 <p>mouse over these options to see the drop down menus</p> </body> </html> Always-on-top IE and Opera only <html> <head> <script type="text/javascript"> var timer function scrolltop() document.getelementbyid('scrollmenu').style.pixeltop=document.body.scrolltop timer=settimeout("scrolltop()",1) function stoptimer() cleartimeout(timer) </script> </head> <body onload="scrolltop()" onunload="stoptimer()"> <span id="scrollmenu" style="position:absolute"> <b>menu</b><br /> <a href=" O L</a><br />

10 <a href=" /> <a href=" /> </span> <table border="0" width="100%"> <tr> <td width="100"> </td> <td>scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br /> Scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br /> Scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br /> Scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br /> Scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br /> Scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br /> Scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br /> Scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br /> Scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br /> Scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br />

11 Scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br /> Scroll this page to see the "always-on-top" menu <br /><br /><br /><br /><br /> </td> </tr> </body> </html> Inset borders IE and Opera only <html> <head> <script type="text/javascript"> function inset(elmnt) elmnt.style.border="inset 2" function outset(elmnt) elmnt.style.border="outset 2" </script>

12 <style> td background:c0c0c0; border:2px outset; </style> </head> <body> <table width="80"> <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href="/default.asp">home</a></td></tr> <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href="/js/default.asp">javascript</a></td></tr> <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href=" <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href=" <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href=" <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href=" </body> </html> Description menu <html> <head>

13 <style> table background:black; a text-decoration:none; color:#000000; th width:150px; background:#ff8080; td font:bold; background:#add8e6; </style> <script type="text/javascript"> function gettip(txt) document.getelementbyid('tip').innerhtml=txt function reset()

14 document.getelementbyid('tip').innerhtml=" " </script> </head> <body> <b>mouse over the links to see their descriptions</b><br /> <table width="400px"> <tr> <th> <a href=" onmouseover="gettip('w3schools is the best Web Developers resource on the Web')" onmouseout="reset()">w3schools.com</a> </th> <td rowspan="3" id="tip"> </td> </tr> <tr> <th> <a href=" onmouseover="gettip('internet Explorer is winning the browser war')" onmouseout="reset()">internet Explorer</a> </th> </tr> <tr> <th> <a href=" onmouseover="gettip('the Navigator is Netscapes browser tribute to web surfers')"

15 onmouseout="reset()">netscape Navigator</a> </th> </tr> </body> </html> Description image <html> <head> <style> table background:black; a text-decoration:none; color:#000000; th width:150px; background:#ff8080;

16 td font:bold; background:#add8e6; </style> <script type="text/javascript"> function gettip(image) document.getelementbyid('tip').innerhtml="<img src='" + image + "' />" function reset() document.getelementbyid('tip').innerhtml=" " </script> </head> <body> <b>mouse over the links to see their logos</b><br /> <table width="400px"> <tr> <th> <a href="/default.asp" onmouseover="gettip('w3schools.gif')" onmouseout="reset()">w3schools.com</a> </th>

17 <td rowspan="3" id="tip" align="center" valign="center"> </td> </tr> <tr> <th> <a href=" onmouseover="gettip('microsoft.gif')" onmouseout="reset()">internet Explorer</a> </th> </tr> </tr> <tr> <th> <a href=" onmouseover="gettip('netscapelink.gif')" onmouseout="reset()">netscape Navigator</a> </th> </tr> </body> </html> Cursor description IE and Opera only <html> <head> <style> body

18 background:#000000; color:#00ff00; font-weight:bold; acolor:#cccccc; </style> <script type="text/javascript"> function cursor(text) trail.innerhtml=text trail.style.visibility="visible" trail.style.position="absolute" trail.style.left=event.clientx+10 trail.style.top=event.clienty function hidecursor() trail.style.visibility="hidden" </script> </head> <body> <h1>mouse over these links</h1>

19 <a href="/default.asp" onmousemove="cursor('visit Yahooooooo.com')" onmouseout="hidecursor()">yahoo.com</a><br /> <a href=" onmousemove="cursor('go to AltaVista')" onmouseout="hidecursor()">altavista</a><br /> <a href=" onmousemove="cursor('search with Yahoo!')" onmouseout="hidecursor()">yahoo!</a><br /> <span id="trail" style="visibility:hidden">hello</span> </body> </html> Gray/Color image menu IE only <html> <head> <style> img filter:gray() </style> <script type="text/javascript"> function color(elmnt) elmnt.style.filter=false function gray(elmnt) elmnt.style.filter="gray()"

20 </script> </head> <body> Mouse over these image-links: <p> <a href="/default.asp"> <img border="0" onmouseover="color(this)" onmouseout="gray(this)" src="w3schools.gif" width="100" height="30"><br /></a> <a href=" <img border="0" onmouseover="color(this)" onmouseout="gray(this)" src="altavistalink.gif" width="146" height="42"><br /></a> <a href=" <img border="0" onmouseover="color(this)" onmouseout="gray(this)" src="yahoolink.gif" width="147" height="31"></a> </p> </body> </html> Sliding Vertically IE and Opera only <html> <head> <style> bodyfont-family:arial; tablebackground:black;position:absolute; acolor:black;text-decoration:none;font:bold

21 a:hovercolor:# td.menubackground:lightblue table.topnav font-size:80%; top:0; left:0; table.menu font-size:100%; bottom:0; z-index:-1; </style> <script type="text/javascript"> var i=0 var inthide function show() if (i>-100) i=i-1

22 document.all("menu").style.bottom=i function showmenu() clearinterval(inthide) intshow=setinterval("show()",10) function hide() if (i<0) i=i+1 document.all("menu").style.bottom=i function hidemenu() clearinterval(intshow) inthide=setinterval("hide()",10) </script> </head> <body>

23 <table class="topnav" width="150"> <tr bgcolor="#ff8080"> <td onmouseover="showmenu()" onmouseout="hidemenu()"> <a href="/default.asp"> MENU</a><br /> <table class="menu" id="menu" width="100%"> <tr><td class="menu"><a href="/html/default.asp">html</a></td></tr> <tr><td class="menu"><a href="/xhtml/default.asp">xhtml</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">css</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">xml</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">xsl</a></td></tr> </td> </tr> <br /> <p>mouse over MENU to see the menu options</p> </body> </html> Click sliding Vertically IE and Opera only <html> <head>

24 <style> bodyfont-family:arial; tablebackground:black;position:absolute; acolor:black;text-decoration:none;font:bold a:hovercolor:# td.menubackground:lightgreen table.topnavfont-size:80%;top:0;left:0 table.menufont-size:100%;bottom:0;z-index:-1 </style> <script type="text/javascript"> var i=0 var c=0 var inthide function show_hide_menu() if (c==0) clearinterval(inthide) intshow=setinterval("show()",10) c=1 else clearinterval(intshow) inthide=setinterval("hide()",10) c=0

25 function show() if (i>-100) i=i-1 document.all("menu").style.bottom=i function hide() if (i<0) i=i+1 document.all("menu").style.bottom=i </script> </head> <body> <table class="topnav" width="150"> <tr> <td bgcolor="#ff0000" onclick="show_hide_menu()"> <b>menu</b><br /> <table class="menu" id="menu" width="100%">

26 <tr><td class="menu"><a href="/html/default.asp">html</a></td></tr> <tr><td class="menu"><a href="/xhtml/default.asp">xhtml</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">css</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">xml</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">xsl</a></td></tr> </td> </tr> <p>click on the MENU to see the menu options.</p> </body> </html> Sliding horizontal <html> <head> <style> bodyfont-family:arial; acolor:black;text-decoration:none;font:bold a:hovercolor:# td.menubackground:lightblue table.nav

27 background:black; position:relative; font: bold 80% arial; top:0px; left:-135px; </style> <script type="text/javascript"> var i=-135 var inthide var speed=3 function showmenu() clearinterval(inthide) intshow=setinterval("show()",10) function hidemenu() clearinterval(intshow) inthide=setinterval("hide()",10) function show() if (i<-12) i=i+speed document.getelementbyid('mymenu').style.left=i

28 function hide() if (i>-135) i=i-speed document.getelementbyid('mymenu').style.left=i </script> </head> <body> <table id="mymenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()"> <tr><td class="menu"><a href="/default.asp">home</a></td> <td rowspan="5" align="center" bgcolor="#ff8080">m<br>e<br>n<br>u</td></tr> <tr><td class="menu"><a href="/asp/default.asp">asp</a></td></tr> <tr><td class="menu"><a href="/js/default.asp">javascript</a></td></tr> <tr><td class="menu"><a href="default.asp">dhtml</a></td></tr> <tr><td class="menu"><a href="/vbscript/default.asp">vbscript</a></td></tr> <p>mouse over the MENU to show/hide the menu</p> <p>try changing the "speed" variable in the script, to change the menus's sliding speed</p> </body> </html>

29 Click sliding horizontal <html> <head> <style> bodyfont-family:arial; acolor:black;text-decoration:none;font:bold a:hovercolor:# td.menubackground:lightblue table.nav background:black; position:relative; font: bold 80% arial; top:0px; left:-135px; margin-left:3px; </style> <script type="text/javascript"> var i=-135 var c=0 var inthide var speed=3 function show_hide_menu() if (c==0) c=1 clearinterval(inthide) intshow=setinterval("show()",10) else c=0 clearinterval(intshow) inthide=setinterval("hide()",10) function show()

30 if (i<-12) i=i+speed document.getelementbyid('mymenu').style.left=i function hide() if (i>-135) i=i-speed document.getelementbyid('mymenu').style.left=i </script> </head> <body> <table id="mymenu" class="nav" width="150" onclick="show_hide_menu()"> <tr><td class="menu"><a href="/default.asp">home</a></td> <td rowspan="5" align="center" bgcolor="#ff8080">m<br>e<br>n<br>u</td></tr> <tr><td class="menu"><a href="/asp/default.asp">asp</a></td></tr> <tr><td class="menu"><a href="/js/default.asp">javascript</a></td></tr> <tr><td class="menu"><a href="default.asp">dhtml</a></td></tr> <tr><td class="menu"><a href="/vbscript/default.asp">vbscript</a></td></tr> <p>click on the MENU to show/hide the menu</p> <p>try changing the "speed" variable in the script, to change the menus's sliding speed</p> </body> </html> <html> <head> <script type="text/javascript"> function go() window.location=document.getelementbyid("menu").value </script> </head>

31 <body> <form> <select id="menu" onchange="go()"> <option>--select a page--</option> <option value=" <option value=" <option value=" </select> </form> </body> </html>

CIE-H12 Web page Sample

eztcp Technical Document CIE-H12 Web page Sample Version 1.0 2011-08-31 Sollae Systems Co., Ltd. http://www.sollae.co.kr Contents Contents 1 Overview... 3 1.1 Overview... 3 2 Default... 4 2.1 Simple Modification