Saltar al contenido

tutorial simple de barra de navegación html ejemplo de código css

Ejemplo: barra de navegación html

<!-- How to create a navigation bar:
 This is the html file:

 Put the in the html file/page you are coding in
 (e.g. put the in the Home.html file)
 To position a page link to the right do
-->
<body>
<ul>
  <li><a href="https://foroayuda.es/Home.html">Home</a></li>
  <li><a href="https://foroayuda.es/Page1.html">Page1</a></li>
  <li><a href="https://foroayuda.es/Page2.html">Page2</a></li>
  <li ><a href="https://foroayuda.es/About.html">About</a></li>
</ul>
</body>

<!-- This is the css file:
 (have a play with the colours and features!)-->
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  font-family: arial;
  text-align: left;
  width: 100%;
  position: sticky;
  top: 0;
}
ul.topnav li {float: left;}
ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  float: left;
  font-size: 17px;
  border-right: 1px solid #bbb;
}
ul.topnav li a:hover:not(.active) {
	background-color: #ddd;
    color: black;
}
ul.topnav li a.active {
	background-color: #4CAF50;
}
ul.topnav li.right {
	float: right;
}
@media screen and (max-width: 720px) {
  ul.topnav li{
	  width: 100%;
  }
  ul.topnav a{
	  width: 100%;
  }
}
<!-- END -->
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

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