网站的移动视图菜单答案

【问题标题】：Mobile view Menu for Website网站的移动视图菜单
【发布时间】：2017-10-29 05:23:30
【问题描述】：

我正在制作一个电子邀请网站。做了一切，但卡在一个地方。桌面视图的菜单工作正常，但在移动设备上打开时无法正常工作。我点击菜单按钮没有任何反应。请在屏幕截图下方找到。

HTML

<body>

<div id="container" class="container intro-effect-push animsition" style="animation-duration: 1500ms; opacity: 1;">  

<nav id="main_menu" class="menugray">
<div id="menu-button" class="menu-opened">

</div>                                                                   


<ul class="open" style="display: none;">
        <li><a class="fade-page" href="index2.html"><span data-hover="HOME">HOME</span></a></li>
        <li> <a class="fade-page" href="knowus.html"><span data-hover="BRIDE & GROOM">BRIDE & GROOM</span></a>
            </li>
        <li><a href="events.html" class="fade-page"><span data-hover="EVENTS">EVENTS</span></a></li>
        <li><a href="rspv.html" class="fade-page"><span data-hover="RSPV">RSPV</span></a></li>
        <li><a href="photos.html" class="fade-page"><span data-hover="PHOTOS">PHOTOS</span></a></li> 


    </ul>

</nav>

CSS

    #main_menu li a span::before {
    position: absolute;
    top: -100%;
    color:#e76b71;
    content: attr(data-hover);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

#main_menu:after,
#main_menu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-button {
  position: absolute;
  padding-left: 1.25em;
  font-size:30px;
  top:8px;
  right:8px;
  display: none;
  cursor:pointer;
}
#menu-button:before {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0;
  width: 1em;
  height: 0.125em;
  border-top: 0.375em double #333;
  border-bottom: 0.135em solid #333;
}

截图

如果我将代码更改为

<ul class="open" style="display: block;">

最初是显示：无

更改后的显示是：

这个问题可能会被问好几次。但是请人帮助我。对此我将不胜感激。

【问题讨论】：

标签： html css drop-down-menu hover

【解决方案1】：

别担心，我找到了适合您的解决方案.. 查看流动代码：

 <div id="container" class="container intro-effect-push animsition" style="animation-duration: 1500ms; opacity: 1;">

        <nav id="main_menu" class="menugray">
            <label for="open-nav" class="menu-opened" id="menu-button"></label>
            <input id="open-nav" class="menu-opened" type="checkbox">
            <ul class="open" style="display: none;">
                <li><a class="fade-page" href="index2.html"><span data-hover="HOME">HOME</span></a></li>
                <li> <a class="fade-page" href="knowus.html"><span data-hover="BRIDE & GROOM">BRIDE & GROOM</span></a>
                </li>
                <li><a href="events.html" class="fade-page"><span data-hover="EVENTS">EVENTS</span></a></li>
                <li><a href="rspv.html" class="fade-page"><span data-hover="RSPV">RSPV</span></a></li>
                <li><a href="photos.html" class="fade-page"><span data-hover="PHOTOS">PHOTOS</span></a></li>


            </ul>

        </nav>
    </div>

而css是：

#main_menu li a span::before {
            position: absolute;
            top: -100%;
            color: #e76b71;
            content: attr(data-hover);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        #main_menu:after,
        #main_menu > ul:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }

        #menu-button {
            position: absolute;
            padding-left: 1.25em;
            font-size: 30px;
            top: 8px;
            right: 8px;
            cursor: pointer;
        }

        #menu-button:before {
            content: "";
            position: absolute;
            top: 0.25em;
            left: 0;
            width: 1em;
            height: 0.125em;
            border-top: 0.375em double #333;
            border-bottom: 0.135em solid #333;
        }

        #open-nav:checked + .open {
            display: block !important;
        }

        #open-nav {
            display: none;
        }

供您预览的 Codepen 链接：https://codepen.io/ziruhel/pen/gXOBVK

【讨论】：