Menú contextual sencillo con HTML5, CSS3 y JavaScript (jQuery)
Un menú contextual es una lista de comando alternativos que aparece al hacer clic sobre el botón secundario del mouse sobre un elemento especifico. Esta mostrará ciertas funciones que se pueden hacer con dicho elemento, es de suma importancia en los sistemas operativos pues mejorar la navegabilidad del usuario en el mismo, no es posible mencionar algún sistema operativo que no cuente con ellos.
Así como existen menúes contextuales para los sistemas operativos, es posible también que existan en la web, por supuesto, lleva cierto trabajo, a diferencia de lo que implicaría programar estos en IDE's como Visual Studio para .NET o C# o incluso NetBeans para Java, que son trabajados de forma mas visual. Programarlos requiere del uso de 3 lenguajes sumamente sencillos, y que todo programador web debe conocer, HTML, CSS y JavaScript, específicamente hablando, del framework jQuery que tanta gracia ha proporcionado a la internet.
Antes de comenzar, te dejo una demo por acá
Codigo HTML
Este código debe ser introducido entre las etiquetas <body> ... </body> de la pagina.
<div id="outer-wrapper" onclick="ocultarMenu('menu-contextual');" oncontextmenu="mostrarMenu(event, this.id, 'menu-contextual');return false;">
</div>
<ul id="menu-contextual" oncontextmenu="return false;">
<li>Paginas de Busqueda<span></span>
<ul>
<li onclick="location.href='http://google.com'">Google</li>
<li onclick="location.href='http://yahoo.com'">Yahoo!</li>
<li onclick="location.href='http://bing.com'">Bing</li>
</ul>
</li>
<li class="separador">Redes Sociales<span></span>
<ul>
<li onclick="location.href='http://facebook.com'">Facebook</li>
<li onclick="location.href='http://twitter.com'">Twitter</li>
<li onclick="location.href='http://googleplus.com'">Google Plus</li>
</ul>
</li>
<li onclick="window.history.forward()">Adelante</li>
<li onclick="window.history.back()">Atras</li>
<li>Favoritos<span></span>
<ul>
<li onclick="location.href='http://frikiblogeeo.blogspot.com'">Friki Bloggeo</li>
<li onclick="location.href='http://blogger.com'">Blogger</li>
<li onclick="location.href='http://gmail.com'">Gmail</li>
</ul>
</li>
</ul>
Si pueden observar, la sección del menú contextual tiene la misma estructura que tiene un menú desplegable, en este caso vertical, la única diferencia seria en este caso aplicarle correctamente los estilos CSS para que este se ajuste al diseño de los menúes contextuales que vemos en los sistemas operativos como Windows o cualquier otro
Codigo CSS
* {
margin:0 auto;
padding:0 auto;
}
#outer-wrapper {
background:transparent;
position:absolute;
width:100%;
height:100%;
}
ul#menu-contextual {
display:none;
background:white;
font-family:Verdana, Arial, "Times New Roman", sans-serif;
font-size:12px;
color:black;
border:1px solid #CCC;
box-shadow:5px 5px 0px rgba(0,0,0,.1);
-ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
}
ul#menu-contextual ul {
display:none;
background:white;
font-family:Verdana, Arial, "Times New Roman", sans-serif;
font-size:12px;
color:black;
border:1px solid #CCC;
padding:2px 9px 2px 2px;
box-shadow:5px 5px 0px rgba(0,0,0,.1);
-ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
}
ul#menu-contextual li:hover {
background:#CCC;
word-wrap:break-word;
}
ul#menu-contextual li:hover > ul {
display:block;
}
.separador {
border-bottom:1px solid #ccc;
}
Hasta ahora no tenemos mas que un menú desplegable oculto dentro de nuestra pagina, que es necesario ser mostrado al oprimir el clic secundario de nuestro mouse, y que aparezca justamente en sitio de la pantalla donde hemos hecho el clic, esta magia la hacemos con lo siguiente
Codigo JS
/*
* Autor: Anthony Medina
* Email: anthonyjmedinaf@gmail.com
* Blog: http://frikibloggeo.blogspot.com
*/
function mostrarMenu(event, id, menu_id) {
var posX, posY, span; // Declaracion de variables
posX = event.pageX; // Obtenemos pocision X del cursor
posY = event.pageY; // Obtenemos pocision Y del cursor
// Hacemos aparecer el menu contextual
$('#' + menu_id).fadeIn('fast');
// Flecha que indica submenues
span = $('#' + menu_id + " span");
span.html("»");
// Editando el codigo CSS para ciertos elementos
span.css({float: 'right',marginRight: '12px'});
$('#' + menu_id).css({position: 'absolute',display: 'block',top: posY,left: posX,cursor: 'default',width: '200px',height: 'auto',padding: '2px 9px 2px 2px',listStyle: 'none',listStyleType: 'none'});
$('#' + menu_id + " li").css({width:'100%',height:'auto',margin:'0 auto',padding:'3px 0px 3px 7px',wordWrap:'break-word'});
$('#' + menu_id + " li ul").css({listStyle:'none',listStyleType:'none',cursor:'default',position:'absolute',left:'212px',marginTop:'-20px',width:'200px',height:'auto',padding:'2px 9px 2px 2px'});
}
function ocultarMenu(menu_id) {
$('#' + menu_id).fadeOut('fast');
}
Y no olviden, lo mas importante, colocar esta pequeña linea justo debajo del <head> de la página web.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Por último, les dejo el código completo para mayor facilidad
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu Contextual</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
/*
* Autor: Anthony Medina
* Email: anthonyjmedinaf@gmail.com
* Blog: http://frikibloggeo.blogspot.com
*/
function mostrarMenu(event, id, menu_id) {
var posX, posY, span; // Declaracion de variables
posX = event.pageX; // Obtenemos pocision X del cursor
posY = event.pageY; // Obtenemos pocision Y del cursor
// Hacemos aparecer el menu contextual
$('#' + menu_id).fadeIn('fast');
// Flecha que indica submenues
span = $('#' + menu_id + " span");
span.html("»");
// Editando el codigo CSS para ciertos elementos
span.css({float: 'right',marginRight: '12px'});
$('#' + menu_id).css({position: 'absolute',display: 'block',top: posY,left: posX,cursor: 'default',width: '200px',height: 'auto',padding: '2px 9px 2px 2px',listStyle: 'none',listStyleType: 'none'});
$('#' + menu_id + " li").css({width:'100%',height:'auto',margin:'0 auto',padding:'3px 0px 3px 7px',wordWrap:'break-word'});
$('#' + menu_id + " li ul").css({listStyle:'none',listStyleType:'none',cursor:'default',position:'absolute',left:'212px',marginTop:'-20px',width:'200px',height:'auto',padding:'2px 9px 2px 2px'});
}
function ocultarMenu(menu_id) {
$('#' + menu_id).fadeOut('fast');
}
</script>
<style type="text/css">
* {
margin:0 auto;
padding:0 auto;
}
#outer-wrapper {
background:transparent;
position:absolute;
width:100%;
height:100%;
}
ul#menu-contextual {
display:none;
background:white;
font-family:Verdana, Arial, "Times New Roman", sans-serif;
font-size:12px;
color:black;
border:1px solid #CCC;
box-shadow:5px 5px 0px rgba(0,0,0,.1);
-ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
}
ul#menu-contextual ul {
display:none;
background:white;
font-family:Verdana, Arial, "Times New Roman", sans-serif;
font-size:12px;
color:black;
border:1px solid #CCC;
padding:2px 9px 2px 2px;
box-shadow:5px 5px 0px rgba(0,0,0,.1);
-ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
}
ul#menu-contextual li:hover {
background:#CCC;
word-wrap:break-word;
}
ul#menu-contextual li:hover > ul {
display:block;
}
.separador {
border-bottom:1px solid #ccc;
}
</style>
</head>
<body>
<div id="outer-wrapper" onclick="ocultarMenu('menu-contextual');" oncontextmenu="mostrarMenu(event, this.id, 'menu-contextual');return false;">
</div>
<ul id="menu-contextual" oncontextmenu="return false;">
<li>Paginas de Busqueda<span></span>
<ul>
<li onclick="location.href='http://google.com'">Google</li>
<li onclick="location.href='http://yahoo.com'">Yahoo!</li>
<li onclick="location.href='http://bing.com'">Bing</li>
</ul>
</li>
<li class="separador">Redes Sociales<span></span>
<ul>
<li onclick="location.href='http://facebook.com'">Facebook</li>
<li onclick="location.href='http://twitter.com'">Twitter</li>
<li onclick="location.href='http://googleplus.com'">Google Plus</li>
</ul>
</li>
<li onclick="window.history.forward()">Adelante</li>
<li onclick="window.history.back()">Atras</li>
<li>Favoritos<span></span>
<ul>
<li onclick="location.href='http://frikiblogeeo.blogspot.com'">Friki Bloggeo</li>
<li onclick="location.href='http://blogger.com'">Blogger</li>
<li onclick="location.href='http://gmail.com'">Gmail</li>
</ul>
</li>
</ul>
</body>
</html>
Eso es todo.
Enlaces para compartir en tu blog o pagina web.
![[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK06o3qxRgndTN83gagg5xMy8Y0s4rg9GCiBabAgKpoFDpCUkp8Al_rfR6HKBuaEHmmst0IOnxKE7V2kHfX63AoPgzF_mZQ-nZ-Bkj4vdbhyphenhyphenPMU_bP1Dk_0ZJf_4_NgJh7dzseZHN7Okh/s72-c/calculadora.JPG "[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)")
Are you dealing sign up the error in Binance? In order to resolve to Sign up errors, you can always talk to the skilled and talented professionals who are always working and have got a hand in eliminating the problems in no time. Dial Binance support number and avail plenty of ideas and trustworthy solutions from the professionals who have gain mastery in dealing with every sort of Binance query. So fix Binance Support Number your all doubts or resolve all your queries in the fraction of time. You can avail the customer services 24/7 throughout the year without any discontinuity.
ResponderEliminarThe network connection errors or connectivity issues can’t be resolved by the users because of the less technical knowledge about Blockchain. To handle all the network issues, you must seek advice from someone who is not only experienced in this domain but also have vast knowledge about Blockchain. Dial Blockchain support number and avail all kind of solutions related to the errors that create hindrance in Blockchain Support NUmber your work. The customer care will deliver end to end assistance and even latest techniques and hacks that can help in erasing your issue in no time.
ResponderEliminarThe network connection errors or connectivity issues can’t be resolved by the users because of the less technical knowledge about Gemini. To handle all the network issues, you must seek advice from someone who is not only experienced in this domain but also have vast knowledge about Gemini. Dial Gemini support number and avail all kind of solutions related to the errors that create hindrance in your work. The customer care will deliver end to end assistance and even latest techniques and hacks that can help in erasing your issue in no time.
ResponderEliminarHave you ever got trapped in login issues in Binance? Login issues are quite sensitive and can damage the account on a bigger extent at login time. If you want to have a variety of solutions and strategies to eliminate this Binance Support Number error from the roots, you need to dial Binance customer support number which is working every hour so that users can contact customer care team at any time whenever they are in need. Feel free to get in touch with them to get rid of the issues.
ResponderEliminar