html-menu-/html(menu) at main · shebnem-m/html-menu- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<label>Add Menu</label>
    <input type="text" id="Value">
    <button onclick="addMenu()">Add</button>
    <!--<a href="#" onclick="activateEdit()">Activate edit mode</a>-->

    <div id="menu" style="border:1px solid black;">


    </div>
    <!--<div id="arrow">
        <div>            <a href="#">-> </a>
        </div>
        <div>            <a href="#"><-|-></a>
        </div>
        <div>            <a href="#"><- </a>
        </div>
    </div>-->
    <style>
        #menu ul li
        {
            display:inline-block;
            width:150px;
            padding:10px;
            background-color: pink;
        }
        #arrow div
        {
            float:left;
            width:150px;
            padding:10px;

        }
    </style>

<script type="text/javascript">
    let arr=["Menu-1","Menu-2","Menu-3"];
    function getMenu()
    {
     let menu='<ul>';
        let arrowElement='<div id="arrow">  ';

        //for(let value of arr)
    // {
      //menu+='<li>'+value+'</li>'
     //}
     for(let i=0; i<arr.length; i++)
     {
       menu+='<li>'+arr[i]+'</li>';
     if(i==0)
     {
        arrowElement+='<div><a href="#" onclick="moveRight('+ i +')">-></a></div>' ;
     }
     else if(i==arr.length-1)
     {
        arrowElement+=' <div><a href="#" onclick="moveLeft('+ i +')"><- </a></div>';
     }
     else{
        arrowElement+='<div><a href="#" onclick="moveLeft('+ i + ')"><-</a><a href="#" onclick="moveRight('+i+')">-></a></div>';
     }
    }
   menu+='</ul>';
   arrowElement+='</div>';


    return menu+arrowElement;
    }
    function moveLeft(index)
    {
        console.log(arr);
    currentElement=arr[index];
    previousElement=arr[index-1];
    arr.splice(index-1,2,currentElement,previousElement,);
    showMenu();
    console.log(arr);

    }
    function moveRight(index)
    {
        console.log(arr);
    currentElement=arr[index];
    nextElement=arr[index+1];
    arr.splice(index,2,nextElement,currentElement);
    showMenu();
    console.log(arr);
    }
    //function activateEdit()
{
    //document.getElementById('arrow').style.display='block';
}
    function showMenu()
    {
        let menu=getMenu();
        let divMenu=document.getElementById('menu');
        divMenu.innerHTML=menu;
    }
    showMenu();
    function addMenu()
    {
        let input=document.getElementById('Value');
        arr.push(input.value);
        showMenu();
        getMenu();
    }


</script>
</body>
</html>