odzivna stranska vrstica, responsive sidebar

Odzivna stranska vrstica

Odzivna stranska vrstica je navigacijski element, ki se prilagaja različnim velikostim zaslonov in omogoča dostop do glavnih vsebin in funkcionalnosti spletne strani ali aplikacije. Nahaja se ob strani zaslona in lahko vsebuje različne menije, povezave in dodatne interaktivne elemente.

<!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, maximum-scale=1">

@media screen and (max-width: 840px) {
            .sidebar {
                position: relative;
                width: 100%;
                height: auto;
                text-align: center;
            }
            .sidebar a {
                float: none;
                display: inline-block;
            }
            .searchBox {
                float: none;
                width: 100%;
                padding: 0 20% 10px;
            }
            div.container {
                width: 100%;
            }
        }
        @media screen and (max-width: 412px) {
            .sidebar a {
                float: none;
                text-align: center;
            }
        }
    </style>
</head>
<body>
<div class="sidebar">
    <a href="#">DOMOV</a>
    <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="container">
    <h1>Dobrodošli v CSS vadnico</h1>
</div>
</body>
</html>