Skip to content

Latest commit

 

History

History
65 lines (64 loc) · 2.05 KB

README.md

File metadata and controls

65 lines (64 loc) · 2.05 KB

mymenu.js

This file is to create expentable or collapsable menu using custom tag my-menu and my-menu-header based on javascript Link for the sample: https://jack5s.github.io/JavascriptMenu/web/HTML/testMyMenu.html

Expand Menu

Collapse Menu

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<my-menu expandState="expand">
    <my-menu-header height="100">
        <div>Title</div>
    </my-menu-header>
    <p>It is a paragraph</p>
    <p>It is also a paragraph</p>
    <my-menu expandState="collapse" id="menu2">
        <my-menu-header height="100">
            <div>Title2</div>
        </my-menu-header>
        <p>It is a paragraph2</p>
        <p>It is also a paragraph2</p>
    </my-menu>
    <my-menu expandState="expand" id="menu2">
        <my-menu-header height="100">
            <div>Title2</div>
        </my-menu-header>
        <p>It is a paragraph2</p>
        <p>It is also a paragraph2</p>
    </my-menu>
</my-menu>
<my-menu expandState="collapse">
    <my-menu-header height="100">
        <div>Title</div>
    </my-menu-header>
    <p>It is a paragraph</p>
    <p>It is also a paragraph</p>
    <my-menu expandState="collapse" id="menu2">
        <my-menu-header height="100">
            <div>Title2</div>
        </my-menu-header>
        <p>It is a paragraph2</p>
        <p>It is also a paragraph2</p>
    </my-menu>
    <my-menu expandState="collapse" id="menu2">
        <my-menu-header height="100">
            <div>Title2</div>
        </my-menu-header>
        <p>It is a paragraph2</p>
        <p>It is also a paragraph2</p>
    </my-menu>
</my-menu>
<script src="../JS/jquery.js"></script>
<script src="../JS/mymenu.js"></script>
</body>
</html>