javascript - html と css を含むドロップダウン メニュー。他の場所をクリックするまで表示されたままにする

Question

MacOS のメニュー バー メニューのようなドロップダウン メニューを作成しようとしています (コード スニペットはこちら)。今のところ問題なく動作していますが、ユーザーが画面のどこかをクリック (またはタップ) するまで、メニューは表示されたままになるはずです。現在のように、メニューから移動するとすぐに、それらは再び「非表示」になります。

これまでのところ、純粋な HTML と CSS で行われていますが、私の直感では、目的の効果を得るには JavaScript を少し加える必要があることがわかりますが、私の JavaScript はまだ少し不足しています。

ul各要素には、onhoverその可視性を に設定するイベントが必要だと思います"visible"。次に、ルート ウィンドウまたはドキュメントには、#menu 項目の最初のレベルより下のすべてを に設定する onclick イベントが必要です"hidden"。これをやってみたい人はいますか？

#menu {z-index: 9;
       font-family: "Lucida Grande", Helvetica, Arial, sans-serif;}


#menu >  ul{
    
    padding: 0px 10px;
    margin: 0;
}


#menu ul {

    list-style: none;    
}

#menu li {
    float: left;
    position: relative;
    padding-left: 3px; 
    padding-right: 3px;
    width: auto;
    color: rgb(68, 68, 68);
    margin-left: 0px; 
}

#menu ul ul li {
    width: 150px;
    padding-left: 15px;
}



#menu a {
    display: block;
    text-decoration: none;
    padding: 5px 5px;
    color: rgb(68, 68, 68);
}


#menu >  ul ul {
    position: absolute;
    background: rgb(240, 240, 240);
    left: 0;
    top: 100%;
    visibility: hidden;
    opacity: 0.95;
    font-size: 15px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24); 
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-left: 0px;
}

#menu > ul ul ul {
    left: 100%;
    top: -3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

}

#menu > ul  ul > li:last-child {
    margin-bottom: 3px;
}

#menu > ul  ul > li:first-child {
    margin-top: 3px;
}


#menu ul ul hr
{
    border: 1px solid rgb(201, 201, 201); 
    margin: 0px -15px;
    width: 165px;
}


#menu .li-selected
{
    color: #407af2;
}



#menu li > ul {
    margin-left: 0px;
    padding-left: 0px;
}


#menu > ul ul ul li, ul ul  ul li a {
    background: rgb(240, 240, 240) !important;
}


#menu.hoverable li:hover
{
    background: rgb(0, 144, 248);
}


#menu.hoverable ul li:hover > a
{
    color: rgb(240, 240, 240);
}


/* 
#menu.hoverable ul li:hover > ul, #menu.hoverable ul li > ul.visible,
#menu.hoverable ul li > ul > li > ul.visible
{
    visibility: visible;
}
*/ 


#menu.hoverable ul li > ul.visible,
#menu.hoverable ul li:hover > ul,
ul.visible
{
    visibility: visible;
}



#menu.hoverable ul ul  ul li:hover, #menu.hoverable ul ul ul li:hover a {
    background: rgb(0, 144, 248) !important;
}

.li-heading, #menu.hoverable .li-heading:hover {
    background: rgb(240, 240, 240);
    color: rgb(68, 68, 68);
    padding: 5px 5px;
    padding-right: 10px;
    font-weight: bohttp://localhost:9000/sessions/102df527a94/index.html#ld;
}


.menu-right-icon
{
    position: absolute;
    right: 10px;
    transform: scale(1.8,1.0);
}


.nav-caret
{
    transform: scaleX(1.8);
}


html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

.grid {
    display: grid;
    grid-gap: 1px;
    height: 100%;
    background-color: #aaa;
    font-family: "helvetica Neue", Helvetica, Arial, sans-serif;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(15px, auto) 1fr 1fr;
    grid-template-areas: "menu" "tree" "inspector" "viewport";
}

@media (min-width: 700px) {
    .grid {
        /* grid-template-columns: minmax(auto, min-content)  minmax(auto, min-content)  minmax(auto, 100%); */
        /* grid-template-columns: minmax(auto, min-content) minmax(10px, 20px) minmax(auto, 100%); */
	/* grid-template-columns: minmax(auto, min-content) minmax(auto, 100%);  */
	grid-template-columns: minmax(auto, 20%)  minmax(auto, 100%);  
        grid-template-rows: auto minmax(auto, min-content) minmax(auto, 100%);
        grid-template-areas:     "menu menu "
				     "tree viewport"
	                             "inspector viewport";
    }
}

.menu {
    grid-area: menu;
    background: rgb(219, 230, 250);
    z-index: 9;
    font-size: 15px;
}

.menu-image {
    width: 16px;
    height: 15px;
}

.tree {
    grid-area: tree;
    background: rgb(209, 209, 209);
    resize: both;
    overflow: auto;
}

#tree-root {
    padding: 0 15px
}

.inspector {
    grid-area: inspector;
    font-size: 11px;
    background: #f8f8f8;
/*    resize: horizontal; */
    overflow: auto;
    z-index: 5;
}

.viewport {
    grid-area: viewport;
    background: #e8e8e8;
    /* resize: both; */ 
    overflow: auto;
    z-index: 1;
}

.viewport div:first-child {
    text-align: center;
}

.growlr-tree ul {
    list-style: none;
    margin-left: 1em;
    padding-left: 0px;
}

.growlr-tree li {
    white-space: nowrap;
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
}




.expanded,
.directory,
.leaf {
    margin-bottom: 5px;
    margin-right: 5px;
}

.expanded {
    color: rgb(119, 119, 119);
}

.directory {
    color: rgb(212, 113, 113);
}

