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)