Sento Roig: Menu

Mostrando entradas con la etiqueta Menu. Mostrar todas las entradas

¿Cómo se hace...?

Ir a Diseño, Edición de HTML y justo arriba de </head>

<script type="text/javascript">
// http://webvte.cat/
// Creado por Vte Roig.
function mostrarmenuder() {
with(document.getElementById("menuder")) {
style.display = "";
}
return false
}

function cerrarmenuder() {
document.getElementById("menuder")
.style.display = "none";
}
document.oncontextmenu=mostrarmenuder
</script>

/* Menu Clic boton derecho raton */
.menudervte {
position:fixed;
left:100px;
top:150px;
text-align:center;
text-decoration: none;
width:220px;
border:0px;
background-color:#fff;
font-family:Verdana;
cursor:pointer;
line-height: 24px;
z-index:999999999999999999;
}
.menulink {
font-size: 14px;
font-family:Arial, Verdana
height: 24px;
border-bottom:2px solid #000;
background-color:#333;
color:#fff;
}
.menulink:hover {
font-size: 14px;
font-family:Arial, Verdana
height: 24px;
border-bottom:2px solid #39F;
background-color:#555;
color:#39F;
}
.menulinkcerrar {
height: 25px;
border:0;
background-color:transparent;
}

left:100px: distancia desde la izquierda.
top:150px: distancia desde arriba.
text-align:center: texto centrado.
width:220px: ancho del menú.

Link:

background-color:#555: color del fondo.
color:#fff: color del texto.

Link hover:

background-color:#333: color del fondo.
color:#39F: color del texto.

Abajo de <body>

<div class='menudervte' id='menuder' style='display:none'>
<div class='menulinkcerrar' onclick='cerrarmenuder()'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnUdQZ0Z36j1Oq6By0lr6Ijdt63ijJrj15sx1ARwT4gY_o6mlGyAjX2r3kag5cRXyBIPD87UfZYuGYMC9A9w7XPXee507vW6DzKDN8u2tBIkieMRi5ky1CSOba_YDTbjhMjEwBl9ZepbU/s1600/cerrar.png' style='float: right;' title='Cerrar'/></div>

<div class='menulink' onClick='window.open("http://www.webvte.cat/2016/03/3d-panorama-viewer-by-three-js.html","_blank")'>Ejemplo </div>

<div class='menulink' onClick='window.open("Aqui la url de destino/","_blank")'> LINK 2 </div>

<div class='menulink' onClick='window.open("Aqui la url de destino/","_blank")'> LINK 3 </div>

<div class='menulink' onClick='window.open("Aqui la url de destino/","_blank")'> LINK 4 </div>

<div class='menulink' onClick='window.open("Aqui la url de destino/","_self")'> LINK 5 </div>

<div onClick='window.open("http://www.webvte.cat/2016/04/menu-clic-boton-derecho-raton_16.html","_self")' style='float:right;font-size:60%;color:ccc;margin-right:10px;line-height:14px'> Obtener el menú </div>
</div>

Agregar o quitar los link de la siguiente forma:

<div class='menulink' onClick='window.open("http://www.webvte.cat/","_blank")'> LINK Nº </div>

Donde:

_blank: abre el link en otra pestaña.

_self: abre el link en la misma pestaña.

LINK Nº: texto a mostrar.

Guardar plantilla.

Demo

Mas abajo os presento un sencillo menú hecho con css y un poco de html. Pasar el ratón sobre las celdas para visualizar el efecto hover y con un toque me redirecciona al lugar correspondiente.Que en este caso son plantillas web mías.
Instrucciones:
Para adaptarlo solo debemos de cambiar la almohadilla por la direcion adonde queremos dirigir y el texto en rojo por el titulo que queramos.
<a href="#">Inicio</a>
Esto para el html y para el css jugaremos con los colores para el fondo del contenedor cambiar esto #000 color negro marcado en rojo por el color que queramos recordar usar código hexadecimal o bien su palabra inglesa y para la linea k sale al hacer hover debemos de cambiar la palabra orange por la palabra del color que queramos ejemplo red para el rojo gree para el verde blue para el azul etc...

