{"id":1330,"date":"2024-08-01T18:57:30","date_gmt":"2024-08-01T16:57:30","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1330"},"modified":"2024-08-01T18:57:30","modified_gmt":"2024-08-01T16:57:30","slug":"42-barra-de-navegacion-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/42-barra-de-navegacion-css\/","title":{"rendered":"42. Barra de navegaci\u00f3n CSS"},"content":{"rendered":"\n

Barras de navegaci\u00f3n<\/h2>\n\n\n\n

Tener una navegaci\u00f3n f\u00e1cil de usar es importante para cualquier sitio web. Con CSS<\/strong> puedes transformar men\u00fas HTML aburridos en atractivas barras de navegaci\u00f3n.<\/p>\n\n\n\n\n\n\n\n

Barras de navegaci\u00f3n = Lista de enlaces<\/h2>\n\n\n\n

Una barra de navegaci\u00f3n<\/strong> necesita HTML<\/strong> est\u00e1ndar como base. En nuestros ejemplos construiremos la barra de navegaci\u00f3n a partir de una lista HTML<\/strong> est\u00e1ndar. Una barra de navegaci\u00f3n<\/strong> es b\u00e1sicamente una lista de enlaces<\/strong>, por lo que usar los elementos <ul><\/em><\/strong> y <li><\/em><\/strong> tiene mucho sentido.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<ul>\n<li><a href=\"default.asp\">Home<\/a><\/li>\n<li><a href=\"news.asp\">News<\/a><\/li>\n<li><a href=\"contact.asp\">Contact<\/a><\/li>\n<li><a href=\"about.asp\">About<\/a><\/li>\n<\/ul><\/pre>\n\n\n\n
Ahora eliminemos las vi\u00f1etas<\/strong>, los m\u00e1rgenes<\/strong> y el relleno de la lista, <\/strong>para ello utilizamos el siguiente c\u00f3digo.<\/p>\n\n\n\n
ul {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}<\/pre>\n\n\n\n
Ejm explicado:<\/strong><\/p>\n\n\n\n
    \n
  • list-style-type: none<\/em><\/strong>: – Elimina el marcador de lista. Una barra de navegaci\u00f3n no necesita marcadores de lista.<\/li>\n\n\n\n
  • Establecer margin: 0;<\/em><\/strong> y padding: 0<\/em><\/strong>; para eliminar la configuraci\u00f3n predeterminada del navegador.<\/li>\n<\/ul>\n\n\n\n
    El c\u00f3digo del ejemplo anterior es el c\u00f3digo est\u00e1ndar que se usa en las barras de navegaci\u00f3n verticales y horizontales.<\/p>\n\n\n\n
    Barra de navegaci\u00f3n vertical<\/h2>\n\n\n\n
    Para crear una barra de navegaci\u00f3n vertical<\/strong>, puedes dise\u00f1ar los elementos <a><\/em><\/strong> dentro de la lista.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html lang=\"es\">
      <head>
        <style>
          ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
          }

          li a {
            display: block;
            width: 60px;
            background-color: #ddd;
          }
        <\/style>
      <\/head>

      <body>
        <ul>
          <li><a href=\"#\">Home<\/a><\/li>
          <li><a href=\"#\">Quienes somos<\/a><\/li>
          <li><a href=\"#\">Donde estamos<\/a><\/li>
        <\/ul>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Ejemplo explicado<\/strong><\/p>\n\n\n\n
      \n
    • display: block<\/em><\/strong> –\u00a0Mostrar los enlaces como elementos de bloque hace que se pueda hacer clic en toda el \u00e1rea del enlace (no solo en el texto), y nos permite especificar el ancho (y el relleno, el margen, la altura, etc., si lo deseas).<\/li>\n\n\n\n
    • width: 60px<\/em><\/strong> – Los elementos de bloque ocupan todo el ancho disponible de forma predeterminada. Queremos especificar un ancho de 60 p\u00edxeles..<\/li>\n<\/ul>\n\n\n\n
      Tambi\u00e9n puedes establecer el ancho de <ul><\/em><\/strong> y eliminar el ancho de <a><\/em><\/strong>, ya que ocupar\u00e1n todo el ancho disponible cuando se muestren como elementos de bloque. Esto producir\u00e1 el mismo resultado que nuestro ejemplo anterior.<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      ul {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  width: 60px;\n} \n\nli a {\n  display: block;\n}<\/pre>\n\n\n\n
      Ejm 1 de barra de navegaci\u00f3n vertical<\/h2>\n\n\n\n
      El c\u00f3digo CSS que utilizaremos ser\u00e1 el siguiente:<\/p>\n\n\n\n
      ul {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  width: 200px;\n  background-color: #f1f1f1;\n}\n\nli a {\n  display: block;\n  color: #000;\n  padding: 8px 16px;\n  text-decoration: none;\n}\n\n\/* Cambia el color del enlace al pasar sobre el *\/\nli a:hover {\n  background-color: #555;\n  color: white;\n}<\/pre>\n\n\n\n
      Ejm 2 – Enlace de navegaci\u00f3n activo\/actual<\/h2>\n\n\n\n
      Agrega una clase \u00abactive\u00bb al enlace actual para que el usuario sepa en qu\u00e9 p\u00e1gina se encuentra:<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      <!DOCTYPE html>
      <html>
        <head>
          <style>
            ul {
              list-style-type: none;
              margin: 0;
              padding: 0;
              width: 200px;
              background-color: #f1f1f1;
            }

            li a {
              display: block;
              color: #000;
              padding: 8px 16px;
              text-decoration: none;
            }

            li a.active {
              background-color: #04aa6d;
              color: white;
            }

            li a:hover:not(.active) {
              background-color: #555;
              color: white;
            }
          <\/style>
        <\/head>
        <body>
          <h2>Barra de navegaci\u00f3n vertical<\/h2>
          <p>
            En este ejemplo, creamos una clase \"active\" con un verde color de fondo y
            un texto en blanco. La clase se agrega al enlace \"Home\".
          <\/p>

          <ul>
            <li><a class=\"active\" href=\"#home\">Home<\/a><\/li>
            <li><a href=\"#news\">News<\/a><\/li>
            <li><a href=\"#contact\">Contacto<\/a><\/li>
            <li><a href=\"#about\">Acerca de<\/a><\/li>
          <\/ul>
        <\/body>
      <\/html><\/pre>\n\n\n\n
      Centrar los enlaces y a\u00f1adir bordes<\/h2>\n\n\n\n
      A\u00f1ade a <li><\/em><\/strong> o a <a><\/em><\/strong> el atributo text-align: center<\/em><\/strong> para centrar los enlaces. Agrega la propiedad border<\/em><\/strong> a <ul>,<\/em><\/strong> agrega un borde alrededor de la barra de navegaci\u00f3n. Si tambi\u00e9n deseas bordes dentro de la barra de navegaci\u00f3n, agrega un borde inferior a todos los elementos <li><\/em><\/strong>, excepto al \u00faltimo.<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      <!DOCTYPE html>
      <html>
        <head>
          <style>
            ul {
              list-style-type: none;
              margin: 0;
              padding: 0;
              width: 200px;
              background-color: #f1f1f1;
              border: 1px solid #555;
            }

            li a {
              display: block;
              color: #000;
              padding: 8px 16px;
              text-decoration: none;
            }

            li {
              text-align: center;
              border-bottom: 1px solid #555;
            }

            li:last-child {
              border-bottom: none;
            }

            li a.active {
              background-color: #04aa6d;
              color: white;
            }

            li a:hover:not(.active) {
              background-color: #555;
              color: white;
            }
          <\/style>
        <\/head>
        <body>
          <h2>Barra de navegaci\u00f3n vertical<\/h2>
          <p>
            En este ejemplo, centramos los enlaces de navegaci\u00f3n y agregamos un borde
            a la barra de navegaci\u00f3n.
          <\/p>

          <ul>
            <li><a class=\"active\" href=\"#home\">Home<\/a><\/li>
            <li><a href=\"#news\">News<\/a><\/li>
            <li><a href=\"#contact\">Contact<\/a><\/li>
            <li><a href=\"#about\">About<\/a><\/li>
          <\/ul>
        <\/body>
      <\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
      Barras de navegaci\u00f3n Tener una navegaci\u00f3n f\u00e1cil de usar es importante para cualquier sitio web. Con CSS puedes transformar men\u00fas HTML […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":41,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1330","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Barras de navegaci\u00f3n Tener una navegaci\u00f3n f\u00e1cil de usar es importante para cualquier sitio web. Con CSS puedes transformar men\u00fas HTML […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1330"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1330\/revisions"}],"predecessor-version":[{"id":1333,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1330\/revisions\/1333"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}