04/10/2024 – TIC.ovio.ro

<div class="navbar">
    <div class="menu-icon" id="menuIcon" onclick="toggleMenu()">☰</div>
    <div class="menu" id="menu">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>
</div>

1

2

3

4

5

6

7

8

9

<a href="#about">About</a>

<a href="#services">Services</a>

<a href="#contact">Contact</a>

</div>

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .navbar {
            display: flex;
            justify-content: space-between;
            background-color: #333;
            padding: 10px;
            position: relative;
            min-height: 2em;
        }
        .navbar a {
            color: white;
            text-decoration: none;
            padding: 14px 20px;
            display: block;
        }
        .navbar a:hover {background-color: #575757;}
        .menu-icon {font-size: 1.5em;
            display: none;
            cursor: pointer;
            color: white;
            right: 5px;
            position: absolute;
        }
        .menu {display: flex;}
        @media (max-width: 600px) {
            .menu {
                display: none;
                flex-direction: column;
                width: 100%;
            }
            .menu-icon {display: block;}
            .menu.active {display: flex;}
        }

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

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

}

.navbar {

display: flex;

justify-content: space-between;

background-color: #333;

padding: 10px;

position: relative;

min-height: 2em;

}

.navbar a {

color: white;

text-decoration: none;

padding: 14px 20px;

display: block;

}

.navbar a:hover {background-color: #575757;}

.menu-icon {font-size: 1.5em;

display: none;

cursor: pointer;

color: white;

right: 5px;

position: absolute;

}

.menu {display: flex;}

@media (max-width: 600px) {

.menu {

display: none;

flex-direction: column;

width: 100%;

}

.menu-icon {display: block;}

.menu.active {display: flex;}

}

    function toggleMenu() {
        const menu = document.getElementById('menu');
        const menuIcon = document.getElementById('menuIcon');        
        
        menu.classList.toggle('active'); // Toggle the active class for the menu
        
        // Change the menu icon between ☰ and X
        if (menu.classList.contains('active')) {
            menuIcon.innerHTML = '⛌';
        } else {
            menuIcon.innerHTML = '☰';
        }
    }

1

2

3

4

5

6

7

8

9

10

11

12

13

function toggleMenu() {

const menu = document.getElementById('menu');

const menuIcon = document.getElementById('menuIcon');

menu.classList.toggle('active'); // Toggle the active class for the menu

// Change the menu icon between ☰ and X

if (menu.classList.contains('active')) {

menuIcon.innerHTML = '⛌';

} else {

menuIcon.innerHTML = '☰';

}

Zi: 4 octombrie 2024

Meniu responsive simplu

Utilităţi

Categorii

Pagini

Articole recente

Arhive

Proiecte

Meniu responsive simplu

Utilităţi

Categorii

Pagini

Articole recente

Arhive

Proiecte

Etichete