--------------------------------------------------- Aki os dejo el css.--------------------------------

/* Contenedor principal adaptable */
.menudesv {
position: relative;
width: 100%;
max-width: 300px;
min-width: 100px;
overflow: hidden;
margin: 10px auto;
background: #000;
text-align:center;
}
/* Formato de los enlaces */
.menudesv a {
position: relative;
z-index: 2;
display: block;
width: 100%;
padding: 8px;
border: 1px solid #333;
color: white;
font-family: arial;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
/* Ajustes de bordes para no doblar su ancho */
.menudesv a {
border-top: 0;
}
.menudesv a:first-child {
border-top: 1px solid #333 !important;
}
/* Rectángulo que aparecerá al hacer hover */
.marcav {
position: absolute;
top: -30%;
left: 0;
width: 100%;
height: 12.5%;
background: orange;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Sucesos al superponer el puntero */
.menudesv a:hover {
color: #000;
}
.menudesv a:nth-child(1):hover ~ .marcav {
top: 0%;
}
.menudesv a:nth-child(2):hover ~ .marcav {
top: 12.5%; /* (100/nº elementos) * 1 */
}
.menudesv a:nth-child(3):hover ~ .marcav {
top: 25%; /* (100/nº elementos) * 2 */
}
.menudesv a:nth-child(4):hover ~ .marcav {
top: 37.5%; /* (100/nº elementos) * 3 */
}
.menudesv a:nth-child(5):hover ~ .marcav {
top: 50%; /* etc, etc */
}
.menudesv a:nth-child(6):hover ~ .marcav {
top: 62.5%;
}
.menudesv a:nth-child(7):hover ~ .marcav {
top: 75%;
}
.menudesv a:nth-child(8):hover ~ .marcav {
top: 87.5%;
}

-------------------Y Mas abajo el Html.-------------------------------

<div class="menudesv">
<a href="#">Inicio</a>
<a href="#">Pintura</a>
<a href="#">Escultura</a>
<a href="#">Grabados</a>
<a href="#">Música</a>
<a href="#">Danza</a>
<a href="#">Acerca de</a>
<a href="#">Contacto</a>
<div class="marcav"></div>
</div>

----------- Y por ultimo la Demo---------------------------

Inicio Sikuai Sumatera Sunrise DCM Float Unite Dark Collector Boardmarg

En esta ocasión tenemos la posibilidad de ver un menú con forma redonda muy bonito solo tenemos que dar un click en el icono de hamburguesa para verlo trabajar y luego un click en la equis para cerrarlo.

Datos: Clic en Demo para ver como trabaja esta web

Demo

En esta ocasión tenemos la posibilidad de ver un menú de tipo slide muy usado en S.O Android para la web. Solo dar un click en el icono del candado y sin soltar la tecla desliza lo sobre el rosco para elegir la dirección de enlace.

Datos: Clic en Demo para ver como trabaja esta web

Demo

Esta vez os traigo 10 Menús diferentes pulsar en example y numero para cambiar de presentacion.

Datos: Clic en Demo para ver como trabaja esta web

Demo

Esta vez os traigo varias maneras de presentar un menu lateral o sidebar dar un click para abrir y otro para cerrar y mira los diferentes ejemplos.

Datos: Clic en Demo para ver como trabaja esta web

Demo

En esta ocasion os presento un formidable menú circular y un formulario de contacto hecho con css3,Jquery y como no Html5 .

Datos: Click en demo para ver una demostracion

Demo

Sento Roig

Estamos en facebook!

Menú Clic Botón Derecho Raton

Menu Horinzontal con css

Simple Radial Menu

Android Slide Lockscreen

Creative Css3 Animations Menu

Sidebar Transitions

Menu Circular

Labels

Popular Posts

Estamos en facebook!

Follow Us

Labels

Popular Posts