Clif!nt Sidf!

Scripting Language {22519)

Practical No. 14: Develop a webpage for implementing Menus

I. Practical Significance :
A menu consists a sci or options which are presented at users computer to help the
user to fi nd the information. Menus are common in use1 tnterfaces .

II. Releva nt Program Outcomcs(POs)

PO 1. Basic knowledge: App11 knov\ ledge or basic mathematics sciences and basic
engineering to solve the computer group related problem<;
PO 2. Discipline kno" ledge: Apply computer programming kncm ledge to soh e the
computer group related problems
PO 3. Experiments and practice: Plan to perform expcnments and practices to use the
result to so l\ e the computer group related problems
PO 4. Engineering Tools: Appl), relevant Computer programming technologies and
tools \\tth an understand mg of the lim1tat1ons
PO 5. Individual and team ,rnrk: Function effectl\ el) as a leader and team member :n
d1\erse mult1d1sc1plinan teams
PO 6. Commumcat10n: Communicate effecti, el1 tn oral and \\T1tten form
III. Competency and Practical Skill:
The Practical is expected to de, elop the folio,, ing skills
1 Develop a Ja,ascnpt to create the gi, en menu
IV. Relevant course outcome(s)
Create Menus and '\a, 1gation, in ,,ebpagc-.,
V. Practical outcomes(PrOs)
Develop webpage ror implementing ~!enus
VI. Relevant affective domain related Outcome(s)
I. Folio\, precaution mcasmes
2. Folio,, naming com ent1011-.,
3 Folio,, ethical pract1CL'S.
VII. Minimum Theoretical Background

