# Kontext-Menü mit Box-Schatten



## Parantatatam (29. Februar 2012)

Hallo Tutorianer,

vor einigen Wochen gab es hier ein Thema, in dem jemand ein Kontext-Menü oder so etwas ähnliches haben wollte. Eigene Kontext-Menüs werden, wie den meisten bekannt ist, momentan noch von keinem Browser unterstützt, weshalb ich mir dachte, dass ich in dem Fall doch einfach ein Kontext-Menü simulieren könnte. Also ein Menü, das so aussieht, als wäre es nativ vom Browser generiert, letztendlich aber mit CSS und Javascript erstellt wurde.

Damit das Ganze auch wirklich echt aussieht, habe ich mir mal das Kontext-Menü unter Mac OS X (10.6.2) angesehen, wobei ich auf zwei Dinge gestoßen bin, die ich entweder gar nicht oder nicht so, wie ich es möchte, erstellen konnte:

transparente Rahmen mit Farbe
den Schatteneffekt

Ich zeige euch dazu am besten mal das, was ich bisher habe, und das Kontext-Menü, an dem ich mich lang gehangelt habe.

```
<!DOCTYPE html>
<html>
<head>
  <title>context-menu</title>
  <script type="text/javascript" src="scripts/jquery.js"></script>
  <script type="text/javascript" src="scripts/application.js"></script>
  <link rel="stylesheet" type="text/css" href="styles/default.css" />
</head>
<body>
  <div id="editor" style="background:green;width:500px;height:500px" contextmenu="desktop"></div>
  <menu id="desktop" type="context">
    <button type="button">Neuer Ordner</button>
    <hr />
    <button type="button">Informationen</button>
    <hr />
    <button type="button">Schreibtischhintergrund ändern ...</button>
    <button type="button">Aufräumen</button>
    <button type="button">Ausrichten nach</button>
    <button type="button">Darstellungsoptionen einblenden</button>
  </menu>
</body>
</html>
```
*application.js*

```
$(document).ready(function () {
  // trigger the contextmenu event
  $(document).bind({
    // show context menu
    mousedown: function (event) {
      // if it is a right mouse click
      if(event.which === 3) {
        // hide all context menus
        $('menu[type=context]').css('display', 'none');
        // if the clicked element has a defined context menu
        if(typeof $(event.srcElement).attr('contextmenu') !== 'undefined') {
          // trigger the contextmenu event
          $(document).trigger('contextmenu');
        }
      }
    },
    // hide context menu
    click: function () {
      $('menu[type=context]').fadeOut(100);
    },
    // context menu
    contextmenu: function (event) {
      $('#' + $(event.srcElement).attr('contextmenu'))
        .css('display', 'block')
        .css('top', event.pageY - 4)
        .css('left', event.pageX + 2);
      return false;
    }
  });
});
```
*default.css*

```
* {
  font-family: Helvetica, Arial, sans-serif;
}

menu {
  border-radius: 3px;
  border: solid 1px #d5d5d5;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  margin: 0;
  padding: 4px 0 4px 0;
  background: white;
  display: none;
  position: absolute;
  z-index: 50000;
  -webkit-box-shadow: 0px 22px 100px 12px rgba(181, 181, 181, 0.2);
  -moz-box-shadow: 0px 22px 100px 12px rgba(181, 181, 181, 0.2);
  box-shadow: 0px 22px 100px 12px rgba(181, 181, 181, 0.2);
}

menu * {
  margin: 0;
  padding: 0;
  float: none;
  display: block;
}

menu hr {
  margin: 5px 1px 5px 1px;
  border: 1px solid #e3e3e3;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

menu button {
  color: #000000;
  height: 19px;
  width: 100%;
  margin: 0;
  padding: 0 21px 0 22px;
  display: block;
  outline: none;
  border: none;
  background: none;
  vertical-align: top;
  text-align: left;
  font-size: 15px;
  word-spacing: 1px;
}

menu button:hover {
  color: #ffffff;
  background: url('../images/hover.png');
}
```
Außerdem habe ich noch ein Bild angehängt, das das ursprüngliche Kontext-Menü anzeigt inklusive den Ausmaßen des Schattens. Ich wäre euch sehr dankbar, wenn mir bei diesem letzten Punkt jemand helfen könnte.


----------



## Parantatatam (29. Februar 2012)

Also ich konnte es jetzt etwas nachbessern und es sieht jetzt schon fast so aus, wie es aussehen sollte, aber eben noch nicht ausreichend. Außerdem ist mir aufgefallen, dass ich nicht genau weiß, wie ich den Pfeil für Untermenüs (hier beispielsweise _Ausrichten nach_) realisieren sollte. Fällt da vielleicht noch jemanden etwas ein?


----------

