При наводке мыши на боковое меню раскрыть его!

Question

Нужно сделать так, чтобы с первого меню(первое фото) получилось второе меню(второе фото) при наведении.

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        h3 {
            padding: 40px;
            padding-bottom: 20px;
        }
        main {
            text-align: left;
            background-color: gray;
            width: 200px;
            vertical-align: top;
            font-family: sans-serif;
            color: white;
            position: fixed;
            top:0;
            bottom: 0;
            
        }
        main:hover {
            transform: rotateY(15deg);
        }
        div:hover {
            background-color: rgb(68, 67, 67)
        }
        div {
            text-align: left;
        }
        img {
            text-align: left;
            width: 100px;
        }
        p {
            float: right;
            margin-top: 40px;
            color: white;
        }
        .font-center {
            display: inline-block;
        }
        
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In vero unde officia veritatis, alias rerum? Enim quos laboriosam impedit hic atque sint nisi! Voluptates vero suscipit odit soluta. Voluptates, perspiciatis?</h1>
    <p>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ducimus esse nihil culpa ex neque iste voluptas obcaecati eum. Quos reiciendis unde est commodi explicabo molestias, doloribus nemo officiis. Placeat.</div>
        <div>Voluptates sint maxime, deserunt suscipit autem molestias eos a doloribus itaque, quas repudiandae magnam odio reprehenderit dolorem fugit mollitia earum ipsam amet voluptatem! Excepturi rerum laudantium neque, repudiandae deleniti eveniet.</div>
        <div>Voluptatibus itaque provident earum quae, similique praesentium vel, blanditiis totam reprehenderit labore adipisci. Id rerum fugit reprehenderit, adipisci at tempore maxime accusamus quam quas magni excepturi, saepe possimus a in.</div>
        <div>Nihil corporis repellendus, hic tenetur aperiam libero inventore tempora, excepturi officia harum, iure enim ut modi. Odit minus numquam in vero amet est et, reiciendis praesentium consequatur dolorem vel repudiandae!</div>
        <div>Sit inventore quisquam ipsa cupiditate libero corporis veritatis totam pariatur minus! Provident maiores porro, hic aspernatur, ratione sunt quas sit beatae omnis veritatis illo, doloremque voluptate dolor. Facere, voluptas voluptatem?</div>
        <div>Aut cum suscipit, architecto vitae eius ab molestias libero aliquid fugit quasi magni vero reiciendis consequatur. Nihil, pariatur facere est rem similique tempore fugit, aperiam maiores minus accusamus quibusdam itaque.</div>
        <div>Repellat facere iste cumque sapiente dolore, dolorem optio quidem sint asperiores aliquam veniam unde perferendis ut quaerat nisi fugit quae eum deleniti maiores! Quisquam asperiores sequi consequuntur ratione quae nulla?</div>
        <div>Excepturi dolorum, magnam debitis vero quam dicta inventore perferendis quas magni dolores, et qui nostrum, nobis sapiente? Libero, dignissimos, voluptates ratione consequuntur error nostrum velit officiis sapiente laboriosam cumque dolores!</div>
        <div>Non assumenda sequi est, fugiat minima cumque distinctio quisquam rerum ipsa, provident laborum maiores, consequuntur illum corporis blanditiis reiciendis numquam tempora quas tenetur animi porro aperiam aut libero. Fuga, odio.</div>
        <div>Earum, quod nesciunt porro ipsa, libero laboriosam placeat animi at nemo neque illo veritatis blanditiis nulla, ipsam omnis. Quam eveniet consequatur impedit nulla perferendis eligendi voluptatibus deleniti asperiores ad. Eos!</div>
        <div>Amet, cumque. Enim assumenda odit aperiam, delectus officiis expedita ratione eveniet nostrum deleniti tenetur, explicabo fugiat, doloribus cum labore ea esse voluptatum rem. Fuga voluptatibus ex, distinctio assumenda corrupti similique.</div>
        <div>A, repellendus! Officiis eaque doloremque, magnam quas accusantium, maxime reiciendis possimus rem sint libero laborum ipsa inventore consectetur dolorem, ut obcaecati quae. Corrupti odit saepe voluptatibus, voluptatum temporibus nemo libero.</div>
        <div>Ut hic magnam ipsa quasi autem excepturi necessitatibus culpa ea dolores. Architecto repellendus harum nam quas ut cum magni vitae dolorem, quasi provident. Blanditiis, quae totam? Dolore alias totam sunt!</div>
        <div>Aliquid voluptatem expedita soluta cupiditate fugit hic ab maxime inventore, sint esse quibusdam sequi possimus similique necessitatibus atque tempora eligendi vitae incidunt quo blanditiis minus natus. Omnis adipisci earum voluptatum?</div>
        <div>Quasi minima pariatur placeat, nobis odit nostrum animi impedit perspiciatis accusamus. Repellendus labore similique itaque dolore suscipit, voluptatem asperiores maiores. Dicta sed similique iste quidem maxime nostrum autem nihil sunt?</div>
        <div>Ea dignissimos sed sint modi beatae minus quo repellat! Suscipit optio minima dicta non commodi libero tempore quibusdam. Nisi natus tempore doloribus id maxime officiis in, alias voluptate at ratione.</div>
        <div>Voluptatum, quia error. Laborum aliquid exercitationem, eaque commodi odit recusandae enim nam tempore dolor? Amet odit quo neque mollitia corrupti nemo repudiandae, blanditiis repellendus iste quibusdam, modi dicta ipsam laudantium!</div>
        <div>Maiores minus perspiciatis sit, laudantium voluptatem voluptas iure consectetur. Dicta voluptas illum ipsa ullam atque perspiciatis tempora sed nemo dolorem, odit asperiores ipsum, facere delectus consequatur voluptatum molestiae quibusdam maxime.</div>
        <div>Tempora beatae et, ex quos sit facilis fugit sequi delectus cumque iste assumenda, maiores aperiam. Ipsa neque consequatur totam velit magni ex beatae ratione porro repellendus, dolorum architecto impedit animi.</div>
        <div>Est aliquid minus architecto similique, odit, saepe quasi inventore minima ut magnam illum unde mollitia, quas molestias nobis porro debitis. Fugiat facere eum doloribus, laborum nihil veniam sit nemo autem.</div>
        <div>Delectus sequi aperiam veritatis accusantium culpa. Et, sapiente minima. Qui impedit, nesciunt molestias maxime laudantium reprehenderit consequuntur illo quaerat atque quasi praesentium pariatur nisi ab consequatur totam cum, minus modi.</div>
        <div>Amet consequatur voluptatum maxime quia unde quod, veniam harum iure perspiciatis perferendis provident eaque dolorem. Est consequuntur repellat at eius eum quisquam porro quos facere repellendus, culpa similique quibusdam nulla!</div>
    </p>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In vero unde officia veritatis, alias rerum? Enim quos laboriosam impedit hic atque sint nisi! Voluptates vero suscipit odit soluta. Voluptates, perspiciatis?</h1>
    <p>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ducimus esse nihil culpa ex neque iste voluptas obcaecati eum. Quos reiciendis unde est commodi explicabo molestias, doloribus nemo officiis. Placeat.</div>
        <div>Voluptates sint maxime, deserunt suscipit autem molestias eos a doloribus itaque, quas repudiandae magnam odio reprehenderit dolorem fugit mollitia earum ipsam amet voluptatem! Excepturi rerum laudantium neque, repudiandae deleniti eveniet.</div>
        <div>Voluptatibus itaque provident earum quae, similique praesentium vel, blanditiis totam reprehenderit labore adipisci. Id rerum fugit reprehenderit, adipisci at tempore maxime accusamus quam quas magni excepturi, saepe possimus a in.</div>
        <div>Nihil corporis repellendus, hic tenetur aperiam libero inventore tempora, excepturi officia harum, iure enim ut modi. Odit minus numquam in vero amet est et, reiciendis praesentium consequatur dolorem vel repudiandae!</div>
        <div>Sit inventore quisquam ipsa cupiditate libero corporis veritatis totam pariatur minus! Provident maiores porro, hic aspernatur, ratione sunt quas sit beatae omnis veritatis illo, doloremque voluptate dolor. Facere, voluptas voluptatem?</div>
        <div>Aut cum suscipit, architecto vitae eius ab molestias libero aliquid fugit quasi magni vero reiciendis consequatur. Nihil, pariatur facere est rem similique tempore fugit, aperiam maiores minus accusamus quibusdam itaque.</div>
        <div>Repellat facere iste cumque sapiente dolore, dolorem optio quidem sint asperiores aliquam veniam unde perferendis ut quaerat nisi fugit quae eum deleniti maiores! Quisquam asperiores sequi consequuntur ratione quae nulla?</div>
        <div>Excepturi dolorum, magnam debitis vero quam dicta inventore perferendis quas magni dolores, et qui nostrum, nobis sapiente? Libero, dignissimos, voluptates ratione consequuntur error nostrum velit officiis sapiente laboriosam cumque dolores!</div>
        <div>Non assumenda sequi est, fugiat minima cumque distinctio quisquam rerum ipsa, provident laborum maiores, consequuntur illum corporis blanditiis reiciendis numquam tempora quas tenetur animi porro aperiam aut libero. Fuga, odio.</div>
        <div>Earum, quod nesciunt porro ipsa, libero laboriosam placeat animi at nemo neque illo veritatis blanditiis nulla, ipsam omnis. Quam eveniet consequatur impedit nulla perferendis eligendi voluptatibus deleniti asperiores ad. Eos!</div>
        <div>Amet, cumque. Enim assumenda odit aperiam, delectus officiis expedita ratione eveniet nostrum deleniti tenetur, explicabo fugiat, doloribus cum labore ea esse voluptatum rem. Fuga voluptatibus ex, distinctio assumenda corrupti similique.</div>
        <div>A, repellendus! Officiis eaque doloremque, magnam quas accusantium, maxime reiciendis possimus rem sint libero laborum ipsa inventore consectetur dolorem, ut obcaecati quae. Corrupti odit saepe voluptatibus, voluptatum temporibus nemo libero.</div>
        <div>Ut hic magnam ipsa quasi autem excepturi necessitatibus culpa ea dolores. Architecto repellendus harum nam quas ut cum magni vitae dolorem, quasi provident. Blanditiis, quae totam? Dolore alias totam sunt!</div>
        <div>Aliquid voluptatem expedita soluta cupiditate fugit hic ab maxime inventore, sint esse quibusdam sequi possimus similique necessitatibus atque tempora eligendi vitae incidunt quo blanditiis minus natus. Omnis adipisci earum voluptatum?</div>
        <div>Quasi minima pariatur placeat, nobis odit nostrum animi impedit perspiciatis accusamus. Repellendus labore similique itaque dolore suscipit, voluptatem asperiores maiores. Dicta sed similique iste quidem maxime nostrum autem nihil sunt?</div>
        <div>Ea dignissimos sed sint modi beatae minus quo repellat! Suscipit optio minima dicta non commodi libero tempore quibusdam. Nisi natus tempore doloribus id maxime officiis in, alias voluptate at ratione.</div>
        <div>Voluptatum, quia error. Laborum aliquid exercitationem, eaque commodi odit recusandae enim nam tempore dolor? Amet odit quo neque mollitia corrupti nemo repudiandae, blanditiis repellendus iste quibusdam, modi dicta ipsam laudantium!</div>
        <div>Maiores minus perspiciatis sit, laudantium voluptatem voluptas iure consectetur. Dicta voluptas illum ipsa ullam atque perspiciatis tempora sed nemo dolorem, odit asperiores ipsum, facere delectus consequatur voluptatum molestiae quibusdam maxime.</div>
        <div>Tempora beatae et, ex quos sit facilis fugit sequi delectus cumque iste assumenda, maiores aperiam. Ipsa neque consequatur totam velit magni ex beatae ratione porro repellendus, dolorum architecto impedit animi.</div>
        <div>Est aliquid minus architecto similique, odit, saepe quasi inventore minima ut magnam illum unde mollitia, quas molestias nobis porro debitis. Fugiat facere eum doloribus, laborum nihil veniam sit nemo autem.</div>
        <div>Delectus sequi aperiam veritatis accusantium culpa. Et, sapiente minima. Qui impedit, nesciunt molestias maxime laudantium reprehenderit consequuntur illo quaerat atque quasi praesentium pariatur nisi ab consequatur totam cum, minus modi.</div>
        <div>Amet consequatur voluptatum maxime quia unde quod, veniam harum iure perspiciatis perferendis provident eaque dolorem. Est consequuntur repellat at eius eum quisquam porro quos facere repellendus, culpa similique quibusdam nulla!</div>
    </p>
    <main>
        <h3>Menu</h3>
        <div>
            <div class="font-center">
                <img src="./images/edit.png" alt="">
                <p>Edit</p>
            </div>
        </div>
        <div>
            <div class="font-center">
                <img src="./images/favorites.png" alt="">
                <p>Favorites</p>
            </div>
        </div>
        <div>
            <div class="font-center">
                <img src="./images/history.png" alt="">
                <p>History</p>
            </div>
        </div>
        <div>
            <div class="font-center">
                <img src="./images/security.png" alt="">
                <p>Security</p>
            </div>
        </div>
        <div>
            <div class="font-center">
                <img src="./images/settings.png" alt="">
                <p>Settings</p>
            </div>
        </div>
    </main>
</body>
</html>

Answer 2

Как то так:

body{
margin:0;
}
div{
background: red;
height: 100%;
min-height: 100vh;
padding:  20px 20px 20px 200px;
position: relative;

}
aside{
background: green;
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 200px;
text-align: center;
line-height: 100vh;
}
aside{
transform: translate(-75px, 0px);
transition: 0.2s;
}
aside:hover{
transform: translate(0px, 0px);
transition: 0.2s;
}

<div>
<aside>
Menu
</aside>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

БЛОГ НА HUSL

При наводке мыши на боковое меню раскрыть его!

Ответы (2 шт):