Newbie needs help with jquery multiayer menu
Hello there,
I am a beginner in java and have no idea about javascrip, but have tried my best with this,I need to create a dynamic dropdown menu from a predefined array.
Here is the array I need in javascript
var Alerts = new[] {
new Alerts { Id = 1, Module = " Form I", Application = "Registration", Message ="1" },
new Alerts { Id = 2, Module = " Form I", Application = "Registration", Message ="1" },
new Alerts { Id = 3, Module = " Form I", Application = "Retire", Message ="1" },
new Alerts { Id = 4, Module = " Form I", Application = "Retire", Message ="1" },
new Alerts { Id = 5, Module = "Form II", Application = "Budget", Message ="1" },
new Alerts { Id = 6, Module = " Form I", Application = "Retire", Message ="1" },
new Alerts { Id = 7, Module = "Form II", Application = "Payroll", Message ="1" },
};
on the basis of this, I have to create a web application with a button "Alert" with drop down menu "Module" and their respective child menu, and also to show the number of subsequent menus it has on them.
new Alerts { Id = 1, Module = " Form I", Application = "Registration", Message ="1" },
new Alerts { Id = 2, Module = " Form I", Application = "Registration", Message ="1" },
new Alerts { Id = 3, Module = " Form I", Application = "Retire", Message ="1" },
new Alerts { Id = 4, Module = " Form I", Application = "Retire", Message ="1" },
new Alerts { Id = 5, Module = "Form II", Application = "Budget", Message ="1" },
new Alerts { Id = 6, Module = " Form I", Application = "Retire", Message ="1" },
new Alerts { Id = 7, Module = "Form II", Application = "Payroll", Message ="1" },
};
on the basis of this, I have to create a web application with a button "Alert" with drop down menu "Module" and their respective child menu, and also to show the number of subsequent menus it has on them.
This is what I made so far and I know there are a lot of errors, and I cannot seem to know how to call or dispay the menu:
<!doctype html>
<html lang=''>
<head>
<html lang=''>
<head>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src=" http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>Menu</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src=" http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>Menu</title>
</head>
<body>
<body>
<div id="cssmenu">
<div class = "container">
<div class = "dropdown">
<div class = "dropdown">
<li class='active has-sub' id="demo">
<a href='#'>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Alerts<script type="text/javascript"><span class="caret"> </script></span></button>
<ul class ="dropdown-menu">
<li class="icon"><a href="javascript:void(0);" onclick="myFunction()">☰</a></li>
</ul>
<a href='#'>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Alerts<script type="text/javascript"><span class="caret"> </script></span></button>
<ul class ="dropdown-menu">
<li class="icon"><a href="javascript:void(0);" onclick="myFunction()">☰</a></li>
</ul>
</a>
</li>
</div>
</div>
</div>
</li>
</div>
</div>
</div>
</body>
<html>
Topic Participants
grg_roger
jtara-jquery
jakecigar