Skip to content

Instantly share code, notes, and snippets.

@XIOLog

XIOLog/Container.js

Created January 16, 2019 11:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save XIOLog/d8cb85d95621ee2dabbc7362e5b200a6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save XIOLog/d8cb85d95621ee2dabbc7362e5b200a6 to your computer and use it in GitHub Desktop.
Download ZIP
Небольшая менюшка на JS
Raw
Container.js
function Container() {
this.htmlCode = '';
}
Container.prototype.render = function() {
return this.htmlCode;
};
Container.prototype.remove = function() {
document.getElementById('menu').remove();
};
Raw
index.html
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function() {
const topMenu = new Menu('menu', 'm-block', [
new MenuItem('/', 'Главная'),
new MenuItem('/catalog', 'Каталог'),
new MenuItem('/stocks', 'Акции'),
new MenuItem('/about', 'О нас'),
new MenuItem('/contacts', 'Контакты'),
new Submenu('Поддержка', 'sMenu', 'sm-block', [
new MenuItem('/', 'Главная'),
new MenuItem('/catalog', 'Каталог'),
new MenuItem('/stocks', 'Акции'),
new MenuItem('/about', 'О нас'),
new MenuItem('/contacts', 'Контакты'),
])
]);
let menuApp = document.getElementById('mainMenu');
menuApp.innerHTML = topMenu.render();
document.getElementById('removeMenu').addEventListener('click', function() {
topMenu.remove();
});
};
</script>
</head>
<body>
<div id="mainMenu"></div>
<button id="removeMenu">Удалить меню</button>
<script src="js/Container.js"></script>
<script src="js/Menu.js"></script>
<script src="js/MenuItem.js"></script>
<script src="js/Submenu.js"></script>
</body>
</html>
Raw
Menu.js
function Menu(menuId, menuClass, menuItems) {
Container.call(this);
this.id = menuId;
this.class = menuClass;
this.items = menuItems;
}
Menu.prototype = Object.create(Container.prototype);
Menu.prototype.constructor = Menu;
Menu.prototype.render = function() {
let result = '<ul id="' + this.id + '" class="' + this.class + '">';
for(let item of this.items) {
if(item instanceof Submenu) {
result += '<li><a href="#">' + item.title + '</a>' + item.render() + '</li>';
}
if(item instanceof MenuItem) {
result += item.render();
}
}
result += '</ul>';
this.htmlCode = result;
return result;
};
Raw
MenuItem.js
function MenuItem(href, title) {
this.title = title;
this.href = href;
}
MenuItem.prototype.render = function() {
return '<li class="menuItem"><a href="' + this.href + '">' + this.title + '</a></li>';
};
Raw
Submenu.js
function Submenu(smTitleParent, smId, smClass, smItems) {
Menu.call(this);
this.title = smTitleParent;
this.id = smId;
this.class = smClass;
this.items = smItems;
}
Submenu.prototype = Object.create(Menu.prototype);
Submenu.prototype.constructor = Submenu;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment