Foundation CSS Toggler

CSS-хитрости, которые должен знать каждый веб-разработчик Программирование и разработка

Toggler облегчает переключение любого элемента или анимацию любого элемента одним щелчком мыши. Мы можем переключать любой класс, указав атрибут data-toggler. Мы также можем сделать закрываемый элемент, используя атрибут data-closable.

Атрибуты переключателя Foundation CSS:

  • data-toggler: класс, который мы хотим переключить.
  • data-toggle: этот атрибут принимает идентификатор цели в качестве значения атрибута.

Синтаксис:

<p>
    <a data-toggle="exampleToggle">Toggle</a>
</p>
<ul class="menu" id="exampleToggle" data-toggler=".expanded">
  Content
</ul>

Пример 1. Этот пример иллюстрирует класс Toggler в Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Toggler</title>
    <link rel="stylesheet" href=
          crossorigin="anonymous">
    <script src=
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
            integrity=
"sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
            crossorigin="anonymous">
    </script>
</head>
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>Foundation CSS Toggler</h3>
    <p>
        <a data-toggle="toggleExample">Toggle!</a>
    </p>
 
    <ul class="menu"
        id="toggleExample"
        data-toggler=".expanded">
        <li>
            <a href="#">Menu 1</a>
        </li>
        <li>
            <a href="#">Menu 2</a>
        </li>
        <li>
            <a href="#">Menu 3</a>
        </li>
        <li>
            <a href="#">Menu 4</a>
        </li>
        <li>
            <a href="#">Menu 5</a>
        </li>
    </ul>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
</html>

Пример 2. В этом примере класс выноски реализуется с атрибутом закрытия данных для закрытия панели в Foundation CSS.

Читайте также:  Программа Python для поиска самого большого элемента в кортеже

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Toggler</title>
    <link rel="stylesheet" href=
          crossorigin="anonymous">
    <script src=
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
            integrity=
"sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
            crossorigin="anonymous">
    </script>
</head>
 
<body>
    <h1 style="color: green;">
    GeeksforGeeks
  </h1>
    <h3>Foundation CSS Toggler</h3>
    <strong>Close an element:</strong>
    <div class="callout" data-closable>
        <button class="close-button" data-close>×</button>
        <p>
            A Computer Science portal for geeks.
            It contains well written, well thought 
            and well-explained computer science 
            and programming articles
        </p>
    </div>
    <div class="callout" data-closable>
        <button class="close-button" data-close>×</button>
        <img src=
             alt="GFG_logo"
    </div>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
</html>
Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector