Fundación CSS Magallanes Navegación

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end de código abierto que se utiliza para crear sitios web, correos electrónicos o aplicaciones sorprendentes de forma rápida y sencilla. ZURB lo lanzó en septiembre de 2011. Numerosas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Esta plataforma, que se asemeja a SaaS, se basa en el marco Bootstrap. Es más único, flexible y complejo. Trabajar con paquetes de módulos también es simple debido a su interfaz de línea de comandos. El marco de correo electrónico crea correos electrónicos HTML que son accesibles en todos los dispositivos y compatibles con dispositivos móviles. Con Foundation for Apps, puede crear aplicaciones web totalmente receptivas.

Foundation CSS Magellan se utiliza principalmente para crear navegación local o navegación que contiene la utilidad de saltar a partes específicas de una página web. Cuando se hace clic en los enlaces de Magellan, la ventana gráfica se dirige al objetivo dado sin desplazarse hacia abajo en la página web. 

Foundation CSS Magellan Navigation es de dos tipos de navegación proporcionados por Magellan, uno es el básico y el otro es el pegajoso. Ahora, puede pasar rápidamente al ejemplo 1 a continuación y ver cómo el Magellan básico simplemente no es la manera perfecta de implementar el Magellan. Por otro lado, mire el ejemplo 2 y podrá ver que Sticky Navigation es más un ejemplo práctico en el que no importa dónde se encuentre en la página web, puede navegar rápidamente a cualquier otra parte de la página web. Puede usar cualquier tipo de componente de navegación para crear un Magellan, no necesita tomar ninguna clase específica para hacer un Magellan. Hay algunos atributos específicos que se necesitan para crear un Magellan.

Atributos de navegación de Foundation CSS Magellan:

Magallanes básico:

  • [data-magellan]: Esta clase se utiliza para crear la navegación de enlaces a las secciones respectivas.
  • [data-magellan-target= id ]: esta clase se utiliza para indicar las secciones donde saltará la ventana gráfica cuando hagamos clic en los enlaces respectivos. Toma el valor del div que 

Sintaxis:

<ul class="menu" data-magellan>
    <li><a href="#first">..</a></li>
    <li><a href="#second">..</a></li>
    <li><a href="#third">..</a></li>
</ul>

<div class="sections">
    <section id="first" 
        data-magellan-target="first">
        ...
    </section>
    <section id="second" 
        data-magellan-target="second">
        ...
    </section>
    <section id="third" 
        data-magellan-target="third">
        ...
    </section>
</div>

Sticky Magellan Navigation: Necesitamos agregar que Magellan está dentro de un contenedor Sticky .

  • [data-sticky-container]: este atributo se usa para el contenedor, que está diseñado para ser fijo. No hay ningún valor en este atributo.
  • [data-sticky]: este atributo se usa con el elemento que pretende ser un elemento fijo. Este atributo no toma ningún valor.

Sintaxis:

<!-- Add a Sticky Menu -->
<div data-sticky-container>
    <div class=".." data-sticky>
        ...
    </div>
</div>

<div class="sections">
    <section id="first" 
        data-magellan-target="first">
        ...
    </section>
    <section id="second" 
        data-magellan-target="second">
        ...
    </section>
    <section id="third" 
        data-magellan-target="third">
        ...
    </section>
</div>

