spustni meni, dropdown menu

Spustni meni

Spustni meni je interaktivni element uporabniškega vmesnika, ki omogoča prikaz seznama možnosti, med katerimi lahko uporabnik izbere. Seznam možnosti se običajno skrije, dokler uporabnik ne klikne ali premakne kazalca nad element, kar sproži prikaz menija.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Dropdown & Link Popravki</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #f9f9f9;
            padding: 10px;
        }

.container {
            width: 100%;
            padding: 10px 15px;
        }

.row {
            display: flex;
            justify-content: center; /* Prostorska porazdelitev elementov */
            align-items: center; /* Navpična poravnava elementov */
            flex-wrap: wrap; /* Omogoča zavijanje elementov v več vrst */
            margin: 0 auto;
            max-width: 100%;
            padding: 10px;
            border: 3px solid orange;
            border-radius: 24px;
            background-color: #fff;
        }

.row a,
        .dropdownButton {
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none; /* Odstrani podčrtaje pri <a> */
            color: black;
            font-size: 1rem;
            width: 150px; /* Nastavimo fiksno širino (ali max-width, če želimo prilagodljivo) */
            height: 50px; /* Fiksna višina gumba */
            line-height: 50px; /* Za centriranje besedila vertikalno */
            padding: 0; /* Odstranimo padding, da se opira le na height in width */
            margin: 5px;
            border: 1px solid black;
            background-color: yellow;
            border-radius: 12px; /* Zaobljeni robovi */
            text-align: center; /* Poravnava besedila horizontalno */
            vertical-align: middle; /* Odpravimo baseline zamik */
            cursor: pointer; /* Ikona za gumb */
            transition: all 0.3s ease; /* Dejanje ob premiku miške */
        }

.row a:hover,
        .dropdownButton:hover {
            background-color: orange;
            color: white;
            border: 1px solid deepskyblue;
        }

.dropdownBox {
            position: relative;
            margin: 5px;
        }

.dropdownContent {
            position: fixed;
            display: none; /* Skrit, dokler ni aktiven */
            min-width: 150px;
            max-width: 200px;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div class="container">
    
    <div class="row">
        <a href="#">DEMO 01</a>
        <a href="#">DEMO 02</a>
        <a href="#">DEMO 03</a>
        <a href="#">DEMO 04</a>
        <a href="#">DEMO 05</a>

<div class="dropdownBox">
            <a class="dropdownButton" onclick="toggleDropdown(event)">Spustni meni</a>
            <div class="dropdownContent" id="dropdownMenu">
                <h1>Kaj je Lorem Ipsum?</h1>
                <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk.</p>
            </div>
        </div>
    </div>
</div>

// Če je meni že odprt, ga skrijemo
        if (dropdownMenu.style.display === 'block') {
            dropdownMenu.style.display = 'none';
            return;
        }

// Preverimo dimenzije gumba in zaslona
        const rect = dropdownButton.getBoundingClientRect();
        const availableSpaceBelow = window.innerHeight - rect.bottom;
        const dropdownHeight = 300; // Maksimalna višina dropdownContent

// Dinamično uredi pozicijo dropdown-a
        if (availableSpaceBelow < dropdownHeight) {
            // Ni prostora spodaj, prikaži dropdown nad gumbom
            dropdownMenu.style.top = `${rect.top + window.scrollY - dropdownHeight}px`;
        } else {
            // Prikaži spodaj
            dropdownMenu.style.top = `${rect.bottom + window.scrollY}px`;
        }

dropdownMenu.style.left = `${rect.left}px`;
        dropdownMenu.style.display = 'block';
    }
</script>
</body>
</html>