Пытаюсь создать интерактивную панель поиска, которая открывается и закрывается, когда вы щелкаете по ней, но возникают проблемы с открытым исходным кодом, который я нашел для нее. - PullRequest
Новая
       0

Пытаюсь создать интерактивную панель поиска, которая открывается и закрывается, когда вы щелкаете по ней, но возникают проблемы с открытым исходным кодом, который я нашел для нее.

0 голосов
/ 21 июня 2020

Итак, я смог изменить размеры панели поиска, чтобы она соответствовала тому, как я хочу, чтобы она выглядела, но есть некоторые проблемы с «анимацией».

Она должна выглядеть так: : 

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
     :root {
     --line-thickness: 0.25em;
     --glass-size: 65%;
     --icon-height: 7rem;
     --transition-speed: 0.35s;
     --timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
     --icon-color: white;
}
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
 body {
     background: linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%);
     background-repeat: no-repeat;
     background-attachment: fixed;
}
 .search-icon {
     box-sizing: border-box;
     width: var(--icon-height);
     height: var(--icon-height);
     max-width: 20em;
     transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     border: solid var(--line-thickness);
     border-color: rgba(255, 255, 255, 0);
     border-radius: 100px;
     padding: 0.25em;
}
 .search-icon__wrapper {
     width: var(--icon-height);
     height: var(--icon-height);
     position: absolute;
     border-radius: 100px;
     top: 0;
     bottom: 0;
     right: 0;
     margin: auto 0;
     transform: rotate(-45deg);
     transition: all 0 linear;
}
 .search-icon__wrapper:hover {
     cursor: pointer;
}
 .search-icon__input {
     background: none;
     text-align: center;
     outline: none;
     display: block;
     border: none;
     background: rgba(255, 255, 255, 0);
     width: calc(100% - (var(--icon-height) / 2 + 1rem));
     margin-right: 6rem;
     height: 100%;
     border-radius: 100px;
     transition: all var(--transition-speed) linear;
     font-size: 2em;
     padding: 0 0.5em;
     color: white;
}
 .search-icon__input::placeholder {
     color: rgba(255, 255, 255, .75);
}
 .search-icon__glass {
     width: var(--glass-size);
     height: var(--glass-size);
     border: solid var(--line-thickness);
     border-color: var(--icon-color);
     border-radius: 100px;
     margin: 0 auto;
     position: relative;
     transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
 .search-icon__handle {
     height: calc(100% - var(--glass-size));
     width: var(--line-thickness);
     margin: 0 auto;
     background: var(--icon-color);
     position: absolute;
     border-radius: 0 0 100px 100px;
     left: 0;
     right: 0;
     bottom: 0;
     transition: all var(--transition-speed) var(--timing-function);
     transition-delay: var(--transition-speed);
}
 .search-icon__handle::after {
     content: "";
     display: block;
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: inherit;
     background: var(--icon-color);
     transform: rotate(0deg);
     transition: all var(--transition-speed) var(--timing-function);
     transition-delay: 0s;
}
 .search-icon.open {
     width: calc(100vw - 1em);
     border-color: var(--icon-color);
     transition-delay: var(--transition-speed);
}
 .search-icon.open .search-icon__input {
     transition-delay: var(--transition-speed);
}
 .search-icon.open .search-icon__glass {
     width: 100%;
     height: 100%;
     transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
     border-color: rgba(0, 0, 0, 0);
}
 .search-icon.open .search-icon__handle {
     bottom: calc(50% - (100% - var(--glass-size)) / 2);
     border-radius: 100px;
     transition-delay: 0s;
}
 .search-icon.open .search-icon__handle::after {
     transition-delay: var(--transition-speed);
     transform: rotate(90deg);
}
 
     </style>
 </head>
 <body>
     <div class="search-icon">
  <input class="search-icon__input" placeholder="search ..."> 
  
  <div class="search-icon__wrapper">
    <div class="search-icon__glass"></div>
    <div class="search-icon__handle"></div>
  </div>
</div>
<script>
     
     const searchIcon = document.querySelector(".search-icon__wrapper");

searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
     
     
     </script>
 </body>
 </html>

Но что происходит с моим кодом: (просмотрите в полноэкранном режиме) 

<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">

<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
    <style>
        .third-level-menu {
            position: absolute;
            top: 0;
            right: -190px;
            width: 190px;
            list-style: none;
            padding: 0;
            margin: 0;
            display: none;
        }

        .third-level-menu>li {
            height: 45px;
            background-color: #6640C1;
            background: #6640C1;
        }

        .third-level-menu>li:hover {
            background-color: gold;
        }

        .second-level-menu {
            position: absolute;
            top: 45px;
            left: 0;
            width: 100%;
            /* width: 273.2px; */
            list-style: none;
            padding: 0;
            margin: 0;
            display: none;
        }

        .second-level-menu>li {
            position: relative;
            height: 45px;
            background-color: #6640C1;
            background: #6640C1;
            width: 100%;
        }

        .second-level-menu>li:hover {
            background-color: gold;
        }

        .top-level-menu {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100px;
            z-index: 1;
            justify-content: space-between;

        }

        .top-level-menu>li {
            position: relative;
            height: 30px;
            /* width: 273.2px; */
            background: #6640C1;
            z-index: 2;
            text-align: center;
            flex: 1;

        }

        .top-level-menu>li:hover {
            background-color: gold !important;
        }

        .top-level-menu li:hover>ul {
            /* On hover, display the next level's menu */
            display: inline;


        }


        /* Menu Link Styles */

        .top-level-menu a

        /* Apply to all links inside the multi-level menu */
            {
            font-family: 'Fjalla One', sans-serif;
            color: #FFFFFF;
            text-decoration: none;
            padding: 0 0 0 10px;
            background: #6640C1;


            /* Make the link cover the entire list item-container */
            display: block;
            line-height: 45px;
        }

        .top-level-menu a:hover {
            color: #000000;
            background-color: gold;
        }



        .container2 {
            max-width: 1500px;
            margin: auto;
            overflow: auto;
        }

        .container-top {
            position: fixed;
            background-color: gold;
            top: 0;
            width: 100%;
            height: 10%;
            z-index: 1;
            text-align: center;

        }

        .top {
            display: inline-block;
            font-family: 'Permanent Marker', cursive;
            font-size: 30px;
            width: 100%;
            margin: -20px;
            z-index: 1;
        }

        .footer {
            position: relative;
            background-color: white;
            font-family: 'Alfa Slab One', cursive;
            width: 100%;
            color: black;
            margin: 50px 0 0 0px;
            height: 20px;

        }

        :root {
            --line-thickness: 0.1em;
            --glass-size: 20%;
            --icon-height: 7rem;
            --transition-speed: 0.35s;
            --timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
            --icon-color: black;
        }

        /* this is already done  */

        * {
            box-sizing: border-box;


        }

        body {
            margin: 0;
            background: white;
            background-repeat: no-repeat;
            background-attachment: fixed;

        }

        .search-icon {
            box-sizing: border-box;
            width: 30px;
            height: 30px;
            max-width: 20em;
            transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            border: solid var(--line-thickness);
            border-color: rgba(255, 255, 255, 0);
            border-radius: 100px;
            padding: 0.25em;
        }

        .search-icon__wrapper {
            width: var(--icon-height);
            height: var(--icon-height);
            position: absolute;
            border-radius: 100px;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto 0;
            transform: rotate(-45deg);
            transition: all 0 linear;
        }

        .search-icon__wrapper:hover {
            cursor: pointer;
        }

        .search-icon__input {
            background: none;
            text-align: center;
            outline: none;
            display: block;
            border: none;
            background: rgba(255, 255, 255, 0);
            width: calc(90% - (var(--icon-height) / 2 + 1rem));
            margin-right: 6rem;
            height: 100%;
            border-radius: 100px;
            transition: all var(--transition-speed) linear;
            font-size: 20px;
            padding: 0 0.5em;
            color: black;


        }

        .search-icon__input::placeholder {
            color: rgba(255, 255, 255, .75);
        }

        .search-icon__glass {
            width: var(--glass-size);
            height: var(--glass-size);
            border: solid var(--line-thickness);
            border-color: var(--icon-color);
            border-radius: 100px;
            margin: 0 auto;
            position: relative;
            transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
        }

        .search-icon__handle {
            height: calc(30% - var(--glass-size));
            width: var(--line-thickness);
            margin: 0 auto;
            background: var(--icon-color);
            position: absolute;
            border-radius: 0 0 100px 100px;
            left: 0;
            right: 0;
            bottom: 0;
            transition: all var(--transition-speed) var(--timing-function);
            transition-delay: var(--transition-speed);
        }

        .search-icon__handle::after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background: var(--icon-color);
            transform: rotate(0deg);
            transition: all var(--transition-speed) var(--timing-function);
            transition-delay: 0s;

        }

        .search-icon.open {
            width: 200px;
            border-color: var(--icon-color);
            transition-delay: var(--transition-speed);
        }

        .search-icon.open .search-icon__input {
            transition-delay: var(--transition-speed);
        }

        .search-icon.open .search-icon__glass {
            width: 45%;
            height: 45%;
            transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
            border-color: rgba(0, 0, 0, 0);
        }

        .search-icon.open .search-icon__handle {
            bottom: calc(50% - (100% - var(--glass-size)) / 2);
            border-radius: 100px;
            transition-delay: 0s;
        }

        .search-icon.open .search-icon__handle::after {
            transition-delay: var(--transition-speed);
            transform: rotate(90deg);
        }
    </style>
    <title>TheLeague.com</title>
