Scribd
Upload
41 views3 pages

Webnav With Jscript

The document provides instructions to add a navigation menu to an HTML page by editing the JavaScript and CSS files. Code is added to the JavaScript file to generate a navigation menu and insert it into the HTML. Additional CSS styling is also provided to style the navigation menu.

Uploaded by

Ako CSir ArtBeracute
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
41 views3 pages

Webnav With Jscript

The document provides instructions to add a navigation menu to an HTML page by editing the JavaScript and CSS files. Code is added to the JavaScript file to generate a navigation menu and insert it into the HTML. Additional CSS styling is also provided to style the navigation menu.

Uploaded by

Ako CSir ArtBeracute
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

In the DemoWeb folder, edit the JavaScript file Script.js.

Add the following to the script:

document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='Index.html'>Home</a></li>" +
"<li><a href='Customers.html'>Data</a></li>" +
"<li><a href='About.html'>About</a></li>" +
"</ul>";

Addition to Site.css
ul#menu {
padding: 0;
margin-bottom: 11px;
}
ul#menu li {
display: inline;
margin-right: 3px;
}
ul#menu li a {
background-color: #ffffff;
padding: 10px 20px;
text-decoration: none;
color: #696969;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
color: white;
background-color: black;
}
<!DOCTYPE html>
<html>

<head>
<title>Our Company</title>
<link href="Site.css" rel="stylesheet">
</head>

<body>

<nav id="nav01"></nav>

<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients:</h2>

<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and Databases)</p>

<footer id="foot01"></footer>
</div>

<script src="Script.js"></script>

</body>

</html>

You might also like