.leaf {
    color: rgb(100, 190, 104);
}

.inspector .heading {
    font-size: 15px;
    font-weight: bold;
    color: rgb(82, 82, 82);
}


.inspector-table, .inspector-table tr, .inspector-table tr td
{ 
    overflow: auto;
    cellpadding: 0;
    cellspacing: 0;
    border-collapse: collapse;
    text-align: left;
}

.inspector-table td
{
    border: 1px solid rgb(168, 168, 168);
    padding: 3px 2px;
    text-align: left;
}


.inspector-table td:first-child
{
   color: rgb(78, 78, 78);
   text-align: center;
}

.inspector-table tr:nth-child(odd)
{
    background-color: rgb(233, 242, 255);
}



.i-t-m
{
    padding: 0px;
    text-align: left;
}

.i-t-v
{
    padding: 0px;
    text-align: left;

}

.i-t-v-click
{
    color: blue;
    font-style: italic;
    font-family: monospace;
    cursor: pointer;
    white-space: pre;
}

.i-t-v-unclick
{
    color: black;
    font-family: monospace;
    width: 10px;
    white-space: pre;
}



#svg-1 path {vector-effect: non-scaling-stroke};


#x3dom-1 {background: #d3d3d3;}

<!DOCTYPE HTML><html lang="en"><head><title>Genworks GDL - assembly</title><meta charset="UTF-8" /><link rel="icon" type="image/x-icon" href="/static/gwl/images/favicon.ico" /><div id="KDpzdGFuZGFyZC1qYXZhc2NyaXB0LXNlY3Rpb24p">
<link id="fontawesome-css" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" /></div></head><body>
<div class="grid">
  <div id="menu-cell" class="cell menu"><div id="KDptZW51KQ"><script>

 function hideMenus(event)
{
  var related = event.relatedTarget;
  var  isInMenu = ((related) && (document.querySelector('#menu').contains(related)));
  if (!(isInMenu))
  {
  setTimeout(removeMenuHoverable, 50);
  setTimeout(removeMenuVisible, 50);
  }
}

 function hideTopMenus (event)
{
  var obj = event.target;
  var uls = document.querySelectorAll('#menu > ul > li > ul');
  for (var i = 0; i < uls.length; i++)
      uls[i].classList.remove('visible');
}

 function removeMenuHoverable()
  {
    document.querySelector('#menu').classList.remove('hoverable');
   }

 function removeMenuVisible ()
 {
   var uls = document.querySelectorAll('#menu ul ul');
   for (var i=0; i< uls.length; i++) 
     uls[i].classList.remove('visible');
 }

 function addVisible(event, level)
 {
   var obj = event.target;

   if (obj.tagName == 'A')
    obj = obj.parentNode.parentNode;
 

   if (obj.tagName == 'UL')
   {
      obj.classList.add('visible');
      var par = obj.parentNode.parentNode;
      if (par.tagName == 'UL')
      { par.classList.add('visible');
      }
      event.stopPropagation();

   }
}


</script>
<nav id="menu">
<ul onmouseover="
  hideTopMenus(event);

">
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);"><img class="menu-image" src="https://genworks.com/static/gwl/images/logo.png" alt="G" />
  </a>
<ul onmouseover="
 addVisible(event, 1);

"><li><a href="#" class="li-selected"><i class="fas fa-check"></i> Development</a></li>
</ul>
</li>
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);">File
  </a>
<ul onmouseover="
 addVisible(event, 1);

">
<li>
  <a href="#">New
  </a>
</li>
<li>
  <a href="#">Open
  </a>
</li>
<li>
  <a href="#">Save
  </a>
</li>
</ul>
</li>
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);">Edit
  </a>
<ul onmouseover="
 addVisible(event, 1);

">
<li>
  <a href="#">Color
  </a>
</li>
<li>
  <a href="#">Line Thickness
  </a>
</li>
</ul>
</li>
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);">Tree
  </a>
<ul onmouseover="
 addVisible(event, 1);

"><li><a href="#"> Add Node...</a></li><li><a href="#"> Draw Node...</a></li><li><a href="#"> Add Leaves...</a></li><li><a href="#"> Draw Leaves...</a></li>
</ul>
</li>
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);">View
  </a>
<ul onmouseover="
 addVisible(event, 1);

">
<li>
  <a href="#" tabindex="0">Camera Point
<span class="menu-right-icon">
  <i class="fas fa-caret-right"></i>
</span>
  </a>
<ul onmouseover="
 addVisible(event, 2);

"><li><a href="#" class="li-selected"><i class="fas fa-check"></i> Trimetric</a></li><li><a href="#"> Top</a></li><li><a href="#"> Front</a></li><li><a href="#"> Left</a></li><li><a href="#"> Bottom</a></li><li><a href="#"> Rear</a></li><li><a href="#"> Right</a></li>
</ul>
</li><li></li><li><a href="#"> Fit to View</a></li><li><a href="#"> Clear!</a></li><li></li>
<li>
  <a href="#" tabindex="0">Graphics Format
<span class="menu-right-icon">
  <i class="fas fa-caret-right"></i>
</span>
  </a>
<ul onmouseover="
 addVisible(event, 2);

"><li><a href="#"> SVG</a></li><li><a href="#" class="li-selected"><i class="fas fa-check"></i> Raphael</a></li><li><a href="#"> x3dom</a></li><li><a href="#"> png</a></li><li><a href="#"> jpeg</a></li>
</ul>
</li>
</ul>
</li>
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);">Develop
  </a>
<ul onmouseover="
 addVisible(event, 1);

"><li><a href="#"> Update!</a></li><li><a href="#"> Set Self!</a></li>
</ul>
</li>
</ul>
</nav></div>
  </div>
</div></body></html>