Skip to content

Commit fb10fc1

Browse files
amhoomanamhooman
authored
Create new.html
1 parent 6ff916e commit fb10fc1

File tree

1 file changed

+201
-0
lines changed

1 file changed

+201
-0
lines changed

‎new.html

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
2+
3+
<!DOCTYPE HTML>
4+
<html lang="en-AU">
5+
6+
<head>
7+
<meta charset="utf-8">
8+
<title>New Tab</title>
9+
<link rel="stylesheet" href="style.css">
10+
<link rel="icon" type="image/png" href="favicon.png">
11+
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Space+Mono" rel="stylesheet">
12+
<style type="text/css"><!--
13+
#menuv {
14+
position:relative;
15+
padding:2px;
16+
}
17+
18+
/* Properties for horizontal menu */
19+
#menuv li {
20+
float:left;
21+
margin:1px 8px;
22+
border:1px solid blue;
23+
background-color:#daedfe;
24+
padding:1px 2px;
25+
list-style-type:none;
26+
font-weight:600;
27+
text-align:center;
28+
text-decoration:nderline;
29+
}
30+
#menuv .olishow {
31+
background-color: yellow;
32+
}
33+
34+
/* Properties for vertical menu */
35+
#menuv .oli ul, #menuv .olishow ul {
36+
display:none;
37+
position:absolute;
38+
margin:1px auto 1px -8px;
39+
background-color:#f0f1fe;
40+
border:1px dashed blue;
41+
padding:1px;
42+
}
43+
#menuv li ul li {
44+
position:relative;
45+
clear:both;
46+
width:99%;
47+
margin:1px 0;
48+
border:none;
49+
background-color:#edfeed;
50+
padding:1px;
51+
}
52+
#menuv li:hover ul, #menuv .olishow ul {
53+
display:block;
54+
}
55+
56+
/* Links in sub-menu */
57+
#menuv ul li a {
58+
display:block;
59+
margin:0;
60+
font-weight:normal;
61+
padding:1px;
62+
}
63+
#menuv ul li a:hover, #menuv ul .vlishow a {
64+
background-color:#fefefe;
65+
text-decoration:none;
66+
font-style:oblique;
67+
color:#fb0001;
68+
}
69+
--></style>
70+
</head>
71+
72+
<body>
73+
<!-- Horisontal-Vertical Menu, https://coursesweb.net/ -->
74+
<ul id="menuv">
75+
<li class="oli"><a href="http://swordslasher.com" title="Home">Home</a></li>
76+
<li class="oli">Games
77+
<ul>
78+
<li><a href="http://swordslasher.com/games" title="Border properties">All Games</a></li>
79+
<li><a href="http://swordslasher.com/games/dark.html" title="opacity">All Games(dark mode)</a></li>
80+
<li><a href="https://amhooman.github.io/fireboywatergirl/game.html" title="opacity">Fireboy and Watergirl</a></li>
81+
82+
</ul>
83+
</li>
84+
<li class="oli">add later
85+
<ul>
86+
<li><a href="https://coursesweb.net/html/html5-quick-tutorial_t" title="HTML5 Quick Tutorial">HTML5 Quick Tutorial</a></li>
87+
<li><a href="https://coursesweb.net/html/html5-canvas_t" title="HTML5 canvas Tutorial">HTML5 canvas Tutorial</a></li>
88+
<li><a href="https://coursesweb.net/html/html5-new-tags_t" title="HTML5 New Tags">HTML5 New Tags</a></li>
89+
</ul>
90+
</li>
91+
<li class="oli"><a href="https://coursesweb.net/ex/contact" title="Contact">not working</a></li>
92+
</ul>
93+
94+
<script type="text/javascript"><!--
95+
// gets all <li> within #menu element
96+
var menuli = document.getElementById('menuv').getElementsByTagName('li');
97+
var nrmenuli = menuli.length;
98+
var oli = []; // store horisontal menu items
99+
var crt_oli; // store current horisontal element
100+
var vli = []; // store vertical menu list in within current horisontal element
101+
var nroli = 0; // number of horisontal menu items
102+
var nrvli = 0; // number of vertical menu lists
103+
var url_adr = ''; // store the URL address added in the anchor <a> of current navigated list
104+
105+
// traverse $menuli to add the horisontal menus in $oli
106+
for(var i=0; i<nrmenuli; i++) {
107+
if(menuli[i].className == 'oli') {
108+
oli.push(menuli[i]);
109+
}
110+
}
111+
112+
var ih = -1; // to store the index of current horizontal item in $oli
113+
var iv = -1; // to store the index of current vertical item in $vli
114+
115+
// accessed on press the Left /Right arrow keys
116+
// show current horisontal menu
117+
function showOli(index) {
118+
iv = -1; // reset imdex of vertical menu when moves to other horisontal menu
119+
url_adr = ''; // empty this variable
120+
121+
for(var i=0; i<nroli; i++) {
122+
oli[i].className = 'oli';
123+
}
124+
crt_oli = oli[index]; // store current horisontal element
125+
crt_oli.className = 'olishow'; // set class="olishow"
126+
127+
// if current horisontal menu contains vertical menu, store it in $vli, and display it
128+
if(crt_oli.getElementsByTagName('ul').length > 0 && crt_oli.getElementsByTagName('ul')[0].getElementsByTagName('li')) {
129+
vli = crt_oli.getElementsByTagName('ul')[0].getElementsByTagName('li');
130+
nrvli = vli.length;
131+
showVli(); // calls showVli() to set class="vli" to all list in its vertical menu
132+
}
133+
else {
134+
// if current horisontal menu no has vertical list
135+
// if contains a link, calls the function setUrlAdr() to add its "href" value in $url_adr
136+
if(crt_oli.getElementsByTagName('a').length > 0) setUrlAdr(crt_oli.getElementsByTagName('a')[0]);
137+
vli = []; // empties $vli
138+
nrvli = 0;
139+
}
140+
}
141+
142+
// accessed on press the Up /Down arrow keys
143+
// show current vertical menu
144+
function showVli(index) {
145+
url_adr = ''; // empties this variable
146+
if(nrvli > 0) {
147+
for(var i=0; i<nrvli; i++) {
148+
vli[i].className = 'vli';
149+
}
150+
if(index >= 0) {
151+
vli[index].className = 'vlishow';
152+
153+
// if contains a link, calls the function setUrlAdr() to add its "href" value in $url_adr
154+
if(vli[index].getElementsByTagName('a').length > 0) setUrlAdr(vli[index].getElementsByTagName('a')[0]);
155+
}
156+
}
157+
}
158+
159+
// adds in $url_adr the "href" value of the anchor element <a> passed in "link" parameter
160+
function setUrlAdr(link) {
161+
url_adr = link.href;
162+
}
163+
164+
// function with code to get the pressed keyboard key
165+
function KeyCheck(e){
166+
// https://coursesweb.net/
167+
nroli = oli.length;
168+
var keyid = (window.event) ? event.keyCode : e.keyCode; // get the code of the key pressed
169+
170+
// modify the index of horisontal /vertical item, calls the indicated function according to pressed key
171+
switch(keyid) {
172+
// Left
173+
case 37:
174+
ih--;
175+
if(ih < 0) ih = 0;
176+
showOli(ih);
177+
break;
178+
// Up
179+
case 38:
180+
iv--;
181+
if(iv < 0) iv = 0;
182+
showVli(iv);
183+
break;
184+
// Right
185+
case 39:
186+
ih++;
187+
if(ih >= nroli) ih = 0;
188+
showOli(ih);
189+
break;
190+
// Down
191+
case 40:
192+
iv++;
193+
if(iv >= nrvli) iv = 0;
194+
showVli(iv);
195+
break;
196+
// Enter (opens the link)
197+
case 13:
198+
if(url_adr != '') window.location = url_adr;
199+
break;
200+
}
201+
}

0 commit comments

Comments
 (0)