</head>

<body>
    <main>
        <div class="container-top">
            <div class="top">
                <p>Shop 20% Off All Jerseys Now!</p>
            </div>


        </div>
        <div class="footer">
            <div style="float:right; margin: 0 auto;">
                <div class=" search-icon" style="margin-right: 50px;">
                    <input class="search-icon__input" placeholder="search ...">

                    <div class="search-icon__wrapper">
                        <div class="search-icon__glass"></div>
                        <div class="search-icon__handle"></div>
                    </div>
                </div>
            </div>

        </div>
        <div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;">
            <a style="text-decoration: none;" href="#">
                <h1>The<u>League</u></h1>
            </a>

        </div>

        </div>

        <ul class="top-level-menu">
            <li><a href="#"><i class="fa fa-home" style="font-size: 20px;"></i> Home</a></li>
            <li>
                <a href="#"><i class="fa fa-tag" style="font-size: 20px"></i> Shop All &#x25BC; </a>
                <ul class="second-level-menu">
                    <li><a href="#">Jerseys</a></li>
                    <li><a href="#">Hats</a></li>
                    <li><a href="#">Gym Shorts</a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</a></li>
            <li>
                <a href="#"><i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams &#x25BC;</a>
                <ul class="second-level-menu">
                    <li>
                        <a href="#">Soccer</a>
                        <ul class="third-level-menu">
                            <li><a href="#">Barcelona</a></li>
                            <li><a href="#">PSG</a></li>
                            <li><a href="#">Real Madrid</a></li>
                        </ul>

                    </li>
                    <li>
                        <a href="#">Basketball</a>
                        <ul class="third-level-menu">
                            <li><a href="#">Golden State Warriors</a></li>
                            <li><a href="#">Celtics</a></li>
                            <li><a href="#">Chicago Bulls</a></li>

                        </ul>
                    </li>
                    <li>
                        <a href="#">Football</a>
                        <ul class="third-level-menu">
                            <li><a href="#">New England Patriots</a></li>
                            <li><a href="#">Ravens</a></li>
                            <li><a href="#">Atlanta Falcons</a></li>

                        </ul>
                    </li>

                </ul>
            <li><a href="#"><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us</a>
            </li>
            </li>

        </ul>

        <script>

            const searchIcon = document.querySelector(".search-icon__wrapper");

            searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))


        </script>
    </main>