Ejemplo 1: este código a continuación demuestra cómo usar un menú simple con botones para hacer una navegación básica de Magellan.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css">
    <link rel="stylesheet"
        href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css">
    <!-- Compressed JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
  
    <!-- This demo uses float grid but you 
        can use flex grid too -->
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
      
    <h3 class="">
        Foundation CSS Magellan Navigation
    </h3>
      
    <ul class="menu" data-magellan>
        <li><a href="#dsa"><button type="button" class="button">
                    Got to DSA Section</button></a></li>
        <li><a href="#Algo"><button type="button" class="button">
                    Skip to Algo Section</button></a></li>
        <li><a href="#Interview"><button type="button" class="button">
                    Got to Interview Section</button></a></li>
        <li><a href="#cpp"><button type="button" class="button">
                    Got to CPP Section</button></a></li>
        <li><a href="#Java"><button type="button" class="button">
                    Got to Java Section</button></a></li>
    </ul>
  
    <div class="sections">
        <section id="dsa" data-magellan-target="dsa">
            <h4>DSA section</h4>
            <strong>This is the DSA section. </strong>
  
            <p>
                A data structure is a group of data elements 
                that provides the easiest way to store and 
                perform different actions on the data of the 
                computer. A data structure is a particular 
                way of organizing data in a computer so that 
                it can be used effectively. The idea is to 
                reduce the space and time complexities of 
                different tasks. The choice of a good data 
                structure makes it possible to perform a 
                variety of critical operations effectively. 
                An efficient data structure also uses 
                minimum memory space and execution time to 
                process the structure.
            </p>
        </section>
  
        <section id="Algo" data-magellan-target="Algo">
            <h4>Algo section</h4>
            <strong>This is the Algo section.</strong>
  
            <p>
                Hi Geeks!! Welcome to GeeksForGeeks.
                The word Algorithm means ” A set of rules to be
                followed in calculations or other problem-solving
                operations ” Or ” A procedure for solving a
                mathematical problem in a finite number of steps
                that frequently by recursive operations “.
  
                Therefore Algorithm refers to a sequence of
                finite steps to solve a particular problem.
  
                It can be understood by taking the example of
                cooking a new recipe. To cook a new recipe, one
                reads the instructions and steps and executes
                them one by one, in the given sequence. The
                result thus obtained is the new dish cooked
                perfectly. Every time you use your phone,
                computer, laptop, or calculator you are using
                Algorithms. Similarly, algorithms help to do
                a task in programming to get the expected output.
  
                The Algorithm designed are language-independent,
                i.e. they are just plain instructions that can
                be implemented in any language, and yet the
                output will be the same, as expected.
            </p>
        </section>
  
        <section id="Interview" data-magellan-target="Interview">
            <h4>Interview section</h4>
            <strong>This is the Interview Sectiom</strong>
  
            <p>
                Course Description
                An interview-centric course designed to prepare
                you for the role of SDE for both product and
                service based companies. A placement preparation
                pack built with years of expertise. Prepare C++,
                Java, DSA, CS Theory concepts and much more!
            </p>
        </section>
  
        <section id="cpp" data-magellan-target="cpp">
            <h4>CPP section</h4>
            <strong>This is the CPP Sectiom</strong>
  
            <p>
                C++ is a general-purpose programming language
                that was developed as an enhancement of the C
                language to include object-oriented paradigm.
                It is an imperative and a compiled language.
                C++ is a middle-level language rendering it
                the advantage of programming low-level
                (drivers, kernels) and even higher-level
                applications (games, GUI, desktop apps etc.).
                The basic syntax and code structure of both
                C and C++ are the same. 
            </p>
        </section>
  
        <section id="Java" data-magellan-target="Java">
            <h4>Java section</h4>
            <strong>This is the JAVA Section</strong>
  
            <p>
                JAVA was developed by James Gosling at Sun
                Microsystems Inc in the year 1995, later
                acquired by Oracle Corporation. It is a simple
                programming language. Java makes writing,
                compiling, and debugging programming easy.
                It helps to create reusable code and modular
                programs. Java is a class-based, object-oriented
                programming language and is designed to have
                as few implementation dependencies as possible.
                A general-purpose programming language made
                for developers to write once run anywhere that
                is compiled Java code can run on all platforms
                that support Java. Java applications are compiled
                to byte code that can run on any Java Virtual
                Machine. The syntax of Java is similar to c/c++.
            </p>
        </section>
    </div>
      
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

 

