Skip to content

Jack5s/JavascriptMenu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>

Releases

No releases published

Packages

No packages published