Показать сообщение отдельно
  #31 (permalink)  
Старый 13.05.2021, 17:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

меню справа на jquery
jurvrn,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .main-block {
            z-index: 1;
            position: fixed;
            width: 36px;
            height: 175px;
            top: 0;
            bottom: 0;
            margin: auto 0;
            left: calc(100% - 36px);
        }
        .each-block {
            position: relative;
            z-index: 2;
            display: flex;
            margin-bottom: 10px;
        }
        .iconka-block,
        .textLine-Out {
            height: 36px;
            border: black 2px solid;
            border-radius: 5px 0 0 5px;
        }
        .textLine-Out {
            z-index: 3;
            position: static;
            display: flex;
            background-color: rgb(213, 231, 248);
        }
        .textLine-Iner {
            margin: auto;
            font-size: 16px;
            white-space: nowrap;
        }
        .iconka-block {
            position: absolute;
            display: flex;
            z-index: 4;
            background-color: rgb(226, 226, 226);
            width: 36px;
            right: 0;
            cursor: pointer;
            border-right: none;
        }
        .textLine-Out {
            transform: translateX(calc(-100% + 36px));
        }
        .textLine-Iner {
            width: 0px;
            padding: 0 10px;
        }
        .iconka-block .icon_all {
            font-size: 22px;
            text-align: center;
            margin: auto;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            $(".each-block").each((i, el) => {
                let textLine = el.querySelector(".textLine-Iner");
                let width = el.scrollWidth + 10;
                $(el).mouseenter(function() {
                    let options = {
                        width: `${width}px`,
                    };
                    $(textLine).stop().animate(
                        options, {
                            duration: 600
                        })
                })
                $(el).mouseleave(function() {
                    let options = {
                        width: `0px`
                    };
                    $(textLine).stop().animate(
                        options, {
                            duration: 300
                        });
                })
            })
        });
    </script>
</head>
<body>
    <div class="main-block">
        <div class="each-block">
            <div class="iconka-block"><i class="fa fa-envelope-o icon_all icon_mail" aria-hidden="true"></i></div>
            <div class="textLine-Out">
                <div class="textLine-Iner">Напишите нам</div>
            </div>
        </div>
        <div class="each-block">
            <div class="iconka-block"><i class="fa fa-podcast icon_all icon_111_enter" aria-hidden="true"></i></div>
            <div class="textLine-Out">
                <div class="textLine-Iner">fa2-podcast 2icon</div>
            </div>
        </div>
        <div class="each-block">
            <div class="iconka-block"><i class="fa fa-bookmark-o icon_all icon_111_enter" aria-hidden="true"></i></div>
            <div class="textLine-Out">
                <div class="textLine-Iner">33icon_fa-bookmark-o</div>
            </div>
        </div>
        <div class="each-block">
            <div class="iconka-block"><i class="fa fa-user-circle icon_all icon_enter" aria-hidden="true"></i></div>
            <div class="textLine-Out">
                <div class="textLine-Iner">Вход на сайт</div>
            </div>
        </div>
    </div>
</body>
</html>
Ответить с цитированием