</body>

</html>

«Метка» значка поиска не прикреплена к «стеклянной» части значка поиска, и ручка должна оставаться внутри значка поиска при его расширении чего он не делает.

Я бы хотел, чтобы он выглядел так, как я показал в первом фрагменте, и располагался в правом верхнем углу в той же строке, что и «TheLeague».

Если кто-то может мне помочь, я буду очень признателен.

Спасибо

1 Ответ

0 голосов
/ 21 июня 2020

Попробуйте вместо этого 

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">

<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
    <title>TheLeague.com</title>
<style>

 .third-level-menu {
            position: absolute;
            top: 0;
            right: -190px;
            width: 190px;
            list-style: none;
            padding: 0;
            margin: 0;
            display: none;
        }

        .third-level-menu>li {
            height: 45px;
            background-color: #6640C1;
            background: #6640C1;
        }

        .third-level-menu>li:hover {
            background-color: gold;
        }

        .second-level-menu {
            position: absolute;
            top: 45px;
            left: 0;
            width: 100%;
            /* width: 273.2px; */
            list-style: none;
            padding: 0;
            margin: 0;
            display: none;
        }

        .second-level-menu>li {
            position: relative;
            height: 45px;
            background-color: #6640C1;
            background: #6640C1;
            width: 100%;
        }

        .second-level-menu>li:hover {
            background-color: gold;
        }

        .top-level-menu {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100px;
            z-index: 1;
            justify-content: space-between;

        }

        .top-level-menu>li {
            position: relative;
            height: 30px;
            /* width: 273.2px; */
            background: #6640C1;
            z-index: 2;
            text-align: center;
            flex: 1;

        }

        .top-level-menu>li:hover {
            background-color: gold !important;
        }

        .top-level-menu li:hover>ul {
            /* On hover, display the next level's menu */
            display: inline;


        }


        /* Menu Link Styles */

        .top-level-menu a

        /* Apply to all links inside the multi-level menu */
            {
            font-family: 'Fjalla One', sans-serif;
            color: #FFFFFF;
            text-decoration: none;
            padding: 0 0 0 10px;
            background: #6640C1;


            /* Make the link cover the entire list item-container */
            display: block;
            line-height: 45px;
        }

        .top-level-menu a:hover {
            color: #000000;
            background-color: gold;
        }



        .container2 {
            max-width: 1500px;
            margin: auto;
            overflow: auto;
        }

        .container-top {
            position: fixed;
            background-color: gold;
            top: 0;
            width: 100%;
            height: 10%;
            z-index: 1;
            text-align: center;

        }

        .top {
            display: inline-block;
            font-family: 'Permanent Marker', cursive;
            font-size: 30px;
            width: 100%;
            margin: -20px;
            z-index: 1;
        }

        .footer {
            position: relative;
            background-color: white;
            font-family: 'Alfa Slab One', cursive;
            width: 100%;
            color: black;
            margin: 50px 0 0 0px;
            height: 20px;

        }

        :root {
            --line-thickness: 0.1em;
            --glass-size: 65%;
            --icon-height: 3rem;
            --transition-speed: 0.35s;
            --timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
            --icon-color: black;
        }

        /* this is already done  */

        * {
            box-sizing: border-box;


        }

        body {
            margin: 0;
            background: white;
            background-repeat: no-repeat;
            background-attachment: fixed;

        }

        .search-icon {
            box-sizing: border-box;
            width: 30px;
            height: 30px;
            max-width: 20em;
            transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            border: solid var(--line-thickness);
            border-color: rgba(255, 255, 255, 0);
            border-radius: 100px;
            padding: 0.25em;
        }

        .search-icon__wrapper {
            width: var(--icon-height);
            height: var(--icon-height);
            position: absolute;
            border-radius: 100px;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto 0;
            transform: rotate(-45deg);
            transition: all 0 linear;
        }

        .search-icon__wrapper:hover {
            cursor: pointer;
        }

        .search-icon__input {
            background: none;
            text-align: center;
            outline: none;
            display: block;
            border: none;
            background: rgba(255, 255, 255, 0);
            width: calc(90% - (var(--icon-height) / 2 + 1rem));
            margin-right: 6rem;
            height: 100%;
            border-radius: 100px;
            transition: all var(--transition-speed) linear;
            font-size: 20px;
            padding: 0 0.5em;
            color: black;


        }

        .search-icon__input::placeholder {
            color: rgba(255, 255, 255, .75);
        }

        .search-icon__glass {
            width: var(--glass-size);
            height: var(--glass-size);
            border: solid var(--line-thickness);
            border-color: var(--icon-color);
            border-radius: 100px;
            margin: 0 auto;
            position: relative;
            transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
        }

        .search-icon__handle {
            height: calc(100% - var(--glass-size));
            width: var(--line-thickness);
            margin: 0 auto;
            background: var(--icon-color);
            position: absolute;
            border-radius: 0 0 100px 100px;
            left: 0;
            right: 0;
            bottom: 0;
            transition: all var(--transition-speed) var(--timing-function);
            transition-delay: var(--transition-speed);
        }

        .search-icon__handle::after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background: var(--icon-color);
            transform: rotate(0deg);
            transition: all var(--transition-speed) var(--timing-function);
            transition-delay: 0s;

        }

        .search-icon.open {
            width: 200px;
            border-color: var(--icon-color);
            transition-delay: var(--transition-speed);
        }

        .search-icon.open .search-icon__input {
            transition-delay: var(--transition-speed);
        }

        .search-icon.open .search-icon__glass {
            width: 45%;
            height: 45%;
            transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
            border-color: rgba(0, 0, 0, 0);
        }

        .search-icon.open .search-icon__handle {
            bottom: calc(50% - (100% - var(--glass-size)) / 2);
            border-radius: 100px;
            transition-delay: 0s;
        }

        .search-icon.open .search-icon__handle::after {
            transition-delay: var(--transition-speed);
            transform: rotate(90deg);
        }