A menu 1s a set of options prc-;cntcd to the uset of a rn111pull'1 .tpplic.1111,n ll' hl·lp the
user find information or execute a program f'unclion \\'1th lhl' lif1,t\,hl'flPt \\l' l'a 1
create menu navigation on H I Ml. pages ..J:1,,1~cnpl ~upplHh multipk I) pl'~ tii'nll'llll
such as DropDown menu, pull-down menu. pop up 111('1111. -.l1d111g menu. l'il'.

VIII. Resources required (additional) -

NIL

81
 Client Side Scripting Language (22519)

IX. Resources llscd(Additio nal)

Sr. Name or l{c~,;ourcc Broad Specificat ion l
Q~a-;. tity Rcm-;.rks(if
No.
~{' da
ch. -1011 -win To ff'<-~~ - - ~- -1-Anv)~--
1. l -
4ro (i~>iOO , ~4,B J<o.m
- _ l- - _ ___,

X. Prn~ram ( ode : Tcad1cr 11111..,t a"isign a ..,cparate prog ram statement to group of
J 4 ..,huknh .
.> a C n..•,11\' , l pu ll-dow n Menu .
V<hirq.l,)
\'1ltaJ1
<i r{ le>~ull. Down Mtrlu <'if, {It;>
,r,c,y;et)
{llnd i of/ Ge{CJCfcct rlcn1 C)
f\J~f e.le ;cfocurf/tll/je ttferne1di c( c~efec t');
r-.Jaf-£>if ~ efe.c9pio~{el.,.scieclEcl1riokjJ, val()e;,
~ .tc r~ C1 he .Ee&clecl value. ;s ', ~si 0~
1
<I.Ee-rift>
<lheocp
<1Jo/'J)
<!?>Ckcf ;rl_ _; •'3eJec/?
<C)rrliofJ "/aloe -= "l ") C(I opf,'cfJ)
(offio/7 v~Ju.ecc: "C,tf/C..1f (ltJft, 0 a?
">
( off ion f'Jcdu e -= "Jol/0( Jova<loftion,l
<'offrofl rvrulvt ;; "1~voBcr,'fl "') i~-vtllgc tipl ( /opft'oa)
(}~elect;>
<.buf&on on c)i"ck. ~ .. deiselectedflcm u; ?'Crel!xkci&:fJle>r;
<Ih" lio,7)
z/b:J'f:.
<I h{rr;:/) .
- - - - - -- - - - -- - - -- -
-----
82
-
 {9 WhatsApp X 0 Pull-Down Menu >< • Tabs X I Sliding Menu X j + v - ol X

~ ➔ C (D 127.0.0.1:5500/Code%20with%20Hany/javaScriptPractice/WebDev/pulldownmenu.html

~IC_ _ _v~I I GetSlecutem I

II P Type here to search ~ >(I Iii II ,~ Iii C- A QI ,._, (!) ~>))

6:28 PM
~ 12/16/ 2021 [J
 {9 WhatsApp X 0 Pull-Down Menu >< • Tabs X I Sliding Menu X j + v - ell X

t- ➔ C (D 127.0.0.1:5500/Code%20with%20Hany/javaScriptPractice/WebDev/pulldownmenu.html

I
C= = =v==!I GetSlecutem
:=I I
C
C++
Java

6:29 PM
II P Type here to search ~ >(I Iii A QI ,._, (!) ~>)) ~ 12/16/2021 [J
 {9 WhatsApp X 0 Pull-Down Menu >< • Tabs X I Sliding Menu X j + v - ell X

~ ➔ C (D 127.0.0.1:5500/Code%20with%20Hany/javaScriptPractice/WebDev/ pulldownmenu.html

IJavaScript v 11 GetSlectltem I 127.0.0.1:5500 says

-
The Selected Value is: JavaScnpt

6:29 PM
II P Type here to search ~ >(I Iii A QI ,._, (!) ~>)) ~ 12/16/2021 [J
-+- a.. Side Saipr;ng Languagr (22519)

:XI. Result (Output of code):

·a······ ·--· ·--.. ·ct·· -··· ·-·· -...... ····.... ······ ·· .... ··· ···.....·· ···......................
···· ··· ··· ·· ···· ·· ····
'~
· . '- -- ~ t .. paJJ ..W(). .. efl.~- ~ .. l .. .. 'J .... · i·· -.f _
, ,.... .
·· · · ·· · ······ · ·· ··· ···· · ·· ······· ·· · . . . . n..tc.-l
. .V.tf) .
u. r··
D1A .. .......... ............ ••• •
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ..... ..... .
.

XII. Pa-actical Related Question

a. Enlist the different t) pes of Menus
b. Explain popup Menu .
(Space for ans,Hr)

tJ.t:&UlldoW(! w_eou _) 'i-i f)~o~m,cl!J~ Ch<lflj1'ns !he rr?f nu::·::::

. ~. Yolidad;_Q_9 fVferu" .£e.'lec1¥r1 ~ }::(cit} i r~ we (Ju - .
..6}..Cbcr it?.£1!/tcl. M.eou > -4.> <Tq,b Me0u ~9)-_ Po pup trlcflu
-~ ~fld~o.q _YT} _f(l_{) _, ~}fi~r>}ifeJ Meou !> Jj-/:'o.Jcf,-r a
4 HUtJJJ .
.. Trrte ..'rtTenu. Y . z!)- to'a.1-/.c;c/ r(}t.(lu .> w,~c"JTJ/iciJilc
.#"£1.;Je bar tfiefl11 .. .. . .. . . . .. .. . . . . . .....
I • • • •• • • • ••• • • ••• ••• ••• ••• ••• 0 o o ooo •• oo • o • o 00 o o • o O ooo o • • o o O o oo • oo

. ... . .......... .
. . .. . ......... .
. . .. . . . ...... . . .......... .
. . . . . . . . . .. .. . . ..
.. . .. . .. . .. ... ... . .. .. ...
.. . .. . . . . ... .. ... ... .. . . ... . . . . . . . ... . . .
.. . . .. . . .. . . .. .... ... ... .. ... .. .. ... . . . . . . . .. .. . .
. .. .. .. ... ... ... ... . ·····... ... .. . . ... . . . . . . .. . . . .. .. ..
. . . . . ... ... ...... . . . .. ... .. . .. .... ... ... ... .. .. . . . .. . .. .. . .. ..
. . . . .. . . . ... . . . .. . . .. . . .... . .. .. . . . . . .. ....... . .. . ... . . . . . . . . ... . . .. . . ...
... . . . . . . .. . ... ... ...... ... .. . . .. . .. ... . . . .. . .. ... . .. . . . ... . ....
. . . ... . .. . .. ... ... ... ... ... ... . .. ... ... ... . ......................... . . .. . ....
................................. ........ .................. .. .. . . . . . .
. .. . .. . ..
... . . .. .. . . . . .. .. . . ... . . . . . . . . . . . . . . .. ... .. .. . . .. .. . ... . . .. ..... ... . ........ .
. . .. .... . .. . ...... .

-----------
 ...... ·········
.......... ······ ...
JU11. E1ertise
a Cr1.:,Hc a tah Menu ,, 1th 1 tabs ,, here c, Cf) t.ib ,, ill pl.':rform one arithmetic
opcr,tt1011
h <. rl:,llc a , lid m , menu
(Srarc for \ns\\cr)

... . . . . . . . . . .
. . . .. ..... ··········
.... ············· .
....... .. ... .. . . .
Q a. Create a tab Menu with 3 tabs \.vhere every tab \.Vill perform one
arithmetic option.

► Code: index.html :
<!DOCTYPE html>
<hbnJ>
<bead>
<meta cbarset="UTF-8">
<title>Tabs<ltitle>
<link rel="stylesbeel" type="text/css" href=''css.css">
<link rel="icon" type="iarnge/x-icon" href="favicon png">
</bead>
<body style="padding: 20px">
<hl class="title">Tabs<lb l>
<div class="tabContainer">
<div class="buttonContainer">
<button onclick="sbowPanel(0,'#f44336')">Tab 1 ADD</button>
<button onclick="showPanel{ l ,'#4-caf50')">Tab 2 SUB<lbutton>
<button onclick="showPanel{2,'#2 196f3')"> Tab 3 DIY<lbut1on>
<button onclick="showPanel(3,'#ff5722')">Tab 4 MUL<lbutton>
<!div>
<div class="tabPanel''>
<label> No. !</label>
<inpu t type="text'' id="addnl ">
< label >No. 2</label>
<input type="text" id="addu2">
<button onclick="addO"> ADD </button>
</div>
<div class="tabPanel">
<label> No. I </label>
<input type="text" id=''subn 1">
<label>No. 2</label>
< input type=''text" id="subn2">
<button onclidc="subO"> SUB </button>
</div>
<div class="tabPanel">
<label> No. l<llabel>
<input type=''text" id=" divnJ ">
<label>No. 2</label>
<input type=''text" id= "divn2">
<button onclick="divO"> DI\" </button>
</div>
 <div class="tabPanel">
<label> No. I <llabel>
<input type=''text" id="mulnl ">
<label>No. 2</label>
<input type="text" id- "muln2 ">
<button ouclick="mnlO"> MUL </button>
</div>
<Id.iv>

<script src="n1yScriptjs"><lsoript>
</body>
<lbtml>
 ► Code: css.css :

.title{
font-family: sans-serif;
color: #dc2d5e;
text-align: center;
}
.tabContainer{
width: 100%;
height 350px;
}
.tabContamer .buttonContainer{
height 15%;
}
.tabContainer .button Container button {
width: 25%;
height 100%;
float: left;
border: none;
outline:none;
CW'$or: pointer;
paddmg: !Opie;
font-family: sons-serif;
font-size: l Spx;
background-color: #eee;
}
.tabContainer .buttonContainer burton:hover{
background-color: #d7d4d4;
}
.tabCoutainer .tabPanel{
he1ght 85%;
background-color: grny;
color: white;
text-align: center;
padding-top: 105px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 22px;
display: none;
}
 ► Code: myscript.js :

var tabButtous=document.querySelectorAll(".tabContainer .buttonContainer button");

var tabPanels=document.querySelectorAll(" .tabContai:ner .tabPanel");

function sbowPanel(panellodex,colorCode) {
tabButtons.forEacb(function(node){
node.style.backgroundColor="";
node.style.color="";
});
tabButtons[panellodex].style.backgroundColor-colorCode;
tabButtons[panelludex].style.color="wbite";
tabPanels.forEacb(function(node){
node.style.display="none";
});
tabPanels[panellodex.].style.display="block";
tabPanels[panellodex].style.backgroundColor = colorCode;

}
function addQ {
var addnl = document.getElementByld("addnl ");
var addn2 = document.getElementByld("addn2");
var a = Nwnber(addnl .value);
var b = Number(addn2.value);
var c = a+ b;
alet1("The Addition of " + a + " and "+b +" is: " + c);
cousoleJog(c);
}
function subO {
var subul = document.getElementByid("subul ");
var subn2 = document.getElementByld("subn2");
var a= Number(subn l.value);
var b = Number(subn2.value);
var c = a - b;
alen("The Subtraction of " + a + " and " + b + " is: " + c);
console.log(c);
}
function divQ {
var divn I = document.getElementByid("divn I"};
var divn2 = document.getE lementByid("divn2");
var a= Number(divnl .value);
var b = Nwnber(divn2.value);
 var c =a / b·•
alert("Tbe Dvision of" + a + " and "+ b + " is: " + c);
console.log(c);
}
function mulO {
\·ar mulul =documentgetE lemeutByid("mulnl ");
var muln2 = documenlge1ElemeutByid("muln2");
\"ar a = Number(mulnl .value);
\'Rf b = Number(muln2.value);
var c = a• b·
'
alert("111e l\1ultiplicatiou of " + a + " and " + b + " is: " + c);
console.log(c);
}
showPanel(0,'#f44336');
{9 WhatsApp X I Pull-Down Menu X D Tabs X SlidmgMenu X I + v - ol X

~ ➔ C (D 127.0.0.1:5500/Code%20wrth%20Hany/javaScriptPractice/WebDevjtabdemofmdex.html

Tabs
Tab 1 ADD Tab 2 SUB Tab 3 DIV Tab4 MUL

No. 2 El

II P Type here to search II ,~ Iii <- A QI ,._, e> ~>))

6:30 PM
~ 12/16/ 2021 [J
{9 WhatsApp X I Pull-Down Menu X D Tabs X SlidmgMenu X I + v - ol X

~ ➔ C (D 127.0.0.1:5500/Code%20wrth%20Hany/javaScriptPractice/WebDevjtabdemofmdex.html

127.0.0.1:5500 says

-
The Addition of 10 and 5 is: 15

Tab 1 ADD Tab 2 SUB Tab 3 DIV Tab4 MUL

No. 2 El

6:30 PM
II P Type here to search A QI ,._, O ~>)) ~ 12/16/ 2021 [J
'9 WhatsApp X I Pull-Down Menu X D Tabs X Sfi<lingMenu X 1
+ v - 0 X

~ -'l C (D 1 27.0.0.1 :5500/Code%20with%20Harry/javaScriptPractice/WebDev/tabdemo/index.html

127.0.0.1:5500 says
Th€ subtraction of 1o and 5 is: s

l+•i■1
Tab 1 ADD Tab2 SUB Tab 3 DIV Tab4 MUL

6:30PM
II P Type here to search ~ ~•)) 'E;;J 12/1612021 [J
{9 WhatsApp X I Pull-Down Menu X D Tabs X SlidmgMenu X I + v - ol X

~ ➔ C (D 127.0.0.1:5500/Code%20wrth%20Hany/javaScriptPractice/WebDevjtabdemofmdex.html

127.0.0.1:5500 says

-
The DVISIOfl of 10 and 5 IS: 2

Tab 1 ADD Tab 2 SUB Tab 3 DIV Tab4 MUL

No. 1 ,

II P Type here to search II ,~ Iii C- A QI ,._, O ~>))

6:31 PM
~ 12/16/ 2021 [J
{9 WhatsApp X I Pull-Down Menu X D Tabs X SlidmgMenu X I + v - ol X

~ ➔ C (D 127.0.0.1:5500/Code%20wrth%20Hany/javaScriptPractice/WebDevjtabdemofmdex.html

127.0.0.1:5500 says

-
The Multiplication of 10 and 5 1s: 50

Tab 1 ADD Tab 2 SUB Tab 3 DIV Tab4 MUL

No. 1 , No. 2

II P Type here to search II ,~ Iii <- A QI ,._, O ~>))

6:32 PM
~ 12/16/ 2021 [J
b. Create a sliding menu.

► Code : slidingmenu.html :
<IDOCTYPE llbnl>
<hnnl>

<head>
<title>Sliding 1vienu<ltitle>
<mela name="viewport" content="widtb=device-width, initial-scale= l ">
<style>
body {
font-family: "Lato" , sans-serif;
}

.s idenav {
height: 100%;
width: O;
position: fixed;
z-index.: 1;
top: o;
left: O;
bockground-color: # 111 ;
overflow-x: hidden;
transition: 0.Ss;
padding-top: 60px;
}

.s idenav n {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 2Spx;
color: #818181 ;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #fl fl fl ;
}

.sidenav .closebm {
position: absolute;
top : 0;
 right: 25px.;
font-size: 36px;
margin-left: 50px;
}

@media screen and (max-height 450px) {

.sidenav {
padding-top: 15px;
}

.sidenav a {
font-size: I Spx;
}
}
<!style>
</head>

<body>

<div id="mySidenav" class="sidenaY">

<a href="javascript,·oid(0)" class=''closebtn" onclick="closeNavO">&times;</a>
<a href="admission fornihtm.l">Addmition Form</a>
<a href="login_form bbnl">Login Form</a>
<a href="slideshowdemo.html''>Slide Show<la>
<a href="bannerdemo.htm.l"> Banner Demo<la>
</div>

<h2>Animated Sidenav Example<lh2>

<p>Click on the e lement below to open the side OJ1vigation menu.<lp>
<span style="font-size:30px;cursor:pointer" onclick="openNavO">&#9776; open</span>

<script>
function openNavQ {
docwnentgetElementByld("mySideOllv").style.width = "250px";
}

function closeNavO {
documentgetElementByld("mySidenav").style.\\idlh = "0";
}
</script>

</body>

</hhnl>
{9 WhatsApp X I Pull-Down Menu X I • Tabs X 0 Shding M enu X + V - ell X

~ ➔ C (D 127.0.0.1:5500/Code%20with%20Hany/javaScriptPractice/WebDev/sfidingmenu.html

Animated Sidenav Example

Click on the element below to open the side navigation menu.

= open

6:32 PM
II P Type here to search ~ >(I Iii A QI ,._, (!) ~>)) ~ 12/16/2021 [J
(9 What.App X I Pull-Down ~nu X I • Tabs X 0 Siodlng Menu X + V - [j X

r ➔ C (D 127,0.0,1:SSOO/Code%20w1th%20Harry/javaScnptPract1ce/WebOev/shd1ngmenu.html

the side navigation menu.

=P Type here to sea rch ~ ,(J Iii II lt:1 Iii & e

6:32 PM
13 •>l ii;;;i 12116/2021 Cl
 {9 WhatsApp X I Pull-Down Menu X I • Tabs X 0 Sh<fing Menu X + V - ell X

~ ➔ C (D 127.0.0.1:5500/Code%20with%20Hany/javaScriptPractice/WebDe v/sfidingme nu.html

><

' ''. t the side navigation menu.

Login Form

127.0.0.1:5500/Code with HanyljavaScriptPractice/WebOev/log1n_form.html

6:32 PM
II P Type here to search A QI ,._, (!) ~>)) ~ 12/16/ 2021 [J
{9 WhatsApp X I Pull-Down Menu X I • Tabs X 0 Logm Form X + V - (JI X

~ ➔ C (D 127.0.0.1:5500/Code%20with%20Hany/javaScriptPractice/WebDev/1ogin_form.html

Login Form
User Name : IIEnter Your User Name Ema j
Password IIEnter Your Password
I Submit I

6:33 PM
II P Type here to search ~ >(I Iii A Q ,._, (!) ~>)) ~ 12/1 6/ 2021 [J
 {9 WhatsApp X I Pull-Down Menu X I • Tabs X 0 Sh<fing Menu X + V - ell X

~ ➔ C (D 127.0.0.1:5500/Code%20with%20Hany/javaScriptPractice/WebDev/sfidingmenu.html

><

the side navigation menu.

Slide Show

127.0.0.1:5500/Code with Hany/javaScriptPractice/WebOev/sfideshowdemo.htm

6:33 PM
II P Type here to search A QI ,I:., (!) ~>)) ~ 12/1 6/2021 [J
{9 WhatsApp X I Pull-Down Menu X I • Tabs X 0 Document X + V - ol X

f- -i C (D 127.0.0.1:5500/Code%20with%20Hany/javaScriptPractice/WebDev/sfideshowdemo.html

I Prev,us 11 Next I

II P Type here to search g >(I Iii II Ii Iii C- A QI ,Q (!) ~>)) 'kJ

6:33 PM
12/1 6/ 2021 [J