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

Введение в PostCSS Программирование и разработка
  • Отзывчивое меню навигации: это основной компонент адаптивной навигации. В адаптивное меню встроено несколько классов, что позволяет нам переориентировать меню на разных размерах экрана.
  • Отзывчивый переключатель навигации: с помощью этой функции мы можем добавить функциональность меню переключения в желаемом размере экрана (в основном это делается на маленьких экранах). Для создания переключателя наиболее важным атрибутом является 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>

Выход:

Читайте также:  JHipster (Java Hipster) - полнофункциональная платформа веб-разработки для современного разработчика

тановится раскрывающимся меню на мал

Пример 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>

Выход:

Читайте также:  Учебное пособие по React: как создать пользовательский интерфейс Instagram с помощью React

м примере описывается адаптивное меню с переключа

Пример 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>

Выход:

м примере мы добавили анимацию для переключения панели нави

Оцените статью
bestprogrammer.ru
Добавить комментарий