Question

我尝试用css创建一个响应式菜单。

它几乎可以对不同的分辨率作出反应。但有一件事。

如果菜单处于宽屏模式且单击了一个href，则菜单会消失并显示为非常快速且不会发生任何事情。 href无效。

我将代码放在jsfiddle：http://jsfiddle.net/za1yduqv/

中

如果您多次单击该菜单，您可以看到我的意思。

HTML

        <nav>
            <a href="#" id="menu-icon"></a>
            <ul>
                <li><div class="nav-sep"></div><a href="#">Blog</a></li>
                <li><div class="nav-sep"></div><a href="#">About</a></li>
                <li><div class="nav-sep"></div><a href="#">Media</a></li>
                <li><div class="nav-sep"></div><a href="#">Contact</a></li>
                <li><div class="nav-sep"></div></li>
            </ul>
        </nav>

CSS

/* ==============
    MOBILE: Menu
   ============== */

#menu-icon {
    display:inline-block;
    width: 30px;
    height: 30px;
    background: url(img/menu-icon.png);
    position:absolute;
    right:20px;
    top: 95px;
    z-index:2;  
}

a:hover#menu-icon {
    background-color: #444;
    border-radius: 6px 6px 0 0;
}

nav ul, nav:active ul  { 
    display: none;
    position: absolute;
    padding: 20px;
    right: 20px;
    top: 106px;
    color:#000;
    width: 120px;
    z-index:3;
    font-size:14pt;
    background-image: url("img/nav-pattern.png");
    background-repeat: repeat;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75), inset 0px 0px 2px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75), inset 0px 0px 2px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75), inset 0px 0px 2px 0px rgba(0,0,0,0.75);
}

nav li {
    text-align: center;
    width: 100%;
    padding: 1px 0;
    margin: 0;
}

nav:hover ul {
    display: block;
}

nav li a {
    text-decoration: none;
}

nav li a:hover  {
    color:#d48c3b;
}

@media only screen and (min-width: 640px) {

/* ====================
    WIDE: Nav
   ==================== */

    #menu-icon {
        display: none;
    }

    .nav-sep {
        background-image: url('img/nav-sep.png');
        width:7px;
        height:30px;
        float:left;
    }

    nav {
        position:absolute;
        right:10px;
        top: 98px;
    }

    nav a {
        float: left;
        margin-bottom: 0;
        font-size:13.5pt;
        text-align: center;
        margin: 0 30px;
    }   

    nav ul {
        position: static;
        right: 0;
        top: 0;
        display: inline;
        margin: 0;
        padding: 0;
        width:100%;
    }

    nav li:last-child a {
        margin-right: 0;
    }

    /* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }

}

如果您需要更多代码，请与我们联系。

感谢阅读！丹尼尔

Answer 1

添加以下行：

nav:active ul {display: block;}

在:active中，它有一个display: none;，使菜单消失！

更新：您可以使用其他更好的东西，而不是干涉这个！：（

Answer 2

要使其闪烁，请执行以下操作：在您的：激活规则中，删除display:none，然后将绝对更改为相对，以停止闪烁效果。

http://jsfiddle.net/za1yduqv/

如果单击，响应式css菜单将消失

2 个答案: