Odzivna stranska vrstica s CSS - Vodnik

Odzivna stranska vrstica je ključen element sodobnih aplikacij. Na namiznih zaslonih zavzema fiksno mesto ob strani, kar omogoča hiter dostop do navigacije, medtem ko se na manjših zaslonih zaradi varčevanja s prostorom prestavi na vrh ali skrije v meni.

PRIMER

                        <!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Odzivna stranska vrstica</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="responsive-sidebar">
        <div class="searchBox">
            <input type="text" placeholder="Išči..." aria-label="Iskanje">
        </div>
        <a href="#">DOMOV</a>
        <a href="#">IZDELKI</a>
        <a href="#">STORITVE</a>
        <a href="#">PORTFOLIO</a>
        <a href="#">KONTAKT</a>
    </div>
    
    <div class="responsive-sidebar-container">
        <h1>Vsebina strani</h1>
        <p>Stranska vrstica na levi je fiksna, vsebina na desni pa se prilagaja.</p>
        <p>Na mobilnih napravah (pod 700px) se sidebar prestavi na vrh.</p>
    </div>
</body>
</html>
        
                    

                        * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

/* sidebar - fiksna širina na desktop-u */
.responsive-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #f1f1f1;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 10;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column; /* Na desktop-u gredo elementi drug pod drugega */
}

.responsive-sidebar a {
    display: block;
    padding: 15px;
    color: #333;
    text-decoration: none;
    font-size: 18px;
    transition: 0.3s;
    -webkit-text-fill-color: #333333;
}

.responsive-sidebar a:hover {
    background-color: #ddd;
    color: #f00b06;
    -webkit-text-fill-color: #f00b06;
}

.searchBox {
    padding: 15px;
}

.searchBox input[type=text] {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}

/* vsebina se odmakne za širino stranske vrstice */
.responsive-sidebar-container {
    margin-left: 200px;
    padding: 20px;
}

/* Prilagoditev za tablice in večje telefone (pod 700px) */
@media screen and (max-width: 700px) {
    .responsive-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid #ddd;
        flex-direction: row; /* Elementi se postavijo v vodoravno vrstico */
        flex-wrap: wrap;     /* Omogoči iskalniku, da skoči v svojo vrstico, če zmanjka prostora */
        align-items: center;
    }

    .responsive-sidebar a {
        font-size: 16px;
        padding: 12px 15px;
    }

    .searchBox {
        padding: 10px 15px;
        width: 100%; /* Iskalnik zavzame celotno širino na vrhu */
        order: -1;   /* Prisili iskalnik, da ostane na prvem mestu */
    }

    .responsive-sidebar-container {
        margin-left: 0;
    }
}

/* Prilagoditev za ozke telefone (pod 480px) */
@media screen and (max-width: 480px) {
    .responsive-sidebar {
        flex-direction: column; /* Elementi gredo spet v stolpec */
        align-items: stretch;
    }

    .responsive-sidebar a {
        text-align: center;
        border-bottom: 1px solid #eee;
    }

    .responsive-sidebar a:last-child {
        border-bottom: none;
    }
}
        
                    

REZULTAT