Saltar al contenido

barra de menú lateral en el ejemplo de código de bootstrap 4

Este grupo de especialistas despúes de varios días de trabajo y recopilar de información, obtuvimos los datos necesarios, esperamos que te sea útil para tu proyecto.

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";

Acuérdate de que tienes concesión de comentar si te fue de ayuda.

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