Ejemplo 2: El siguiente código ilustra una Sticky Magellan Navigation Bar . Hemos utilizado un componente de barra superior como barra de navegación.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css">
    <link rel="stylesheet"
        href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css">
    <!-- Compressed JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
    <!-- This demo uses float grid but you can use flex grid too -->
    <div data-sticky-container>
        <div class="top-bar" data-sticky data-margin-top="0" 
            id="example-menu">
            <div class="top-bar-left">
                <ul class="menu">
                    <li class="menu-text">
                        <h4 style="color: green">
                            GeeksforGeeks</h4>
                    </li>
                </ul>
            </div>
            <div class="top-bar-right">
                <ul class="menu float-right" data-magellan>
                    <li><a href="#dsa">
                            <button type="button" class="button">
                                Got to DSA Section</button></a></li>
                    <li><a href="#Algo">
                            <button type="button" class="button">
                                Skip to Algo Section</button></a></li>
                    <li><a href="#Java">
                            <button type="button" class="button">
                                Got to Java Section</button></a></li>
                </ul>
            </div>
        </div>
    </div>
    <h3 class="margin-1">Foundation CSS Magellan Navigation</h3>
    <div class="row demo-toggle-title">
        <div class="columns">
            <div class="sections">
                <section id="dsa" data-magellan-target="dsa">
                    <h4>DSA section</h4>
                    <strong>This is the DSA section. </strong>
  
                    <p>
                        A data structure is a group of data elements
                        that provides the easiest way to store and perform
                        different actions on the data of the computer.
                        A data structure is a particular way of organizing
                        data in a computer so that it can be used effectively.
                        The idea is to reduce the space and time
                        complexities of different tasks.
  
                        The choice of a good data structure makes it
                        possible to perform a variety of critical
                        operations effectively. An efficient data
                        structure also uses minimum memory space and
                        execution time to process the structure. 
                    </p>
                </section>
  
                <section id="Algo" data-magellan-target="Algo">
                    <h4>Algo section</h4>
                    <strong>This is the Algo section.</strong>
  
                    <p>
                        Hi Geeks!! Welcome to GeeksForGeeks.
                        The word Algorithm means ” A set of rules to
                        be followed in calculations or other
                        problem-solving operations ” Or ” A procedure
                        for solving a mathematical problem in a finite
                        number of steps that frequently by recursive
                        operations “.
  
                        Therefore Algorithm refers to a sequence of
                        finite steps to solve a particular problem.
  
                        It can be understood by taking the example of
                        cooking a new recipe. To cook a new recipe, one
                        reads the instructions and steps and executes
                        them one by one, in the given sequence. The
                        result thus obtained is the new dish cooked
                        perfectly. Every time you use your phone,
                        computer, laptop, or calculator you are using
                        Algorithms. Similarly, algorithms help to do
                        a task in programming to get the expected output.
  
                        The Algorithm designed are language-independent,
                        i.e. they are just plain instructions that can
                        be implemented in any language, and yet the
                        output will be the same, as expected.
                    </p>
                </section>
  
                <section id="Java" data-magellan-target="Java">
                    <h4>Java section</h4>
                    <strong>This is the JAVA Section</strong>
  
                    <p>JAVA was developed by James Gosling at Sun
                        Microsystems Inc in the year 1995, later acquired
                        by Oracle Corporation. It is a simple programming
                        language. Java makes writing, compiling, and
                        debugging programming easy. It helps to create
                        reusable code and modular programs. Java is a
                        class-based, object-oriented programming
                        language and is designed to have as few
                        implementation dependencies as possible. A
                        general-purpose programming language made for
                        developers to write once run anywhere that is
                        compiled Java code can run on all platforms that
                        support Java. Java applications are compiled
                        to byte code that can run on any Java Virtual
                        Machine. The syntax of Java is similar to c/c++.
                    </p>
                </section>
            </div>
        </div>
    </div>
  
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

 

Referencia: https://get.foundation/sites/docs/magellan.html#sticky-navigation 

Publicación traducida automáticamente

Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *