I want to build a drop down menu using the jquery using the click event not the hover event.
What i come up in coding is working appropriately is there any other short way to perform multilevel drop down menu
var initMenu = {
show: function() {
$('#left_dropbar ul ul').hide();
$('#left_dropbar ul:first').show();
$('#left_dropbar li a').click(function() {
var checkClick = $(this);
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
var ulCheck = checkClick.parent();
ulCheck.find('ul').slideUp('normal');
return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
checkElement.slideDown('normal');
return false;
}
});
}
}
$(document).ready(function() {
initMenu.show();
});
/** css **/
body {
font: 12px/17px Arial, Tahoma, Sans-serif;
}
#left_dropbar {
margin: 0;
padding: 0;
}
#left_block .headerbar {
background: url("arrowstop.gif") no-repeat scroll 8px 6px #606060;
color: #FFF;
font: bold 13px Verdana;
margin-bottom: 0;
text-transform: uppercase;
padding: 7px 0 7px 10px;
}
#left_dropbar li {
list-style: none;
padding: 3px 0;
}
#left_dropbar li a {
text-decoration: none;
}
#left_block {
background: none;
float: left;
width: 225px;
}
#firstlevel {
list-style-type: none;
margin: 0 !important;
padding: 0;
}
#firstlevel a {
background: none repeat scroll 0 0 #E9E9E9;
color: #000;
display: block;
text-decoration: none;
padding: 5px 0 5px 8px;
}
ul li {
list-style-type: none;
}
#left_dropbar ul {
margin-left: 10px;
}
ul,
li {
margin: 0;
padding: 0;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>New Document</title>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/left.js"></script>
<link rel="stylesheet" type="text/css" href="css/left.css" />
</head>
<body>
<div id="left_block">
<div class="headerbar">Search</div>
<div id="left_dropbar" class="left_content">
<!-- First level menu start here -->
<ul id="firstlevel">
<li>Overview
<!-- Sub level 1 menu start here -->
<ul class="subfirstlevel">
<li>Guidelines
</li>
<li>Visual Specifications
</li>
<li>Interactions
</li>
</ul>
<!-- Sub level 1 menu end here -->
</li>
<li>Table of Content
</li>
<li>Layout
</li>
<li>Required Screen Elements
</li>
<li>Layout
</li>
<li>Controls
<!-- Controls Sub level 1 menu start here -->
<ul class="subfirstlevel">
<li>Buttons
<!-- Controls Sub level 2 menu start here -->
<ul>
<li>Guidelines
</li>
<li>Visual Specifications
</li>
<li>Interactions
</li>
</ul>
<!-- Controls Sub level 2 menu end here -->
</li>
<li>CheckBoxes
</li>
<li>Combo Boxes
</li>
</ul>
<!-- Controls Sub level 1 menu end here -->
</li>
</ul>
<!-- First level menu end here -->
</div>
</div>
</body>
</html>
The code you had up only worked for me on the first link/submenu. I would add
#left_dropbar ul ul{display: none;}
to your css and simplify your javascript to
function expandMenu(e){
var sublist = $(e.target).next("ul");
if(sublist.length != 0){
if(sublist.is(":visible")){
sublist.slideUp('normal');
}
else{
sublist.slideDown('normal');
}
}
return false;
}
$(document).ready(function () {
$('#left_dropbar ul:first').show();
$('#left_dropbar li a').click(expandMenu);
});
See this fiddle.
Related
I made a dropdown menu in my header, and when I click the moon icon (at the top right), the dropdown list doesn't show up but the function does get called when I click the icon. I've tried to use buttons but then clicking on the icon doesn't work.
Any one help me with this? I am new to this thanks.
Html:
<li>
<div class="dropdown">
<script src="./assets/js/Dropdown.js"></script>
<i class="fa-solid fa-bolt fa-lg" class="dropbtn" onclick="Dropdown()"></i>
<div id="myDropdown" class="dropdown-content">
<a><i class="fa-solid fa-moon"></i> Dark Mode</a>
<a><i class="fa-solid fa-sun"></i> Light Mode</a>
<a><i class="fa-solid fa-display"></i> System</a>
</div>
</div>
</li>
CSS:
.dropbtn {
background-color: #24252A;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
cursor: pointer;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
Javascript:
function Dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
You have two class attributes in your icon element.
When the user clicks the icon there are two click events - the first happens on the icon itself and the show class is correctly added.
The second is the general click on the window. Having two classes confuses the JS matches function which reckons the element does not match (ie would not get selected with .dropbtn) [probably not exactly 'confused' it just looks at the first class attribute so misses the dropbtn value] so it clears the show class.
If you put all the icon's classes into one attribute value then things work OK.
function Dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: #24252A;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
cursor: pointer;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<li>
<div class="dropdown">
<script src="./assets/js/Dropdown.js"></script>
<i class="fa-solid fa-bolt fa-lg dropbtn" onclick="Dropdown()">click me</i>
<div id="myDropdown" class="dropdown-content">
<a><i class="fa-solid fa-moon"></i> Dark Mode</a>
<a><i class="fa-solid fa-sun"></i> Light Mode</a>
<a><i class="fa-solid fa-display"></i> System</a>
</div>
</div>
</li>
You could instead consider using event.stopPropagation in the first event handler which would stop the click event going through to the whole window.
I used to have that problem.
But, you don't have to reinvent the wheel, I recommend using a CSS framework, like Materialize or Bootstrap.
I recommend Materialize, it's easy to use and you just have to initialize each element you want to use.
I show you an example of navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Materialize initializers -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});</script>
</body>
</html>
Hello I am new to HTML and CSS, and I was trying to display the contents of a div element when I hover over a li element. So basically what I am trying to do is when I hover over one li element (say: ls1), I want to display dv2. However, my code does not display the contents even when I hover over it. Please help!! Thank you.
const list_dv1 = document.querySelectorAll('.dv1 li');
function show_item() {
list_dv1.forEach((item) =>
item.classList.remove('hovered'));
this.classList.add('hovered');
}
list_dv1.forEach((item) =>
item.addEventListener('mouseover', show_item));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
position: relative;
background-color: black;
height: 100vh;
width: 100%;
}
.dv1 {
background-color: yellow;
cursor: pointer;
}
.dv1 li:hover {
transform: scale(1.2);
}
ul {
list-style-type: none;
display: flex;
}
li {
margin: 20px;
}
.dv2 {
background-color: greenyellow;
color: black;
}
.dv2 {
display: none;
}
.ls1:hover+.dv2 {
display: block;
}
.dv3 {
background-color: yellowgreen;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Practice Hiding Elements</title>
</head>
<body>
<div class="main">
<div class="dv1">
<ul>
<li class="ls1">Hover over me once</li>
<li class="ls2">Hover over me twice</li>
</ul>
</div>
<div class="dv2">You found me!</div>
<div class="dv3">You found me twice!</div>
</div>
</body>
</html>
can anyone please help with the below code I'm trying to implement star rating using query here is my code below
it's showing as an alert box but I need to show the value on myrating
I have used a simple query for this I need to show the value on clicking each anchor tag and shows the text of each tag
for example when
first a tag is is clicked the label should the text of that a tag 1
hope you guys get the issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.stars a {
display: inline-block;
padding-right: 4px;
text-decoration: none;
margin: 0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "\f005";
color: #9e9e9e;
}
span {
font-size: 0;
/* trick to remove inline-element's margin */
}
.stars a:hover~a:after {
color: #9e9e9e !important;
}
span.active a.active~a:after {
color: #9e9e9e;
}
span:hover a:after {
color: blue !important;
}
span.active a:after,
.stars a.active:after {
color: blue;
}
</style>
</head>
<body>
<p class="stars">
<label class="myrating">0</label>
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.stars a').on('click', function() {
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
alert($(this).text());
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.stars a {
display: inline-block;
padding-right: 4px;
text-decoration: none;
margin: 0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "\f005";
color: #9e9e9e;
}
span {
font-size: 0;
/* trick to remove inline-element's margin */
}
.stars a:hover~a:after {
color: #9e9e9e !important;
}
span.active a.active~a:after {
color: #9e9e9e;
}
span:hover a:after {
color: blue !important;
}
span.active a:after,
.stars a.active:after {
color: blue;
}
</style>
</head>
<body>
<p class="stars">
<label class="myrating">0</label>
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.stars a').on('click', function() {
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
alert($(this).text());
$('.myrating').html($(this).text());
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.stars a {
display: inline-block;
padding-right: 4px;
text-decoration: none;
margin: 0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "\f005";
color: #9e9e9e;
}
span {
font-size: 0;
/* trick to remove inline-element's margin */
}
.stars a:hover~a:after {
color: #9e9e9e !important;
}
span.active a.active~a:after {
color: #9e9e9e;
}
span:hover a:after {
color: blue !important;
}
span.active a:after,
.stars a.active:after {
color: blue;
}
</style>
</head>
<body>
<p class="stars">
<label class="myrating">0</label>
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.stars a').on('click', function() {
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
$('.myrating').html($(this).text());
});
</script>
</body>
</html>
The current solution is using the content of the selected element to open the alert
alert($(this).text());
The first question is how to query an element by class using jquery, and you have the answer reading the code itself when you do $('.stars span') you are searching for every span inside that element with the stars class.
What we want to do is search for that myrating class. With that in hand, we can change the innerText of that element, jQuery does this by using the .text(content) function.
And the last part is how do you get the start content in the first place, using jQuery you can follow a similar path you took to change the innerText but using no attribute jQuery will return instead of change the content of the element.
$('.myrating').text($(this).text())
If you need to do it in the future without jQuery you have two ways in vanilla js:
Using the get elements by class name API, make sure you test if the list has an item before accessing the innerText property. The difference between those two solutions is that they will change only the first element it finds.
const myRatingEl = document.getElementsByClassName('myrating')
// only change innerText if at least one element was found
if (myRatingEl.length > 0) {
myRatingEl[0].innerText = 'example'
}
Using the querySelector API, which is similar to jQuery
const myRatingEl = document.querySelector('.myrating')
// only chang inner text if the element was found
if (myRatingEl) {
myRatingEl.innerText = 'example'
}
I am trying to place a responsive sticky footer over a full screen slideshow. For the sticky footer I am using this solution ( a Javascript and CSS solution ) Sticky footer link. Slideshow is a Javascript slideshow. But I am not able to get the sticky footer to work with the slideshow. Once I remove the slideshow, the sticky footer works!. I am not sure what is going on here but I do think that it has to do something with the absolute positioning of the footer. Here is a live link to the problem link with the problem Is there a way I can make the sticky footer work ?
Here is my CSS and HTML...
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="utf-8">
<meta content="by RT." name="author">
<meta content="Copyright © 2014 rajeevthomas.com" name="Copyright">
<link href="/root//favicon.ico" rel="icon" type="image/x-icon">
<title>Home Page title</title>
<meta content="Photographer Website" name="keywords">
<meta content="Home Page Description" name="description">
<link href="/styles.css" rel="stylesheet" type=
"text/css">
<script src="/jquery-2.1.4.min.js" type=
"text/javascript">
</script>
<script src="jquery-bgstretcher-3.3.1.min.js" type=
"text/javascript">
</script>
<style>
.bgstretcher-area {
text-align: left;
height:100%;
}
.bgstretcher-page {height:100%;}
.bgstretcher-container{height:100%;}
.bgstretcher {
background: black;
overflow: hidden;
width: 100%;
position: fixed;
z-index: 1;
height:100%;
}
.bgstretcher,
.bgstretcher ul,
.bgstretcher li {
left: 0;
top: 0;
height:100%;
}
.bgstretcher ul,
.bgstretcher li {
position: absolute;
}
.bgstretcher ul,
.bgstretcher li {
margin: 0;
padding: 0;
list-style: none;
}
/* Compatibility with old browsers */
.bgstretcher {
_position: absolute;
}
.bgs-description-pane {
display: block;
background: rgba(0, 0, 0, 0.7);
position: relative;
z-index: 10000;
padding: 15px;
color: #ffffff;
font-size: 14px;
}
.footer{
margin: 0 auto;
text-align:center;
clear:both;
position: absolute;
width: 100%;
bottom:0;
height:10%;
color:#FFF;
}
/* NAV */
header {
background-color: rgba(29, 11, 9, 0.6);
border-radius:0px;
padding-top:.5rem;
padding-bottom:.25rem;
box-shadow: 0 0 26px rgba(0, 0, 0, 0);
}
.nav {
width:100%;
text-align:center;
list-style:none;
position:relative;
z-index:10;
margin-top:0.35rem;
}
.nav li {
padding:0px 0px;
text-decoration:none;
font-size:.85rem;
text-align:left;
position:relative;
display:inline-block;
margin-left:2rem;
}
.nav > li:hover > a{
background-color : #5c331a;
}
.nav li a:hover {
color:#FFF;
}
.submenu > li:hover > a{
background-color : #5c331a;
}
.nav li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#a86b4b!important;
}
p{color:#FFF;}
</style>
</head>
<body>
<div class="container">
<header>
<nav>
<ul class="nav">
<li>
HOME
</li>
<li> MY GALLERIES
</li>
<li> SEARCH
</li>
<li> ABOUT ME
</li>
</ul>
</nav>
</header>
<article>
<section>
<div class="intro">
<p>Welcome to my gallery!</p>
<div class="underline"></div>
</div>
</section>
</article>
<script type="text/javascript">
jQuery(function($){
$("body").bgStretcher({
images: ["1-1.jpg", "2-1.jpg"],
imageWidth: 1024,
imageHeight: 768
});
});
</script>
<div class="push"></div>
<div class="footer">
<div id="seeker">
<form accept-charset="utf-8" action="/root/photos/search" id=
"PhotoCmspageForm" method="get" name="PhotoCmspageForm">
<input id="search" name="search" type="text" value=
""><input id="find" type="submit" value="Search">
</form>
</div>
<p class="footnote">Copyright © 2015 rajeevthomas.com</p>
</div>
</div>
<script>
$('a').each(function() {
if ($(this).attr('href') != '#' && $(this).attr('href') != ''&& $(this).attr('href') != '/' && $(this).attr('href').indexOf('?') < 0) {
$(this).attr('href', $(this).attr('href') + '/');
}
});
</script>
<script>
var bumpIt = function() {
$('body').css('margin-bottom', $('.footer').height());
},
didResize = false;
bumpIt();
$(window).resize(function() {
didResize = true;
});
setInterval(function() {
if(didResize) {
didResize = false;
bumpIt();
}
}, 250);
</script>
</body>
</html>
Problem with IE11, I have the drop-down multi-level (drop down) menu working in Chrome and FireFox but not IE11, such that I can change the menu just one file, and do not have to go to every single page to change the menu. I will need three level menu. (thanks Frogmouth for the help to make it working):
multi-level (drop down) menu css js
I have tried HTML different !DOCTYPE but not working.
how can I solve this IE menu problem?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PHP Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link href="site123.css" rel="stylesheet">
</head>
<body>
<nav id="nav01"></nav>
<script type="text/javascript" language="javascript" src="Menu-Script.js"></script>
<div id="main">
<h1>Welcome to Our Site</h1>
<h2>Web Site Main Ingredients:</h2>
<p>Pages (HTML)</p>
<p>Style (CSS)</p>
<p>Code (JavaScript)</p>
<footer id="foot01"></footer>
</div>
</body>
</html>
I have CSS (file name: site123.css)
ul#third-level-menu
{
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
ul#third-level-menu > li
{
height: 30px;
background: #999999;
}
ul#third-level-menu > li:hover { background: #CCCCCC; }
ul#second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
ul#second-level-menu > li
{
position: relative;
height: 30px;
background: #999999;
}
ul#second-level-menu > li:hover { background: #CCCCCC; }
ul#top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}
ul#top-level-menu > li
{
position: relative;
float: left;
height: 30px;
width: 150px;
background: #999999;
}
ul#top-level-menu > li:hover { background: #CCCCCC; }
ul#top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
ul#top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
ul#top-level-menu a:hover { color: #000000; }
and I have JS (file name: Menu-Script.js)
document.getElementById("nav01").innerHTML =
"<ul id='top-level-menu'>" +
"<li><a href='index.html'>Home</a>" + // not close li here
"<ul id='second-level-menu'>" +
"<li><a href='index12.html'>Home12</a>" + // not close li here
"<ul id='third-level-menu'>" +
"<li><a href='index123.html'>Home123</a></li>" +
"<li><a href='index124.html'>Home124</a></li>" +
"</ul></li>" + // close li here
"<li><a href='index13.html'>Home13</a></li>" +
"</ul></li>" + // close li here
"<li><a href='customers.html'>Data</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"</ul>";
document.getElementById("foot01").innerHTML =
"<p>© " + new Date().getFullYear() +
" OKay..</p>";
So many things wrong with this, your using html5 tags in a none html5 doc.
The problem however is due to you loading the js before the footer tag so it's not seen by the js.
The menu does not have to be done in js use plain html.
<!DOCTYPE html>
<html>
<head>
<link href="site123.css" rel="stylesheet">
</head>
<body>
<nav id="nav01">
<ul id="top-level-menu">
<li>Home
<ul id="second-level-menu">
<li>Home12
<ul id="third-level-menu">
<li>Home123</li>
<li>Home124</li>
</ul>
</li>
<li>Home13</li>
</ul>
</li>
<li>Data</li>
<li>About</li>
</ul>
</nav>
<div id="main">
<h1>Welcome to Our Site</h1>
<h2>Web Site Main Ingredients:</h2>
<p>Pages (HTML)</p>
<p>Style (CSS)</p>
<p>Code (JavaScript)</p>
<footer id="foot01"></footer>
</div>
<script>
document.getElementById("foot01").innerHTML =
"<p>© " + new Date().getFullYear() +
" OKay..</p>";
</script>
</body>
</html>