Question

我正在将一个中型CMS网站（400页）转变为一个响应迅速，移动友好的移动第一网站。

作为墨西哥客户的网站，其中2g是常态，3g是特殊的，网站需要精简到尽可能小的页面大小，以获得合理的页面加载速度。

这可以防止使用，公平地说方便但是＆＃34;膨胀＆＃34; JS库（JQuery等），Web页框架如Bootstrap，Foundation和CMS作为WordPress，Joomla等。

到目前为止，轻量级CMS没有问题，演示文稿将采用轻型框架＆＃34; Kube＆＃34;。

唯一的问题是我找不到任何纯CSS多级下拉菜单，可以在大屏幕上从手机上的垂直切换到水平。几乎100个检查。仅为菜单添加JQuery和/或Bootstrap，取消所有其他收益。

到目前为止，我编写了一个纯CSS轻量级菜单脚本，它干净，轻便且易于使用DB构建，它几乎可以完美地工作＃34;在移动设备上，可以使用适当的媒体查询依赖CSS轻松转换为水平桌面菜单。（以下代码）。

＆＃13;

/* Basic Styles */
* {
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 40px;
}
html {
  background-color: #fff;
  height: 100%;
}
body {
  color: #333333;
  font: 0.75em/1.5em Arial, sans-serif;
}
.container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 96%;
}
/* responsive rules */
@media all and (max-width: 980px) {
  /* Basic positions & colors schema */
  ul {
    padding-left: 25px;
  }
  div,
  ul {
    background-color: #322b8c;
    color: #ffffff;
    border-style: solid;
    border-color: #68e2f0;
    border-width: 2px;
  }
  a {
    color: #ffffff;
  }
  hover {
    background-color: #655ccd;
    color: #bf353d;
  }
  active {
    background-color: #655ccd;
    color: #bf353d;
  }
  /* Parece que es muy fugaz para devices... */
  /* Browser events response */
  /* Menu Level 1 */
  [class="MENU1"] > ul {
    display: none;
  }
  [class="MENU1"]:hover > ul {
    display: block;
  }
}

＆＃13;

<div id="nav">

  <div class='MENU1'><a href="#">	 MENU </a>
    <ul>
      <li><a href="wp.html">	MENU	 1-1</a>
      </li>

      <div class='MENU1'>
        <li><a href="#">	 MENU 1-2 >> </a>
        </li>
        <ul>
          <li><a href="wp.html">	MENU	 1-2-1</a>
          </li>

          <div class='MENU1'>
            <li><a href="#">	 MENU 1-2-2 >> </a>
            </li>
            <ul>
              <li><a href="wp.html">	MENU	 1-2-2-1</a>
              </li>
              <div class='MENU1'>
                <li><a href="#">	 MENU 1-2-2 >> </a>
                </li>
                <ul>
                  <li><a href="wp.html">	MENU	 1-2-2-1</a>
                  </li>
                  <li><a href="wp.html">	MENU 1-2-2	-2</a>
                  </li>
                  <li><a href="wp.html">	MENU 1-2-2-3	</a>
                  </li>
                </ul>
              </div>
              <li><a href="wp.html">	MENU 1-2-2-3	</a>
              </li>
            </ul>
          </div>

          <li><a href="wp.html">	MENU 1-2-3	</a>
          </li>
        </ul>
      </div>
      <li><a href="wp.html">	MENU 1-3	</a></li>
      <li><a href="wp.html">	MENU 1-4	</a></li>
      <div class='MENU1'>
        <li><a href="#">	 MENU 1-5 >> </a></li>
        <ul>
          <li><a href="wp.html">	MENU	 1-5-1</a>
          </li>
          <div class='MENU1'>
            <li><a href="#">	 MENU 1-5-2 >> </a>
            </li>
            <ul>
              <li><a href="wp.html">	MENU	 1-2-5-1</a>
              </li>
              <li><a href="wp.html">	MENU 1-2-5-2</a>
              </li>
              <li><a href="wp.html">	MENU 1-2-5-3	</a>
              </li>
            </ul>
          </div>
          <li><a href="wp.html">	MENU 1-5-3	</a>
          </li>
        </ul>
      </div>
      <li><a href="wp.html">	MENU 1-6	</a>
      </li>
      <li> <a href="wp.html" onclick="myFunction();">	MENU 1-7</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

超薄的代码速度大大超过了库，框架，插件解决方案。

唯一的问题是：

这是一个多级菜单，菜单在内部子菜单打开时自然垂直增长。

从顶部工作中打开的子菜单上的链接。

但是：如果来自较低等级菜单分支的链接当前位于同一等级的前一分支的所有孩子之后，则当前位于原始＆＃34;主菜单分支之下＃34;菜单大小，单击该链接，不会将浏览器重定向到链接页面，但会在打开菜单之前将点击事件视为点击链接下方的任何内容。

我能想到的唯一解释是＆＃34; unhover＆＃34;：CSS display:none在链接上的click事件之前被触发。

我已经搜索了一天可能的解决方案，并尝试了很多......

我试图延迟＆＃34;显示：无＆＃34;使用CSS将其包含在延迟属性中以及不透明度，即＆＃34; Transitionable＆＃34;或之后。任何排列都可能。

我尝试在点击事件＆＃34;上添加＆＃34;对于链接，甚至在<li>标记内添加了一个标准输入元素，希望在CSS之前获取那些被触发的内容＆＃34; display：none＆＃34;无济于事。

用Google搜索＆＃34;如何在HTML点击之前阻止CSS被触发＆＃34;，＆＃34;浏览器事件处理顺序＆＃34; ＆＃34;浏览器代码处理顺序＆＃34;，以及许多变化没有成功。

我不介意包含一个JS脚本，遗憾的是它会破坏纯CSS解决方案，如果可行的话非常精简。当然可能所有手机都可以运行JS。

我将非常感谢您解决此问题的任何帮助。

CSS显示：在链接上单击事件之前没有触发，因此单击将作为主体上的单击

0 个答案: