Адаптивная навигация Foundation CSS

Отзывчивое меню навигации: это основной компонент адаптивной навигации. В адаптивное меню встроено несколько классов, что позволяет нам переориентировать меню на разных размерах экрана.
Отзывчивый переключатель навигации: с помощью этой функции мы можем добавить функциональность меню переключения в желаемом размере экрана (в основном это делается на маленьких экранах). Для создания переключателя наиболее важным атрибутом является data-responsive-toggle и атрибут data-hide-for, которые нам нужно указать, чтобы определить, на каком размере экрана будет скрыто меню переключателя.
Переключатель адаптивной навигации с анимацией: это то же самое, что и обычный переключатель адаптивного меню. Здесь, когда мы переключаем меню на маленьком экране, мы можем его анимировать. Когда мы хотим использовать анимацию из библиотеки Motion UI, мы должны добавить атрибут data-animate=»someAnimationIn someAnimationOut».

Пример 1. В этом примере меню становится раскрывающимся меню на маленьком экране и горизонтальным раскрывающимся меню на среднем или большом размере.

HTML

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"

         crossorigin="anonymous">

    <link rel="stylesheet" href=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"

         crossorigin="anonymous">

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">

    </script>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js">

    </script>

    <title>

        Foundation CSS Responsive Navigation

    </title>

</head>

<body>

    <h1 style="color:green">GeeksforGeeks</h1>

    <h3>Foundation CSS Responsive Menu</h3>

    <ul class="vertical medium-horizontal menu"

        data-responsive-menu="drilldown medium-dropdown">

        <li>

            <a href="#">DSA</a>

            <ul class="vertical menu">

                <li>

                    <a href="#">Data Structures</a>

                    <ul class="vertical menu">

                        <li>

                            <a href="#">Stack</a>

                        </li>

                        <li>

                            <a href="#">Queue</a>

                        </li>

                        <li>

                            <a href="#">Linked List</a>

                        </li>

                        <li>

                            <a href="#">Binary Tree</a>

                        </li>

                        <li>

                            <a href="#">Graph</a>

                        </li>

                    </ul>

                </li>

                <li>

                    <a href="#">Algorithms</a>

                </li>

            </ul>

        </li>

        <li>

            <a href="#">Web Technology</a>

            <ul class="vertical menu">

                <li>

                    <a href="#">HTML</a>

                </li>

                <li>

                    <a href="#">CSS</a>

                </li>

                <li>

                    <a href="#">JavaScript</a>

                </li>

            </ul>

        </li>

        <li>

            <a href="#">Competitive Programming</a>

            <ul class="vertical menu">

                <li>

                    <a href="#">Courses</a>

                </li>

                <li>

                    <a href="#">Problems</a>

                </li>

            </ul>

        </li>

    </ul>

    <script>

        $(document).foundation();

    </script>

</body>

</html>

Выход:

Читайте также: Tuple (кортеж) в C++

Пример 2. В этом примере описывается адаптивное меню с переключателем.

HTML

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"

         crossorigin="anonymous">

    <link rel="stylesheet" href=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"

         crossorigin="anonymous">

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">

    </script>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js">

    </script>

    <title>

        Foundation CSS Responsive Navigation

    </title>

</head>

<body>

    <h1 style="color:green">GeeksforGeeks</h1>

    <h3>Foundation CSS Responsive Menu Toggle</h3>

    <div class="title-bar"

         data-responsive-toggle="responsive-menu"

         data-hide-for="medium">

        <button class="menu-icon"

                type="button"

                data-toggle="responsive-menu">

        </button>

        <div class="title-bar-title">Menu</div>

    </div>

    <div class="top-bar"

         id="responsive-menu">

        <div class="top-bar-left">

            <ul class="dropdown menu" data-dropdown-menu>

                <li class="menu-text">GFG</li>

                <li class="has-submenu">

                    <a href="#0">Data Structures</a>

                    <ul class="submenu menu vertical" data-submenu>

                        <li>

                            <a href="#0">Stack</a>

                        </li>

                        <li>

                            <a href="#0">Queue</a>

                        </li>

                        <li>

                            <a href="#0">Linked List</a>

                        </li>

                    </ul>

                </li>

                <li>

                    <a href="#0">Web Technology</a>

                </li>

                <li>

                    <a href="#0">Competitive Programming</a>

                </li>

            </ul>

        </div>

        <div class="top-bar-right">

            <ul class="menu">

                <li>

                    <input type="search"

                           placeholder="Search">

                </li>

                <li>

                    <button type="button"

                            class="button">

                        Search

                    </button>

                </li>

            </ul>

        </div>

    </div>

    <script>

        $(document).foundation();

    </script>

</body>

</html>

Выход:

Пример 3. В этом примере мы добавили анимацию для переключения панели навигации, которая делает адаптивную навигацию.

HTML

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"

         crossorigin="anonymous">

    <link rel="stylesheet" href=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"

         crossorigin="anonymous">

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">

    </script>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js">

    </script>

    <title>

        Foundation CSS Responsive Navigation

    </title>

</head>

<body>

    <h1 style="color:green">GeeksforGeeks</h1>

    <h3>Foundation CSS Responsive Menu Toggle</h3>

    <div class="title-bar"

         data-responsive-toggle="example-animated-menu"

         data-hide-for="medium">

        <button class="menu-icon"

                type="button"

                data-toggle>

        </button>

        <div class="title-bar-title">Menu</div>

    </div>

    <div class="top-bar"

         id="example-animated-menu"

         data-animate="hinge-in-from-top fade-out">

        <div class="top-bar-left">

            <ul class="dropdown menu" data-dropdown-menu>

                <li class="menu-text">GFG</li>

                <li>

                    <a href="#">Data Structures</a>

                    <ul class="menu vertical">

                        <li>

                            <a href="#">Stack</a>

                        </li>

                        <li>

                            <a href="#">Queue</a>

                        </li>

                        <li>

                            <a href="#">Linked List</a>

                        </li>

                    </ul>

                </li>

                <li>

                    <a href="#">Web Technology</a>

                </li>

                <li>

                    <a href="#">Competitive Programming</a>

                </li>

            </ul>

        </div>

    </div>

    <script>

        $(document).foundation();

    </script>

</body>

</html>

Выход: