mayra.github.io/menu.html at main · Dankells/mayra.github.io · 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
<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <meta name="author" content="Daniel Kelson">
        <meta name="description" content="">
        <meta name="keywords" content="HTML, CSS AND JAVASCRIPT">
        <title>A menu bar</title>
        <style>

            *{
                font-family: Arial, Helvetica, sans-serif;
            }
            nav{
                height: 100%;
                color: white;
                background: black;
                overflow-x: hidden;
                position: fixed;
                left: 0;
                top: 0;
                width: 0;
                font-family: Arial, sans-serif;
                z-index: 1;
                transition: 0.5s;
            }

            nav a{
                display: flex;
                justify-content: left;
                text-decoration: none;
                font-size: 20px;
                color: white;
                outline: none;
                font-weight: bold;
                position: relative;
                top: 60px;
                padding: 10px;
                transition: 0.5s;
            }

            nav a:nth-child(1) {
                position: absolute;
                right: 25px;
                top: 0;
                font-size: 40px;
            }

            nav a:nth-child(1):hover{
                background: none;
                color: white;
            }

            nav a:hover{
                background: white;
                color: black;
            }

            .menu{
                position: relative;
                top: -10px;
                font-size: 25px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <nav id="mySidenav" >
            <a href="javascript:void(0)" onclick="closeBtn()" Id="closer">&times;</a>
            <a href="" >HOME</a>
            <a href="" >CONTACT</a>
            <a href="" >SERVICES</a>
            <a href="" >FAQS</a>
        </nav>
        <p class="menu" onclick="openBtn()" >&#9776;</p>
        <p id="text">My name is Uzuigwe Daniel Ugochukwu and I am the programmer that programed this website. I know that I might be too basic for some of ur liking but I'm just a beginner and consequently I will get better. </p>


        <script>
            function openBtn() {
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("text").style.opacity = "0.5";
            }

            function closeBtn() {
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("text").style. opacity = "1";
            }
        </script>
    </body>
</html>