25 diciembre 2015

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.




Widget por Friki Bloggeo