</style>
</head>

<body>
    <main>
        <div class="container-top">
            <div class="top">
                <p>Shop 20% Off All Jerseys Now!</p>
            </div>


        </div>
        <div class="footer">
            <div style="float:right; margin: 0 auto;">
                <div class=" search-icon" style="margin-right: 50px;">
                    <input class="search-icon__input" placeholder="search ...">

                    <div class="search-icon__wrapper">
                        <div class="search-icon__glass"></div>
                        <div class="search-icon__handle"></div>
                    </div>
                </div>
            </div>

        </div>
        <div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;">
            <a style="text-decoration: none;" href="#">
                <h1>The<u>League</u></h1>
            </a>

        </div>

        </div>

        <ul class="top-level-menu">
            <li><a href="#"><i class="fa fa-home" style="font-size: 20px;"></i> Home</a></li>
            <li>
                <a href="#"><i class="fa fa-tag" style="font-size: 20px"></i> Shop All &#x25BC; </a>
                <ul class="second-level-menu">
                    <li><a href="#">Jerseys</a></li>
                    <li><a href="#">Hats</a></li>
                    <li><a href="#">Gym Shorts</a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</a></li>
            <li>
                <a href="#"><i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams &#x25BC;</a>
                <ul class="second-level-menu">
                    <li>
                        <a href="#">Soccer</a>
                        <ul class="third-level-menu">
                            <li><a href="#">Barcelona</a></li>
                            <li><a href="#">PSG</a></li>
                            <li><a href="#">Real Madrid</a></li>
                        </ul>

                    </li>
                    <li>
                        <a href="#">Basketball</a>
                        <ul class="third-level-menu">
                            <li><a href="#">Golden State Warriors</a></li>
                            <li><a href="#">Celtics</a></li>
                            <li><a href="#">Chicago Bulls</a></li>

                        </ul>
                    </li>
                    <li>
                        <a href="#">Football</a>
                        <ul class="third-level-menu">
                            <li><a href="#">New England Patriots</a></li>
                            <li><a href="#">Ravens</a></li>
                            <li><a href="#">Atlanta Falcons</a></li>

                        </ul>
                    </li>

                </ul>
            <li><a href="#"><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us</a>
            </li>
            </li>

        </ul>
    </main>
<script>
            const searchIcon = document.querySelector(".search-icon__wrapper");

            searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>

Я изменил в css

:root {
            --glass-size: 65%;
            --icon-height: 3rem;
}
.search-icon__handle {
            height: calc(100% - var(--glass-size));
}

Посмотреть демонстрацию https://codepen.io/Rayeesac/pen/PoZpWYX

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...