Utilităţi JS

JS Meniu responsive simplu

HTML

<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>

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

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

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

</div>

Style

        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;}
        }

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;}

}

JavaScript

    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 = '☰';
        }
    }

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 = '☰';

}

Dacă nu ne dorim să fie prea sofisticat, adică nu neapărat să…

JS Formatare elemente ce conţin un text anumit
Ar fi vreo două aspecte privind stilizarea elementelor care au anumite valori ale atributelor sau chiar conţinutul lor….

JS Utilizarea lui getElementsByTagName()
Metoda getElementsByTagName() folosită într-o pagină returnează o colecție de elemente („p”, „li” etc.) cu un nume de etichetă…

JS Extragere username din conţinutul adresei de e-mail
În cazul în care, într-un formular de înregistrare se doreşte extragerea username-ului din adresa de e-mail, pentru a…

L	Ma	Mi	J	V	S	D
	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

Utilităţi

Categorii

Pagini

Articole recente

Arhive

Proiecte

Utilităţi

Categorii

Pagini

Articole recente

Arhive

Proiecte

Etichete