Question

我制作了一个纯粹的css切换菜单，但发现它在iOS Safari中不起作用，所以经过很多挫折后决定用Javascript切换它。唯一的问题是我几乎没有任何使用Javascript的经验，已经在网上寻找操作方法但是很难让它们中的任何一个工作，我认为我在这里的相当简单，因为没有子菜单

想知道是否有人知道一个简单的方法让这个菜单与Javascript一起使用，以便点击鼠标即可开启/关闭切换开关，也适用于大多数移动浏览器。

codepen上的当前菜单在这里：

http://codepen.io/lemmiwink5/pen/JoKmJb

HTML
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">        

<header class="menu">
  <div tabindex="0" class="drop-menu">
    <i class="fa fa-bars" ></i>   
    <ul class="drop-menu-content">
      <i class="fa fa-sort-asc"></i>
      <li><a href="#">Home</a></li>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Check</a></li>
    </ul>
  </div> 
</header>

CSS
.menu {
    height: 40px;
    width: 40px;
    margin-left: 20px;
    margin-top: 17px;
    position: fixed;
    z-index: 1;
}
.drop-menu {
    position: relative;
    display: inline-block;
    outline: 0;
}
.drop-menu i.fa-bars {
    padding-right: 30px;
    padding-bottom: 14px;
    transition: opacity .2s ease-in-out;
    color: #000;
    font-size: 27px;
}
.drop-menu .fa-bars:hover {
    opacity: 0.6;
}
.drop-menu:focus {
    pointer-events: none;
}
.drop-menu:focus .drop-menu-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.drop-menu-content {
    position: absolute;
    z-index: 1;
    width: 200px;
    padding: 0;
    background-color: #eee; 
    height: auto; 
    border-radius: 5px;  
    opacity: 0;
    visibility: hidden;
    transition: visibility .5s;
    margin: 0 0 0 -6px;
}  
.drop-menu-content li {
    margin: 5px;
    display: block;
    position: relative;
}
.drop-menu-content li:hover {
    background-color: #222;
}
.drop-menu-content a:hover {
    color: #fff;
}
.drop-menu-content i.fa-sort-asc {
    color: #eee;
    font-size: 30px;
    position: absolute;
    top: -10px;
    left: 10px;
} 
.drop-menu-content a {
    text-decoration: none;
    color: #000;
    padding: 10px 15px;
    display: block;
}

提前感谢任何能够提供帮助的人和所有人。

编辑：新代码：

<html>
    <head>
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <style>
        /*Menu dropdown*/
.drop-menu i.fa-bars {
    padding-right: 30px;
    padding-bottom: 14px;
    transition: opacity .2s ease-in-out;
    color: #fff;
    font-size: 27px;
}
.drop-menu .fa-bars:hover {
    opacity: 0.6;
}
.drop-menu {
    position: relative;
    display: inline-block;
    margin-left: 30px;
    margin-top: 20px;
}
.drop-menu-content {
    position: absolute;
    z-index: 1;
    width: 200px;
    padding: 0;
    background-color: #fff; 
    width: 200px; 
    height: auto; 
    border-radius: 5px;  
    visibility: hidden;
    opacity: 0;
    transition: visibility .5s;
}  
.drop-menu-content li {
    margin: 5px;
    display: block;
    position: relative;
}
ul.drop-menu-content li:hover {
    background-color: #222;
}
ul.drop-menu-content a:hover {
    color: #fff;
}
.drop-menu-content i {
    color: #fff;
    font-size: 30px;
    position: absolute;
    top: -10px;
    left: 10px;
} 
.drop-menu-content a {
    text-decoration: none;
    color: #000;
    padding: 10px 15px;
    display: block;
}
        </style>  
    </head>
    <body>
        <header class="menu">
                <div tabindex="0" class="drop-menu">
                    <i class="fa fa-bars" ></i>   
                    <ul class="drop-menu-content">
                      <i class="fa fa-sort-asc"></i>
                      <li><a href="#">Home</a></li>
                      <li><a href="#">Lorem</a></li>
                      <li><a href="#">Ipsum</a></li>
                      <li><a href="#">Check</a></li>
                    </ul>
                </div>
            </nav>
        </header>
        <script>
            var dropMenu = 0;
            var toggling = false;
            var opacity = 0;
            var menu = document.getElementsByClassName("drop-menu-content");
            window.onload = function() {
                menu.style.opacity = 0;
            }
            function toggle() {
                current = document.getElementsByClassName("drop-menu-content");
                function frame() {
                    if(dropMenu == true) {
                        opacity -= 10;
                        menu[0].style.opacity = opacity / 100;
                    } else {
                        opacity += 10;
                        menu[0].style.opacity = opacity / 100;
                    }
                    if(opacity === 0) {
                        dropMenu = Math.Abs(dropMenu - 1);
                        toggling = false;
                        clearInterval(intervalId);
                    }
                }
                if(!toggling) {
                    toggling = true;
                    var intervalId = setInterval(frame,16);
                }
            }
        </script>
    </body>
</html>

似乎无法弄清楚它为什么不起作用。只是因为你想知道为什么一切都在线，这是因为我正在创建一个tumblr主题：）。

Answer 1

以下是我在Javascript中制作此切换菜单的方法，这也会为它添加一些不错的淡入淡出效果。

var dropMenu = 0;
var toggling = false;
var opacity = 0;
var menu = document.getElementsByClassName("drop-menu-content");
window.onload = function() {
    menu.style.opacity = 0;
}
function toggle() {
    function frame() {
        if(dropMenu == true) {
            opacity -= 10;
            menu[0].style.opacity = opacity / 100;
        } else {
            opacity += 10;
            menu[0].style.opacity = opacity / 100;
        }
        if(opacity === 0 || opacity === 100) {
            dropMenu = Math.Abs(dropMenu - 1);
            toggling = false;
            clearInterval(intervalId);
        }
    }
    if(!toggling) {
        toggling = true;
        var intervalId = setInterval(frame,16);
    }
}

因此，当单击菜单按钮时，您所要做的就是调用toggle（）函数，如果菜单没有或淡出，菜单应该淡入。这几乎就是创建一个间隔，意味着每秒60次（计算出16毫秒* 60接近1000）调用frame（）函数，这将逐渐改变窗口的不透明度（透明度）。

Answer 2

你不需要为做太多的JS而烦恼。您可以或多或少地回到旧方法。在悬停分配的基础上，将悬停样式分配给CSS类; 例如 .hover-class;绑定一个事件以更改touchstart和touchend上的课程。

function touchHover(element, mouseenter, mouseleave) {
    element.addEventListener('touchstart', mouseenter, false);
    element.addEventListener('touchend', mouseleave, false);
}

function startHover() {
    this.className += ' hover-class';
}

function endHover() {
    this.className = this.className.replace('hover-class', '');
}

if ("ontouchstart" in window) {
    touchHover(document.getElementById('menu'), startHover, endHover);
}

此代码的一个好处是除了添加类并将此代码附加到页面底部之外，您不必对JS进行任何编辑。无需将该函数添加到HTML的onClick处理程序 - 它以编程方式添加事件，并且可以在一个位置进行编辑。

Javascript切换菜单

2 个答案: