Question

有一个纯粹的CSS移动友好菜单工作非常好，除了它在实际的移动设备上真的很慢。

这是link

如果你缩小到320px左右，或者你在手机上打开它，然后点击顶部的菜单（汉堡包）图标，你会看到下面的导航菜单。在移动设备和某些页面上（图片靠近顶部），它非常慢。

关于如何解决这个问题的任何想法？我大部分时间都使用这种方法：link

我正在转换显示的字体大小和高度：内联导航元素。当您选中并取消选中复选框（通过标签，即菜单图标）时，基本上字体和高度将变为零并返回

任何帮助，甚至以不同的方式实现同样的事情（没有javascript）的想法都会摇滚！

一些相关的CSS（手写笔）：

  #nav-toggle (input of type checkbox)
    position absolute
    top 0
    visibility hidden

  #nav-toggle-label (the label of the above input)
    cursor pointer
    color coal
    font-size 3em

  #nav-toggle-label
    display inline-block
    width 30%
    vertical-align middle
    padding .5em 0 0 0

  #nav-toggle-label img
    height 40px

  #nav-toggle:checked ~ #nav
    height 0px
    font-size 0em

纯CSS菜单显示/隐藏转换非常慢

0 个答案: