Skip to content

Instantly share code, notes, and snippets.

@hygull

hygull/ul_li_menu_submenu_bootstrap.html

Created November 25, 2018 07:45
Show Gist options
  • Save hygull/e760ca8c2bf32901c83bc8720e959378 to your computer and use it in GitHub Desktop.
Save hygull/e760ca8c2bf32901c83bc8720e959378 to your computer and use it in GitHub Desktop.
Download ZIP
Menu, Sub menu, JavaScript, Bootstrap3
Raw
ul_li_menu_submenu_bootstrap.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class='list-group'>
<li class='list-group-item'>
<a href='https://dotrixs.com/menus/MainMenu1/'>MainMenu1</a>
<ul class='list-group'>
<li class='list-group-item'>SubMenu11</li>
<li class='list-group-item'>SubMenu12</li>
<li class='list-group-item'>SubMenu13</li>
</ul>
</li> <li class='list-group-item'>
<a href='https://dotrixs.com/menus/MainMenu2/'>MainMenu2</a>
<ul class='list-group'>
<li class='list-group-item'>SubMenu21</li>
<li class='list-group-item'>SubMenu22</li>
<li class='list-group-item'>SubMenu23</li>
<li class='list-group-item'>SubMenu24</li>
</ul>
</li> <li class='list-group-item'>
<a href='https://dotrixs.com/menus/MainMenu3/'>MainMenu3</a>
<ul class='list-group'>
<li class='list-group-item'>SubMenu31</li>
<li class='list-group-item'>SubMenu32</li>
</ul>
</li> <li class='list-group-item'>
<a href='https://dotrixs.com/menus/MainMenu4/'>MainMenu4</a>
<ul class='list-group'>
<li class='list-group-item'>SubMenu41</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Raw
ul_li_menu_submenu_bootstrap.js
/*
{
"Created on": "25 Nov 2018, Sun",
"Coded by": "Rishikesh Agrawani",
"Aim": "Simple dynamic code generation for menu/submenus using JavaScript"
}
*/
let data = {
"d": [
{
"MainMenu1": [
"SubMenu11",
"SubMenu12",
"SubMenu13"
]
},
{
"MainMenu2": [
"SubMenu21",
"SubMenu22",
"SubMenu23",
"SubMenu24"
]
},
{
"MainMenu3": [
"SubMenu31",
"SubMenu32"
]
},
{
"MainMenu4": [
"SubMenu41"
]
}
]
}
/*
<?xml version="1.0" encoding="UTF-8" ?>
<root>
<d>
<MainMenu1>SubMenu11</MainMenu1>
<MainMenu1>SubMenu12</MainMenu1>
<MainMenu1>SubMenu13</MainMenu1>
</d>
<d>
<MainMenu2>SubMenu21</MainMenu2>
<MainMenu2>SubMenu22</MainMenu2>
<MainMenu2>SubMenu23</MainMenu2>
<MainMenu2>SubMenu24</MainMenu2>
</d>
<d>
<MainMenu3>SubMenu31</MainMenu3>
<MainMenu3>SubMenu32</MainMenu3>
</d>
<d>
<MainMenu4>SubMenu41</MainMenu4>
</d>
</root>
*/
// Creating menu code
let menuCode = "<ul class='list-group'>\n";
for(let obj of data.d) { // Loop through main menu items
menuCode += "\t" + "<li class='list-group-item'>\n"; // li start (::)
for(let mainMenuName in obj) { // Do not think it as a topic of tension, it will just have 1 iteration
menuCode += "\t\t" + "<a href='https://dotrixs.com/menus/" + mainMenuName + "/'>" + mainMenuName + "</a>\n";
let subMenus = obj[mainMenuName]; /* ["SubMenu11", "SubMenu12", "SubMenu13"] */
menuCode += "\t\t" + "<ul class='list-group'>\n"; // ul start (:::)
for(let subMenu of subMenus) {
menuCode += "\t\t\t" + "<li class='list-group-item'>" + subMenu + "</li>\n";
}
menuCode += "\t\t" + "</ul>\n"; // ul end (:::)
}
menuCode += "\t" + "</li>"; // li end (::)
}
menuCode += "\n</ul>";
console.log(menuCode); // Print menu code on Browser console/Node.js REPL
// rishi@DESKTOP-95F8J5U MINGW64 /h/RishikeshAgrawani/Projects/GenWork/NodeJS/try (master)
// $ node ul_li_menu_submenu.js
// Output >=>
/*
<ul>
<li>
<a href='https://dotrixs.com/menus/MainMenu1/'>MainMenu1</a>
<ul>
<li>SubMenu11</li>
<li>SubMenu12</li>
<li>SubMenu13</li>
</ul>
</li> <li>
<a href='https://dotrixs.com/menus/MainMenu2/'>MainMenu2</a>
<ul>
<li>SubMenu21</li>
<li>SubMenu22</li>
<li>SubMenu23</li>
<li>SubMenu24</li>
</ul>
</li> <li>
<a href='https://dotrixs.com/menus/MainMenu3/'>MainMenu3</a>
<ul>
<li>SubMenu31</li>
<li>SubMenu32</li>
</ul>
</li> <li>
<a href='https://dotrixs.com/menus/MainMenu4/'>MainMenu4</a>
<ul>
<li>SubMenu41</li>
</ul>
</li>
</ul>
*/
@hygull
Copy link
Author

hygull commented Nov 25, 2018

screenshot 1803

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment