Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div data-controller="context-menu">
  <div class="card text-sm flex items-center justify-center" style="block-size: 150px; inline-size: 300px;" data-action="contextmenu->context-menu#show:prevent">
    Right click here
  </div>
  <div popover class="popover" style="--popover-size: 14rem;" data-context-menu-target="menu">
    <div id="context_menu" class="menu" role="menu" aria-label="Context Menu">
      <div class="menu__header">Menu</div>
      <hr class="menu__separator" role="separator"/>
      <div class="menu__group" role="group">
        <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">
          <img aria-hidden="true" src="/assets/calendar-2c1c622b.svg" width="14" height="14" />
          <span>Calendar</span>
        </a>  
        <form contents="true" role="menuitem" class="button_to" method="post" action=""><button class="btn menu__item" data-menu-target="item" type="submit">
            <img aria-hidden="true" src="/assets/smile-5ac60ee4.svg" width="14" height="14" />
            <span>Seach Emoji</span>
          </button><input type="hidden" name="authenticity_token" value="WdpIqk7KKoefZkmTUsK3HhFijNVhup7mm4rMI_vTgkeqhLGR-qVyCj9CCfIp69Pl3A8Xy_rIGsS35AGBiy82mQ" autocomplete="off" /></form>
  <a class="btn menu__item" role="menuitem" tabindex="-1" aria-disabled="true">
          <img aria-hidden="true" src="/assets/calculator-765c8d31.svg" width="14" height="14" />
          <span>Calculator</span>
        </a></div>
      <hr class="menu__separator" role="separator"/>
      <div class="menu__group" role="group">
        <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">
          <img aria-hidden="true" src="/assets/user-3d86b14f.svg" width="14" height="14" />
          <span>Profile</span>
          <span class="menu__item-key">⌘P</span>
        </a>  <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">
          <img aria-hidden="true" src="/assets/credit-card-663de530.svg" width="14" height="14" />
          <span>Billing</span>
          <span class="menu__item-key">⌘B</span>
        </a>  <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">
          <img aria-hidden="true" src="/assets/settings-4fb8e0ad.svg" width="14" height="14" />
          <span>Settings</span>
          <span class="menu__item-key">⌘P</span>
        </a></div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
<div data-controller="context-menu">
  <div class="card text-sm flex items-center justify-center" style="block-size: 150px; inline-size: 300px;" data-action="contextmenu->context-menu#show:prevent">
    Right click here
  </div>
  <div popover class="popover" style="--popover-size: 14rem;" data-context-menu-target="menu">
    <div id="context_menu" class="menu" role="menu" aria-label="Context Menu">
      <%= render partial: "menu_items" %>
    </div>
  </div>
</div>
CSS is not required or multiple files are needed, check the notes.
Java Script is not required or multiple files are needed, check the notes.