Saltar al contenido

Cómo crear el menú de la barra lateral usando HTML CSS y Jquery _ Ejemplo de código de diseño del menú de la barra lateral

Recabamos en diferentes espacios para así mostrarte la respuesta para tu problema, si continúas con alguna difcultad puedes dejar tu duda y te contestamos con gusto, porque estamos para servirte.

Ejemplo: menú de la izquierda de HTML

<!HTML,laterCSS,thenJavascript>DOCTYPEhtml><html><head><scriptsrc="YourScript.js">script><linkhref="YourCSSDocument.css"rel="stylesheet"type="text/css"media="screen"/><style>bodyfont-family:"Lato", sans-serif;.sidenavheight:100%;width:200px;position: fixed;z-index:1;top:0;left:0;background-color:#464850;overflow-x: hidden;padding-top:20px;.sidenav apadding:6px8px6px16px;text-decoration: none;font-size:25px;color:#818181;display: block;.sidenav a:hovercolor:#f1f1f1;.mainmargin-left:200px;/* Same as the width of the sidenav */font-size:20px;/* Increased text to enable scrolling */padding:0px10px;@media screen and(max-height:450px).sidenavpadding-top:15px;.sidenav afont-size:18px;style>head><body><divclass="sidenav"><buttononclick="Link1()"class="buttonActivMenu"><h3>Link 1h3>a>button><buttononclick="Link2()"class="buttonMenuWithUndercategory"><h3>link2h3>a>button><buttononclick="Link2.1()"class="buttonSecondMenu">link2.1a>button><buttononclick="Link2.2()"class="buttonLastSecondMenu">link2.2a>button>div><divclass="main">
      Your text and images here
div>body>html><!NowtheCSSpart:>

.buttonMenu 
  background-color: #464850;
  border: none;
  border-bottom: 1px solid lightgrey;
  color: lightgrey;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.2s;
  font-family:Arial;
  width: 200px;
  height: 50px;

.buttonMenu:hover 
  background-color: grey;
  color: black;

.buttonMenuWithUndercategory 
  background-color: #464850;
  border: none;
  border-bottom: 1px dashed lightgrey;
  color: lightgrey;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.2s;
  font-family:Arial;
  width: 200px;
  height: 50px;

.buttonMenuWithUndercategory:hover 
  background-color: grey;
  color: black;

.buttonSecondMenu 
  background-color: #464850;
  border: none;
  border-bottom: 1px dashed lightgrey;
  color: lightgrey;
  text-align: right;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.2s;
  font-family:Arial;
  width: 200px;
  height: 30px;

.buttonSecondMenu:hover 
  background-color: grey;
  color: black;

.buttonLastSecondMenu 
  background-color: #464850;
  border: none;
  border-bottom: 2px solid lightgrey;
  color: lightgrey;
  text-align: right;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.2s;
  font-family:Arial;
  width: 200px;
  height: 30px;

.buttonLastSecondMenu:hover 
  background-color: grey;
  color: black;

.buttonActivMenu 
  background-color: #797c88;
  border: none;
  border-bottom: 1px solid lightgrey;
  color: lightgrey;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.2s;
  font-family:Arial;
  width: 200px;
  height: 50px;


<!Nowjavascript:>
  

function Link1()
	window.location.href = "Link1";

function Link2()
	window.location.href = "Link2";

function Link2.1()
	window.location.href = "Link2.1";

function Link2.2()
	window.location.href = "Link2.2";

Sección de Reseñas y Valoraciones

¡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.