Thiết kế website giá rẻ

Question

I’m trying to build a (left-click) context menu with HTML+CSS.
It should be multi-level (hovering over some items shows a submenu next to the item).
Each level should also be scrollable when it contains too many items (e.g. more than 30).

I know that a pdf with JS-backend can do what I want (though with buttons at top and bottom, I would prefer the scroll wheel to (also) work).

multi-level context menu in pdf (Acrobat)

I’ve tried using overflow-y: auto, but it always seems to hide overflow in x as well (even with overflow-x: visible), and I’m not a big fan of the scrollbars themselves either.

Here is an MWE of what I have (HTML):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="context_menu.css" />
    <title>Context Menu Example</title>
</head>
<body>
    <div class="context-menu" style="left: 10px; top: 18px;">
        <ul>
            <li> <span class="icon_span"></span><span class="text_span">Option 1</span><span class="sub_span"></span> </li>
            <li> <span class="icon_span"></span><span class="text_span">Option 2</span><span class="sub_span"></span> </li>
            <li> <span class="icon_span"></span><span class="text_span">Option 3</span><span class="sub_span"></span> </li>
            <li class="separator"></li>
            <li> <span class="icon_span"></span><span class="text_span">Menu Option</span><span class="sub_span">›</span>
                <ul>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 1</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 2</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 3</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 4</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 5</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 6</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 7</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 8</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 9</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 10</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 11</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 12</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 13</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 14</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 15</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 16</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 17</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 18</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 19</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 20</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 21</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 22</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 23</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 24</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 25</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 26</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 27</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 28</span><span class="sub_span"></span> </li>
                    <li> <span class="icon_span"></span><span class="text_span">Foo 29</span><span class="sub_span"></span> </li>
                </ul> 
            </li>
            <li class="separator"></li>
            <li> <span class="icon_span"></span><span class="text_span">Option 4</span><span class="sub_span"> </span> </li>
            <li> <span class="icon_span"></span><span class="text_span">Option 5</span><span class="sub_span"> </span> </li>
        </ul>
    </div>
</body>
</html>

And the CSS:

.context-menu {
    position: absolute;
    padding: 0;
    box-sizing: border-box;
    z-index: 2;
}

.context-menu *{
    box-sizing: border-box;
    position: relative;
}

.context-menu ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #ccc;
    box-shadow: 0 0 5px #333;
    overflow-y: auto;
    max-height: 500px;
    overflow-x: visible;
}

.context-menu li{
    padding: 3px 5px;
    padding-right: 1.7em;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
}

.context-menu li:hover{
    background-color: #bbb;
}

.context-menu li .icon_span{
    width: 1.5em;
    height: 1.2em;
    vertical-align: bottom;
    display: inline-block;
    border-right: 1px solid #aaa;
    margin-right: 5px;
    padding-right: 5px;
    text-align: center;
}

.context-menu li .sub_span{
    width: 1em;
    display: inline-block;
    text-align: center;
    position: absolute;
    right: 0.5em;
}

.context-menu li > ul{
  position: absolute;
  top: 0;
  left: 100%;
  opacity: 0;
  transition: opacity 0.2s;
  visibility: hidden;
}

.context-menu li:hover > ul{
  opacity: 1;
  visibility: visible;
}

.context-menu li.separator{
  border-bottom: 1px solid #aaa;
  margin: 0px;
  padding: 0;
  cursor: default;
}

.context-menu li.separator:hover{
  background-color: inherit;
}

.context-menu.orient-left > ul ul{
  left: unset;
  right: 100%;
}

.context-menu.orient-top > ul ul{
  top: unset;
  bottom: 0;
}

.context-menu li[disabled=""]{
  color: #777;
  cursor: default;
}

.context-menu li[disabled=""]:hover{
  background-color: inherit;
}

I’m not opposed to using javascript here, but would like to avoid it if possible.

Thiết kế website giá rẻ

Danh mục

How to make a multi-level context menu scrollable?