Como hacer una plantilla de mi menu hola amigos no se si me puedan ayudar con este problema pues les contare estoy haciendo un sitio web y tengo un menu desplegable en css.. pero el punto que quiero
resolver es que cada que modifico agrego o elimino algo del menu tengo que hacerlo en todas las paginas y la verdad es tardado pensaba en hacerlo con una plantilla
pero no puedo pues es algo que no se intente haciendo un css del menu para llamarlo desde html pero no funciono y lo intente con js pero tampoco alguna forma idea libro o alguien que me pueda ayudar lo busque tambien en foros pero la verdad no logro entender nada pues soy nuevo en todo esto de ante mano gracias por la ayuda
les dejo el codigo de como lo intento a ver si alguien me puede ayudar..por favor ;)
<!--Esto en html -->
<link rel="stylesheet" href="js/menu.js" type="text/javascript" />
<!--dentro del body -->
<!--Inicio del menú-->
<ul class="mi-menu">
<li>
<a href="inicio.html"> Inicio </a>
</li>
<li>
<a href=""> Descargas </a>
<ul>
<li><a href="dsoftware.html"> Software </a></li>
<li><a href="dlibros.html"> Libros </a></li>
<li><a href="otros.html"> Otros </a></li>
</ul>
</li>
<li>
<a href="#"> Tutoriales </a>
<ul>
<li><a href="twindows.html"> Windows </a></li>
<li><a href="tlinux.html"> Linux </a></li>
<li><a href="tandroid.html"> Android </a></li>
</ul>
</li>
<li>
<a href="contactanos.html"> Contactanos </a>
</li>
<li>
<a href="nosotros.html"> Nosotros </a>
</li>
<li>
<a href="buscar.html"> Buscar </a>
</li>
</ul>
<!--Fin del menú-->
----
<!--todo lo anterios de "mi.menu" lo intento llamar con este codigo es el mismo de arriba pero en js lo intente en css pero no pude tampoco-->
<script language="Javascript" src="js/menu.js"></script>
------
<!--este es el estilo de css -->
------
.mi-menu {
border-radius: 5px;
list-style-type: none;
margin: 0 auto;
/* si queremos centrarlo */
padding: center;
/* la altura y su ancho */
height: 40px;
width: 770px;
background: #555;
background: -moz-linear-gradient(#555,#222);
background: -webkit-linear-gradient(#555,#222);
background: -o-linear-gradient(#555,#222);
background: -ms-linear-gradient(#555,#222);
background: linear-gradient(#555,#222);
}
.mi-menu br { display:none; }
.mi-menu li {
display: block;
float: left;
height: 40px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.mi-menu li a {
border-left: 1px solid #000;
border-right: 1px solid #666;
color: #EEE;
display: block;
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
line-height: 28px;
padding: 0 28px; /* tamaño 14*/
margin: 6px 0;
text-decoration: none;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.mi-menu li:first-child a { border-left: none; }
.mi-menu li:last-child a{ border-right: none; }
.mi-menu li:hover > a { color: Crimson; }
/* los submenús */
.mi-menu ul {
border-radius: 0 0 5px 5px;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 40px;
background: #222;
background: -moz-linear-gradient(#222,#555);
background: -webkit-linear-gradient(#22,#555);
background: -o-linear-gradient(#222,#555);
background: -ms-linear-gradient(#222,#555);
background: linear-gradient(#222,#555);
-moz-transition: opacity .25s ease .1s;
-webkit-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.mi-menu li:hover > ul { opacity: 1; }
.mi-menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-moz-transition: height .25s ease .1s;
-webkit-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.mi-menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.mi-menu ul li a {
border: none;
border-bottom: 1px solid #111;
margin: 0;
padding: 5px 20px; /* Tamaño subopcion */
width: 90px;
}
.mi-menu ul li:last-child a { border: none; }
Lee algo de introducción sobre ese lenguaje, de capital importancia en el diseño web.
