Utilităţi HTML

HTML 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ă…

HTML Cel mai puţin utilizate elemente HTML
Redăm mai jos câteva din elementele HTML care sunt cel mai puțin folosite în mod obișnuit fiind înlocuite…

HTML Încorporare PDF în pagină
Pe lângă plugin-urile care pot ajuta la încorporarea unui fişier PDF într-o pagină HTML, astfel încât să fie…

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	31

Utilităţi

Categorii

Pagini

Articole recente

Arhive

Proiecte

Utilităţi

Categorii

Pagini

Articole recente

Arhive

Proiecte

Etichete