Fundación CSS Magallanes – Part 1

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.

Foundation CSS Magellan se utiliza para saltar al objetivo dado cuando se hace clic en el enlace. Se utiliza cuando queremos saltar a alguna sección específica directamente sin desplazarnos hacia abajo en la página web. 

En este artículo, discutiremos la Fundación CSS Magellan.

Fundación CSS Magallanes Temas:

  • Configuración: Crearemos el Magellan básico.
  • Navegación fija: crearemos Magellan con navegación fija.

Clases básicas de CSS Magellan:

  • data-magellan: Esta clase se utiliza para crear el enlace de la sección.
  • data-magellan-target: esta clase se utiliza para crear la sección objetivo cuando hacemos clic en el enlace.
  • data-magellan-arrival: esta clase se utiliza para crear el Magellan de navegación fija.
  • data-magellan-destination: esta clase se utiliza para crear la sección de destino cuando hacemos clic en el elemento.

Sintaxis:

<ul class="menu" data-magellan>
   ....
</ul>
<div class="sections">
   ....
</div>

Ejemplo 1: El siguiente código demuestra la configuración de Foundation CSS Magellan .

HTML

<!DOCTYPE html>
<html>
<head>
  <title> Foundation CSS Magellan </title>
  <link rel="stylesheet"
        href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
          
   <!-- Compressed JavaScript -->
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
  </script>
  <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" >
  </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;"> GeeksforGeeks    </h1>
        <h3> Foundation CSS Magellan</h3>
    </center>
  
    <ul class="menu" data-magellan>
        <li>
          <a href="#section1">
            GeeksforGeeks 1
          </a>
        </li>
        <li>
          <a href="#section2">
            GeeksforGeeks 2
          </a>
        </li>
        <li>
          <a href="#section3">
            GeeksforGeeks 3
          </a>
        </li>
    </ul>
  
   <div class="sections">
        <section id="section1" data-magellan-target="section1">
          <strong>
            GeeksforGeeks 1
          </strong>
          <p>
            A Computer Science portal for geeks. 
            It contains well written, well thought
            and well explained computer science and
            programming articles.A Computer Science
            portal for geeks.   
          </p>
        </section>
  
        <section id="section2" data-magellan-target="section2">
          <strong>
            GeeksforGeeks 2
          </strong>
          <p>
            With the idea of imparting programming
            knowledge, Mr. Sandeep Jain,an IIT Roorkee 
            alumnus started a dream, GeeksforGeeks.
            A Computer Science portal for geeks.
          </p>
        </section>
  
    <section id="section3" data-magellan-target="section3">
      <strong>
        GeeksforGeeks 3
      </strong>
      <p>
        A Computer Science portal for geeks. 
        It contains well written, well thought
        and well explained computer science and
        programming articles. A Computer Science
        portal for geeks.
      </p>
    </section>
  </div>
  <script>
    $(document).foundation();
  </script>
</body>
  
</html>

Producción:

Configuración básica de CSS Magellan

Ejemplo 2: El siguiente código demuestra Foundation CSS Magellan Sticky Navigation .

HTML

<!DOCTYPE html>
<html>
<head>
  <title> Foundation CSS Magellan </title>
  <link rel = "stylesheet" 
        href = 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css" >
    
  <!-- Compressed JavaScript -->
  <script src = 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js">
  </script>
  <script src = 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js">
  </script>
  <script src = 
"https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js">
  </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">  GeeksforGeeks   </h1>
        <h3>  Foundation CSS Magellan   </h3>
     </center>
  
    <div data-magellan-expedition="fixed">
        <section class = "top-bar-section">
          <div class = "sticky-mag">
            <ul class = "menu" data-magellan>
              <li data-magellan-arrival="section1">
                <a href = "#section1"> 
                  GeeksforGeeks 1
                </a>
              </li>
              <li data-magellan-arrival="section2">
                <a href = "#section2"> 
                  GeeksforGeeks 2
                </a>
              </li>
              <li data-magellan-arrival="section3">
                <a href = "#section3"> 
                  GeeksforGeeks 3
                </a>
              </li>
            </ul>
          </div>
        </section>
      </div> <br> <br> <br>
  
     <a name="section1"></a>
     <h3 data-magellan-destination = "section1">
        GeeksforGeeks 1
     </h3>
     <p>
        A Computer Science portal for geeks. 
        It contains well written, well thought
        and well explained computer science and
        programming articles.A Computer Science
        portal for geeks.   
     </p>
     <p>
        A Computer Science portal for geeks. 
        It contains well written, well thought
        and well explained computer science and
        programming articles.A Computer Science
        portal for geeks.   
     </p>
  
    <a name="section2"></a>
     <h3 data-magellan-destination = "section2">
        GeeksforGeeks 2
     </h3>
     <p>
        With the idea of imparting programming
        knowledge, Mr. Sandeep Jain,an IIT Roorkee 
        alumnus started a dream, GeeksforGeeks.
        A Computer Science portal for geeks.
     </p>
     <p>
        With the idea of imparting programming
        knowledge, Mr. Sandeep Jain,an IIT Roorkee 
        alumnus started a dream, GeeksforGeeks.
        A Computer Science portal for geeks.
     </p>
  
     <a name = "section3"></a>
     <h3 data-magellan-destination = "section3">
        GeeksforGeeks 3
     </h3>
     <p>
        A Computer Science portal for geeks. 
        It contains well written, well thought
        and well explained computer science and
        programming articles. A Computer Science
        portal for geeks. 
     </p>
     <p>
        A Computer Science portal for geeks. 
        It contains well written, well thought
        and well explained computer science and
        programming articles. A Computer Science
        portal for geeks. 
     </p>
     <br> <br> <br><br> <br>
  
     <script>
        $(document).foundation();
     </script>
</body>   
</html>

Producción:

Fundación CSS Magellan Sticky Navigation

Referencia: https://get.foundation/sites/docs/magellan.html

Publicación traducida automáticamente

Artículo escrito por singh_teekam 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 *