Fundación - Barra superior

Descripción

La barra de herramientas se utiliza para crear un encabezado de navegación en el sitio web.

Ejemplo

El siguiente ejemplo demuestra el uso de la barra superior en Foundation:

<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie = edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />

      <title>Top Bar</title>

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- 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/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <h2>Top Bar Example</h2>

      <div class = "top-bar">
         <div class = "top-bar-left">
            <ul class = "dropdown menu" data-dropdown-menu>
               <li class = "menu-text">Foundation</li>
               <li><a href = "#">Home</a></li>
               <li><a href = "#">About Us</a></li>

               <li class = "has-submenu">
                  <a href = "#">Services</a>
                  <ul class = "submenu menu vertical" data-submenu>
                     <li><a href = "#">Service1</a></li>
                     <li><a href = "#">Service2</a></li>
                     <li><a href = "#">Service3</a></li>
                  </ul>
               </li>

               <li><a href = "#">Contact Us</a></li>
            </ul>
         </div>

         <div class = "top-bar-right">
            <ul class = "menu">
               <li><input type = "search" placeholder = "Search Here"></li>
               <li><button type = "button" class = "button">Search</button></li>
            </ul>
         </div>
      </div>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente top_bar.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page