usuarios online
-------------------------------------------Menu1---------------------------------------------- 1:
Menu vertical con SubPestañas hecho solo con CSS: Este es un menú vertical con subpestañas hecho sólo con CSS, no tiene nada de Javascript o de alguna librería, así que para aquellos que prefieren las cosas simples esta es una buena opción para organizar las etiquetas del blog o cualquier enlace. Ejemplo: Pestaña 1 Pestaña 2 Pestaña 3 Pestaña 4 Pestaña 5 Bueno pues para colocarlo primero tenemos que colocar este siguiente codigo en Css-code sin stylo tags: /* Menú vertical con subpestañas ----------------------------------------------- */ #menuvertical { text-align: center; width:100%; } #menuvertical ul { list-style-type: none; padding:0;} #menuvertical ul li.nivel1 { width: 162px; /* Ancho de las pestañas */ } #menuvertical ul li.primera { border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */ } #menuvertical ul li {padding:0;} #menuvertical ul li a { display: block; text-decoration: none; color: #fff; /* Color del texto */ background-color: #045FB4; /* Color de fondo */ border: solid 1px #fff; /* Borde de las pestañas */ border-top: none; padding: 8px; position: relative; } #menuvertical ul li:hover { position: relative; color: #000; /* Color del texto al pasar el mouse */ } #menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 { background-color: #6E6E6E; /* Color de fondo al pasar el mouse */ color: #000; position: relative; } #menuvertical ul li a.nivel1 { display: block!important; display: none; position: relative; } #menuvertical ul li ul { display: none; } #menuvertical ul li a:hover ul, #menuvertical ul li:hover ul { display: block; position: absolute; left: 161px; top:-1px!important; top:-31px; } #menuvertical ul li ul li a { width: 160px; background-color: #045FB4; /* Color de fondo subpestañas */ color: #fff; /* Color del texto subpestañas */ } #menuvertical ul li ul li a:hover { position: relative; background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */ color: #000; /* Color del texto al pasar el mouse subpestañas */ } Ahora coloca este codigo en donde quieres que aparesca el menu en HTML. Edita todo lo que diga URL DEL ENLACE y PESTAÑA. En url del enlace coloca el link dela seccion que quieres ir. y en donde diga pestaña ahi colocas los nombres de la seccion. y Listo tienes tu menu nuevo. -------------------------------------------Menu3------------------------------------------- 3: Menu horizontal NEGRO: Este es un menú horizontal negro. El autor es Dynamicdrive y está basado en librería jQuery. Es un menú muy elegante puedes ver un ejemplo abajo. Ejemplo: Pestaña 1 Pestaña 2 Pestaña 3 Pestaña 4 Pestaña 5 Pestaña 6 Bueno para colocarlo en la web primero tenemos que copiar el siguiente codigo y pegarlo en Texto por abajo de la pagina: Ahora coloca el siguiente codigo en donde quieres que aparesca el menu en HTML. Edita donde diga [ # y PESTAÑAS ]. En (#) ahi colocas el link de la seccion a donde quieres ir. Y en pestañas colocas el nombre de cada seccion. y Listo. ------------------------------------------------Menu4-------------------------------------------------- 4: Menu desplegable: Este menú desplegable es muy bueno puedes ver un ejemplo abajo de esta imformacion. Ejemplo: Para colocarlo en la web tenemos que copiar el siguiente codigo y pegarlo en donde quieras que aparesca el menu en HTML:
Edita todo lo que este en MAYUSCULA.
-------------------------------------------Menu5----------------------------------------------
5: Menu horizontal VERDE:
Bueno pues aqui dejando otro nuevo menu para su pagina web. Abajo de esta imformacion les dejo el ejemplo del menu.
Ejemplo:
MENU MENU MENU MENU MENU MENU
Bueno para colocarlo en la web colocamos el siguiente codigo en donde quieras que aparesca el menu en HTML:
Edita donde diga [ # y MENU ]. En (#) ahi colocas el link de la seccion a donde quieres ir. Y en (menu) colocas el nombre de cada seccion. y Listo.
-------------------------------------------Menu6----------------------------------------------
6: Menu horizontal AMARILLO:
Aqui les dejo este nuevo menu de color AMARILLO.Abajo de esta imformacion les dejo un ejemplo del menu.
Ejemplo:
MENU MENU MENU MENU MENU MENU
Bueno para colocarlo en la web colocamos el siguiente codigo en donde quieras que aparesca el menu en HTML:
Edita donde diga [ # y MENU ]. En (#) ahi colocas el link de la seccion a donde quieres ir. Y en (menu) colocas el nombre de cada seccion. y Listo.
-------------------------------------------Menu7----------------------------------------------
7: Menu horizontal AZUL:
Bueno aqui otro menu espero les guste.
Ejemplo:
MENU 1
MENU 2
MENU 3
MENU 4
MENU 5
MENU 6
MENU 7
Bueno para colocarlo en la web colocamos el siguiente codigo en donde quieras que aparesca el menu en HTML:
Edita donde diga [ # y MENU ]. En (#) ahi colocas el link de la seccion a donde quieres ir. Y en (menu) colocas el nombre de cada seccion. y Listo.
-------------------------------------------Menu8----------------------------------------------
8: Menu estilo dock:
Este menu es muy bueno es estilo dock casi todas las computadoras tienen este menu pero ahora nosotros no nadamos lo tengremos en la pc si no que tambien en nuestra web. Abajo de esta imformacion les dejo un ejemplo.
Ejemplo:
Bueno para colocarlo en la web colocamos el siguiente codigo en Css-code sin stylo tags:
#dock {
position: top;
bottom: 1em;
width: 100%;
text-align: center;
left: 0px;
}
#dock a:visited{
text-decoration: none;
}
#dock a{
text-decoration: none;
margin: -2px;
}
#dock img {
border: none;
width: 0px;
}
#legend {
position: top;
bottom: 0px;
width: 100%;
text-align: center;
font-family: arial;
font-weight: bold;
font-size: 1em;
color: #000;
}
Ahora colocamos el siguiente codigo en Texto por encima de la pagina:
Y por ultimo colocamos el codigo del menu en donde lo queramos poner en Texto por encima de la pagina o en Texto por abajo o en Fuente HTML. Donde mas te guste:
Edita donde diga [ LINK y NOMBRE ]. En (Link) ahi colocas la url de la seccion a donde quieres ir. Y en (Nombre) colocas el nombre de cada seccion. y Listo. -------------------------------------------Menu9---------------------------------------------- 9: Menu horizontal animado con descripcion en cada enlace : Este menu es muy bueno ya que cuando pasas el cursor sobre el se desplaza lentamente. Ejemplo: Menu 1 Descripción 1 Menu 2 Descripción 2 Menu 3 Descripción 3 Menu 4 Descripción 4 Bueno para colocarlo en la web primero colocamos el siguiente codigo en Css-code sin stylo tags: #menu-soft { width:100%; padding:0; color:#d9d9d9; font-family: Century Gothic; overflow:hidden; background:#222; } #menu-soft ul { width:940px; margin:0auto; } #menu-soft a { color:#d9d9d9; font-weight:normal; } #menu-soft ul { list-style:none; display:block; margin:0; padding:0; } #menu-soft li { float:left; padding:10px; display:block; width:100px; border-left:1px solid #2d2d2d; /*Duración de transiciones*/ -moz-transition: 0.7s; -webkit-transition: 0.7s; -o-transition:0.7s; transition: 0.7s; } #menu-soft li:hover { padding-left:50px; cursor:pointer; background:#1bb1bb; } #menu-soft li:hover a { color:#fff; text-shadow:1px 1px #222, 2px 2px #222; 3px 3px #222; 4px 4px #222; } #menu-soft li span { font-size:24px; } Y por ultimo colocamos el codigo del menu en donde lo queramos poner en Texto por encima de la pagina o en Texto por abajo o en Fuente HTML. Donde mas te guste:
Edita donde diga [ #,Menu y Descripcion ]. En (#) ahi colocas la url de la seccion a donde quieres ir. en (Menu) colocas el nombre de cada seccion. y en (Descripcion) ahy colocas una imformacion sobre el enlace y Listo. -------------------------------------------Menu10---------------------------------------------- 10: Menu horizontal desplegable animado : En esta oportunidad les traigo un nuevo menu horizontal desplegable animado echo con Css y Jquery. Ejemplo: Menu 1 Menu 2 Pestaña 1 Pestaña 2 Pestañae 3 Pestaña 4 Menu 3 Menu 4 Menu 5 Pestaña 1 Pestañae 2 Pestaña 3 Pestaña 4 Menu 6 Bueno para colocarlo en la web primero colocamos el siguiente codigo en Css-code sin stylo tags: #menu-desplegable { /*Menú General*/ font-family: Century Gothic, sans-serif; height:40px; width:500px; margin:0px auto; font-size:14px; background: #1c1c1c url(http://4.bp.blogspot.com/--luWspXR04w/TmhEynzC9TI/AAAAAAAAABg/JufV_mWKN0w/s1600/noise.png); } #menu-superior { /*Primer menú*/ list-style:none; height:40px; margin:0px auto; overflow:hidden; } #menu-superior li { /*Cada elemento*/ float:left; list-style:none; } #menu-superior li a { /*Enlace de cada elemento*/ display:block; padding:9px 10px; text-decoration:none; color:#fff; font-weight:normal; } #menu-superior li a:hover { /*Enlace de cada elemento al pasar el mouse*/ color:#ccc; background: #CC0000; } #menu-superior ul.submenu { /*Submenu*/ border-color:none; border-radius:10px; padding:5px; margin-top:-2px; position:absolute; list-style:none; box-shadow:1px 1px 1px 1px #f5f5f5; background: #f5f5f5; } #menu-superior ul.submenu li { /*Elementos del submenu*/ float:none; padding:2px; width:200px; margin:0px; } #menu-superior ul.submenu li a { /*Enlaces del submenu*/ color:#2d2d2d; } #menu-superior ul.submenu li a:hover { /*Enlaces del submenu al pasar el cursor*/ color:#ccc; } Ahora colocamos este codigo en Texto por encima de la pagina: Y por ultimo colocamos el codigo del menu en donde lo queramos poner en Texto por encima de la pagina o en Texto por abajo o en Fuente HTML. Donde mas te guste:
Edita donde diga [ #,Menu y Pestaña ]. En (#) ahi colocas la url de la seccion a donde quieres ir. en (Menu) colocas el nombre de cada seccion. y en (Pestaña) Colocas el nombre de las pestañas que se abren cuando pasas el cursor. -------------------------------------------Menu11---------------------------------------------- 11: Menu vertical desplegable flotante con pestañas : Este es un menú vertical desplegable que aparece en la parte izquierda dela web, de forma flotante, y que tiene un efecto deslizante al pasar el cursor por cada una de sus pestañas. Es idóneo para agregar enlaces a las redes sociales o para las páginas dela web, aunque en realidad puede usarse para enlazar a cualquier sitio que queramos osea para colocar banners.Bueno pues para ver el ejemplo del menu pincha AQUI. Bueno para colocarlo en la web primero colocamos el siguiente codigo en Texto por encima de la pagina. Bueno pues como ven en el ejemplo del menu tiene unas imagenes las imagenes se las van a tener que poner usted Osea yo se las deje libre para que ustedes pueden colocar su banner o el banner de otra web o una imagen de sus redes sociales. Bueno pues para poner las imagenes solo edita donde diga "URL DE LA IMAGEN" Y ahy colocas el enlace de la imagen. Importante: Para que se vean bien las imagenes haslas del tamaño 80x80.
Y por ultimo colocamos el codigo del menu en donde lo queramos poner en Texto por encima de la pagina o en Texto por abajo o en Fuente HTML. Donde mas te guste:
Edita donde diga [ URL DEL ENLACE ]. Hay colocamos el enlace a donde quieres que nos lleve la imagen cuando demos click. -------------------------------------------Menu12---------------------------------------------- 12: Menu horizontal desplegable con subpestañas y con efecto de opacidad: Bueno pues aqui les dejo otro menu espero les guste. Ejemplo: TITULO TITULO Bueno para colocar el codigo del menu lo pondemos poner en Texto por encima de la pagina o en Texto por abajo o en Fuente HTML. Donde mas te guste:
Edita donde diga [ ENLACE,TITULO Y URL ]. En "Enlace" coloca el nombre de la pestaña. En "Titulo" Ahy colocas el Nombre dela seccion. y donde dice "Url" Ahy colocas el link a donde quieres que te lleve la pestaña cuando den click.
darmiento147
Menus
Bueno pues aqui otra seccion llamada MENUS en esta seccion encontraras varios menus para tu pagina web solo tienes que aser lo que te indica y listo tengras tu menu nuevo en tu web.-------------------------------------------Menu1---------------------------------------------- 1:
Menu vertical con SubPestañas hecho solo con CSS: Este es un menú vertical con subpestañas hecho sólo con CSS, no tiene nada de Javascript o de alguna librería, así que para aquellos que prefieren las cosas simples esta es una buena opción para organizar las etiquetas del blog o cualquier enlace. Ejemplo: Pestaña 1 Pestaña 2 Pestaña 3 Pestaña 4 Pestaña 5 Bueno pues para colocarlo primero tenemos que colocar este siguiente codigo en Css-code sin stylo tags: /* Menú vertical con subpestañas ----------------------------------------------- */ #menuvertical { text-align: center; width:100%; } #menuvertical ul { list-style-type: none; padding:0;} #menuvertical ul li.nivel1 { width: 162px; /* Ancho de las pestañas */ } #menuvertical ul li.primera { border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */ } #menuvertical ul li {padding:0;} #menuvertical ul li a { display: block; text-decoration: none; color: #fff; /* Color del texto */ background-color: #045FB4; /* Color de fondo */ border: solid 1px #fff; /* Borde de las pestañas */ border-top: none; padding: 8px; position: relative; } #menuvertical ul li:hover { position: relative; color: #000; /* Color del texto al pasar el mouse */ } #menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 { background-color: #6E6E6E; /* Color de fondo al pasar el mouse */ color: #000; position: relative; } #menuvertical ul li a.nivel1 { display: block!important; display: none; position: relative; } #menuvertical ul li ul { display: none; } #menuvertical ul li a:hover ul, #menuvertical ul li:hover ul { display: block; position: absolute; left: 161px; top:-1px!important; top:-31px; } #menuvertical ul li ul li a { width: 160px; background-color: #045FB4; /* Color de fondo subpestañas */ color: #fff; /* Color del texto subpestañas */ } #menuvertical ul li ul li a:hover { position: relative; background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */ color: #000; /* Color del texto al pasar el mouse subpestañas */ } Ahora coloca este codigo en donde quieres que aparesca el menu en HTML. Edita todo lo que diga URL DEL ENLACE y PESTAÑA. En url del enlace coloca el link dela seccion que quieres ir. y en donde diga pestaña ahi colocas los nombres de la seccion. y Listo tienes tu menu nuevo. -------------------------------------------Menu3------------------------------------------- 3: Menu horizontal NEGRO: Este es un menú horizontal negro. El autor es Dynamicdrive y está basado en librería jQuery. Es un menú muy elegante puedes ver un ejemplo abajo. Ejemplo: Pestaña 1 Pestaña 2 Pestaña 3 Pestaña 4 Pestaña 5 Pestaña 6 Bueno para colocarlo en la web primero tenemos que copiar el siguiente codigo y pegarlo en Texto por abajo de la pagina: Ahora coloca el siguiente codigo en donde quieres que aparesca el menu en HTML. Edita donde diga [ # y PESTAÑAS ]. En (#) ahi colocas el link de la seccion a donde quieres ir. Y en pestañas colocas el nombre de cada seccion. y Listo. ------------------------------------------------Menu4-------------------------------------------------- 4: Menu desplegable: Este menú desplegable es muy bueno puedes ver un ejemplo abajo de esta imformacion. Ejemplo: Para colocarlo en la web tenemos que copiar el siguiente codigo y pegarlo en donde quieras que aparesca el menu en HTML:
Programas
Votar
