Javascript.RU

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

меню справа на 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>
Ответить с цитированием
  #32 (permalink)  
Старый 13.05.2021, 18:23
Аспирант
Отправить личное сообщение для jurvrn Посмотреть профиль Найти все сообщения от jurvrn
 
Регистрация: 04.04.2021
Сообщений: 52

Сообщение от рони Посмотреть сообщение
jurvrn,
https://codepen.io/intersk/pen/YzZwyYj отсутствует jquery-ui
https://codepen.io/intersk/pen/KKWVzQb отсутствует #
спасибо за подсказку.
Но в первом скрипте заработало со всеми только этими 2 файлами. А почему нужны оба?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

во втором скрипте что-то тоже не получается когда нужно использовать несколько блоков (не писать же под каждый свой скрипт)


я просто убрал из класса стилей transform: translateX(0%); и искажение прекратилось при сохранении работы кода...
эта тема решена

Последний раз редактировалось jurvrn, 13.05.2021 в 19:24.
Ответить с цитированием
  #33 (permalink)  
Старый 13.05.2021, 18:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от jurvrn
А почему нужны оба?
jquery-ui содержит эффекты и модули, которые являются дополнением к основной jquery
Цитата:
jQuery UI — это библиотека на основе jQuery, реализующая более 20 гибких плагинов, предоставляющая продуманную систему оформления и средства для создания собственных плагинов с нуля, или на основе уже существующих.
http://jquery.page2page.ru/index.php5/JQuery_UI
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
Обновление отдельного блока без перезагрузки страницы BellaChao Общие вопросы Javascript 4 29.01.2018 14:40
Движение по элементам блока без перезапуска функции выпадающеего меню. tutelaris Элементы интерфейса 4 26.04.2013 09:15
слайд панели tadjik1 Элементы интерфейса 22 02.04.2012 17:13
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21