Claro, aquí te mostraré un ejemplo básico de cómo puedes crear un menú contextual con iconos SVG en HTML, CSS y JavaScript que solo funciona dentro de un elemento `div` con `id="galeria"`.
HTML:
```html
<div id="galeria">
<!-- Contenido de la galería -->
</div>
<!-- Menú contextual para la galería -->
<div class="menu-contextual" id="menu-galeria">
<ul>
<li><a href="#">Abrir enlace</a></li>
<li><a href="#">Actualizar Pagina</a></li>
<li><a href="#">Copiar enlace</a></li>
<li><a href="#">Agregar a marcadores</a></li>
</ul>
</div>
```
CSS:
```css
.menu-contextual {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: none;
/* Estilos adicionales para el menú */
}
.menu-contextual ul {
list-style: none;
padding: 5px 0;
margin: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
}
.menu-contextual li {
margin: 0;
padding: 5px 10px;
}
.menu-contextual li:hover {
background-color: #f0f0f0;
}
/* Estilos para enfocar los iconos */
.menu-contextual a:focus .icono {
fill: #0078d4;
}
```
Este CSS establece una clase `menu-contextual` para el menú contextual que se utiliza en el HTML. También incluye algunos estilos básicos para el menú y los elementos de la lista.
JavaScript:
```javascript
var galeria = document.getElementById('galeria');
var menuGaleria = document.getElementById('menu-galeria');
var elementosMenu = menuGaleria.querySelectorAll('a');
galeria.addEventListener('contextmenu', function(e) {
e.preventDefault();
var x = e.clientX;
var y = e.clientY;
// Mostrar el menú contextual
menuGaleria.style.display = 'block';
menuGaleria.style.top = y + 'px';
menuGaleria.style.left = x + 'px';
});
// Ocultar el menú cuando se hace clic en cualquier lugar de la página
document.addEventListener('click', function() {
menuGaleria.style.display = 'none';
});
// Asignar eventos a los elementos del menú
elementosMenu[0].addEventListener('click', function(e) {
e.preventDefault();
window.open(window.location.href); // Abrir enlace en otra ventana
});
elementosMenu[1].addEventListener('click', function(e) {
e.preventDefault();
window.location.reload(); // Recargar la página actual
});
elementosMenu[2].addEventListener('click', function(e) {
e.preventDefault();
var enlace = document.createElement('textarea');
enlace.value = window.location.href;
document.body.appendChild(enlace);
enlace.select();
document.execCommand('copy');
document.body.removeChild(enlace); // Copiar enlace al portapapeles
});
elementosMenu[3].addEventListener('click', function(e) {
e.preventDefault();
window.external.AddFavorite(window.location.href, document.title); // Agregar a marcadores
});
```
Este JavaScript establece una variable de `galeria` para el `div` que contiene la galería y una variable de `menuGaleria` para el menú contextual.
A continuación, se añade un evento de escucha para el menú contextual (`contextmenu`) en el elemento `div` de la galería. Cuando ocurre el evento, se muestra el menú contextual en la ubicación del puntero del mouse utilizando las coordenadas `x` e `y`.
Se añaden eventos de escucha para los elementos del menú, como "Abrir enlace", "Actualizar Página", "Copiar enlace" y "Agregar a Marcadores". Cada evento realiza una acción diferente cuando se activa, como abrir el enlace en otra ventana, recargar la página actual, copiar el enlace al portapapeles o agregar a marcadores.
Además, el menú contextual se oculta cuando se hace clic en cualquier lugar de la página.
Ten en cuenta que este código solo es un ejemplo básico. Si deseas agregar más opciones o personalizar el menú para tus necesidades particulares, deberás ajustar el HTML, CSS y JavaScript en consecuencia.
