Umenu contextuel simple et plutôt sympa visuellement.
Bien sûr il en existe beaucoup sur Internet mais souvent sous forme de plugins, alors ce n'est pas toujours évident d'en tirer le meilleur.

Créer son propre menu contextuel avec HTML et Javascript

Cliquez dans la boîte avec le bouton droit de la souris

HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>W2UI Demo: Context Menu</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="contextMenu.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script src="contextMenu.js"></script>
    </head>
    <body>
        <div id="info" style="background-color:#ccc;height: 500px; margin: 10px; border:2px dashed #666666; padding:6px">
            <h2>Cliquez dans la boîte avec le bouton droit de la souris</h2>
        </div>
        <ul class="contextmenu">
            <li class="contextmenu-title"><a href="#">Title</a></li>
            <li id="cut"><a href="#"><i class="fa fa-scissors"></i>Cut</a></li>
            <li id="copy"><a href="#"><i class="fa fa-files-o"></i>Copy</a></li>
            <li id="paste" class="disabled"><a href="#"><i class="fa fa-clipboard"></i>Paste</a></li>
            <li class="contextmenu-divider"><a href="#"></a></li>
            <li id="delete"><a href="#"><i class="fa fa-times"></i>Delete</a></li>
        </ul>
    </body>
</html>
CSS
.contextmenu{
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    background-color: #f9f9f9;
    width: auto;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 5px;
    z-index: 1;
    font-family: Arial,Sans-serif;
    font-size: 14px;
}
.contextmenu::after {
    content:' ';
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    height: 0;
    position: absolute;
    left: 16px ;
    top: -6px;
}
.contextmenu li a {
    display: block;
    padding: 6px;
    color: black;
    text-decoration: none;
}
.contextmenu li i {
    margin-left:10px;
    margin-right:8px;
}
.contextmenu li:hover a {
    color: white;
    background-color: #39c;
}
ul.contextmenu li.contextmenu-title a{
    color: #999;
}
.contextmenu > li.disabled a {
    pointer-events: none;
    color: #aaa;
}
.contextmenu-title {
    font-weight: bold;
    pointer-events: none;
}
.contextmenu-divider{
    border-top: 1px solid #d7d3d7;
    border-bottom: 1px solid #ffffff;
    height: 0;
    padding: 0;
    pointer-events: none;
}
.fa-times
{
    color:red;
}
Javascript
document.addEventListener("DOMContentLoaded", function()
{
    $("#info").bind("contextmenu", function(event)
    {
        event.preventDefault();
        var offsets = $('#info').offset();
        var infoTop = offsets.top;
        var infoLeft = offsets.left;
        var posLeft;
        var posTop;
        /*Get window size:*/
        var winWidth = $("#info").width();
        var winHeight = $("#info").height();
        var infoRight = winWidth + infoLeft;
        var infoBottom = winHeight + infoTop;
        /*Get pointer position:*/
        var posX = event.pageX;
        var posY = event.pageY;
        /*Get contextmenu size:*/
        var menuWidth = $(".contextmenu").width();
        var menuHeight = $(".contextmenu").height();
        var contextRight = posX + menuWidth;
        var contextBottom = posY + menuHeight;
        /*Prevent page overflow:*/
        posLeft = posX;
        posTop = posY;
        if( contextRight > infoRight )
        {
            posLeft -= (contextRight - infoRight) + 10;
        }
        if( contextBottom > infoBottom )
        {
            posTop -= (contextBottom - infoBottom) + 10;
        }
        $(".contextmenu")
            .appendTo("#info")
            .css({"left": posLeft + "px", "top": posTop + "px"})
            .show();
        }).bind("click", function(event)
        {
            $(".contextmenu").hide();
        });
        $( ".contextmenu" ).click(function(event)
        {
        if( event.target.text )
        {
            var menuClicked = event.target.text;
            alert("you clicked: " + menuClicked);
        }
    });
},false);

download Le source complet est téléchargeable ici.


Ecrire un commentaire