Navbar antiguo de este blog

• Inicio
• Contacto
• Programación
  Curso HTML Curso CSS Curso PHP Curso SQL Curso C# Curso Jquery Curso Ajax Curso Javascript Curso Pyton
• Refrigeración
  Curso de Refrigeración Industrial Refrigeración
• Electrónica
  Curso de Electrónica Básica Curso de Electricidad Temas de Electricidad
• Codigos_Prontos
  Indice de codigos
• Blogger
• Sobre Mí

Para crear un navbar como lo de este blog, hace falta dos cosas:

La primera los estilos css del navbar.

Nota: se pueden modificar

    <style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
      
  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }
.ul_barra {
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: #0303a5;

   }
   
   .li_barra {
     float: left;
   }
   
   .li_barra .a_barra, .dropbtn {
     display: inline-block;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
   }
   
   .li_barra .a_barra:hover, .dropdown:hover .dropbtn {
     background-color: red;
   }
   
   .li_barra .dropdown {
     display: inline-block;
   }
   
   .dropdown-content {
     display: none;
     position: relative;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:1;
   }
   
   .dropdown-content .a_barra {
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
   }
   
   .dropdown-content .a_barra:hover {background-color: #f1f1f1;}
   
   .dropdown:hover .dropdown-content {
     display: block;
   }
 </style>
    

...

La segunda: el codigo del navbar.

En esta ocasion sera el navbar superior de este blog

Codigo del navbar

<div class="container">
  <ul class="ul_barra">
    <li class="li_barra"><a class="a_barra" href="https://frioyelectronica.blogspot.com/p/inicio.html">Inicio</a></li>
    <li class="li_barra"><a class="a_barra" href="https://frioyelectronica.blogspot.com/p/contactame.html">Contacto</a></li>
    <li class="dropdown li_barra">
      <a href="javascript:void(0)" class="dropbtn a_barra">Programación</a>
      <div class="dropdown-content">
        <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/curso-html.html">Curso HTML</a>
        <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/curso-css-index.html">Curso CSS</a>
        <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/curso-de-php-indice.html">Curso PHP</a>
        <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/curso-sql-indice.html">Curso SQL</a>
        <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/curso-c.html">Curso C#</a>
        <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/curso-jquery.html">Curso Jquery</a>
  <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/curso-ajax.html">Curso Ajax</a>
        <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/curso-javascript.html">Curso Javascript</a>
      </div>
    </li>
    <li class="dropdown li_barra">
      <a href="javascript:void(0)" class="dropbtn a_barra">Refrigeración</a>
      <div class="dropdown-content">
        <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/curso-de-refrigeracion-industrial-index.html">Curso de Refrigeración Industrial</a>
        <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/refrigeracion.html">Refrigeración</a>
      </div>
    </li>
    <li class="dropdown li_barra">
      <a href="javascript:void(0)" class="dropbtn a_barra">Electrónica</a>
      <div class="dropdown-content">
        <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/curso-de-electronica.html">Curso de Electrónica Básica</a>
        <a class="a_barra" href="https://frioyelectronica.blogspot.com/p/curso-electricidad-index.html">Curso de Electricidad</a>
        <a class="a_barra" href="#">Temas de Electricidad</a>
      </div>
    </li>
    <li class="dropdown li_barra">
      <a href="javascript:void(0)" class="dropbtn a_barra">Codigos_Prontos</a>
      <div class="dropdown-content">
        <a class="a_barra" href="#"></a>
            
      </div>
    </li>
    <li class="li_barra"><a class="a_barra" href="https://frioyelectronica.blogspot.com/p/blogguer-index.html">Blogger</a></li>
    <li class="li_barra"><a class="a_barra" href="https://frioyelectronica.blogspot.com/p/1-pagina.html">Sobre Mí</a></li>
  </ul>
</div>

Ir al indice