Question

我有一个css菜单，想要在不移动页面其余部分的情况下打开它。

HTML

<div class="logo-container large-6 columns">
    <div class="large-3 columns">IMAGE</div>
    <div class="large-9 columns">
        <a href="/" rel="home">
            <h1 class="site-title">WORDS</h1>
            <div class="site-slogan">MORE WORDS</div>
        </a>
    </div>
</div>

<nav id="nav" role="navigation">
    <a href="#nav" title="Show navigation">☰ MAIN MENU</a>
    <a href="#" title="Hide navigation">☰ MAIN MENU</a>
    <ul id="main-menu" class="main-nav left">
        <li class="first leaf" title=""><a href="/" title="">Home</a></li>
        <li class="expanded has-dropdown" title=""><a href="/" title="">About</a> 
            <ul class="dropdown">
                <li class="expanded show-for-small"><a href="/" title="">About</a></li>
                <li class="first leaf"><a href="/">About</a></li>
                <li class="leaf" title=""><a href="/" title="">Our Team</a></li>
            </ul>
        </li>
        <li class="leaf" title=""><a href="/" title="">Publications</a></li>
        <li class="leaf" title=""><a href="/" title="">Events</a></li>
        <li class="leaf active" title=""><a href="/" title="" class="active">Blog</a></li>
        <li class="last leaf"><a href="/">Contact</a></li>
    </ul>
</nav>

SCSS

#nav{
    display: none;
    width: 45%;
    height: 55px;
    float: left;
    padding: 20px;
    #main-menu {
        ul { float: none; }
        li.expanded.show-for-small { display: none !important; }
    }
    #main-menu{
        margin-top: 21px;
        padding: 0;
        width: 100vw;
    }
}
#nav > a{
    display: none;
}
#nav li  {
    position: relative;
    list-style-type: none;
    padding-top: 15px;
}
#nav > ul{
    height: 3.75em;
}
#nav > ul > li {
    width: 25%;
    height: 100%;
    float: left;
}
#nav li ul{
    display: none;
    position: absolute;
    top: 100%;
}
#nav li:hover ul,
#nav li:focus ul { display: block; }
    #nav {
        position: relative;
        z-index: 999;
        display: block;
    }
    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type { display: block; }
    #nav > ul {
        height: auto;
        display: none;
        position: absolute;
    }
    #nav > ul { left: 0; }
    #nav:target > ul { display: block; }
    #nav > ul > li {
        width: 100%;
        float: none;
        padding: 10px 0 10px 20px;
        text-transform: uppercase;
        list-style-type: none;
    }
    #nav > ul > li.first.leaf.active { padding-top: 5px; }
    #nav li ul { position: static; }

由于菜单通过定位导航ID来工作，因此无论何时单击菜单打开它，都会下拉到导航部分。如何更改它以便可以单击并打开它而无需移动到该部分？如果使用javascript可以更轻松地完成此操作，请告诉我们。

Answer 1

跳转是将:target用于菜单的常见问题，建议使用checkbox，它也适用于更多浏览器。简化演示如下。

<强> JSFIDDLE DEMO

/*main menu*/
nav {
    margin-top: 100px;
}
.menu-label {
    display: block;
    background: yellow;
}
.main-nav {
    display: none;
}
.menu-checkbox {
    display: none;
}
.menu-checkbox:checked + .main-nav {
    display: block;
}
/*sub menu*/
.dropdown {
    display: none;
}
.main-nav li:hover .dropdown{
    display: block;
}

<nav>
    <label for="menu-1" class="menu-label">☰ MAIN MENU</label>
    <input id="menu-1" class="menu-checkbox" type="checkbox" />
    
    <ul id="main-menu" class="main-nav left">
        <li class="first leaf" title=""><a href="/" title="">Home</a></li>
        <li class="expanded has-dropdown" title="">
            <a href="/" title="">About</a> 
            <ul class="dropdown">
                <li class="expanded show-for-small"><a href="/" title="">Sub menu 1</a></li>
                <li class="first leaf"><a href="/">Sub menu 2</a></li>
                <li class="leaf" title=""><a href="/" title="">Sub menu 3</a></li>
            </ul>
        </li>
        <li class="leaf" title=""><a href="/" title="">Publications</a></li>
        <li class="leaf" title=""><a href="/" title="">Events</a></li>
        <li class="leaf active" title=""><a href="/" title="" class="active">Blog</a></li>
        <li class="last leaf"><a href="/">Contact</a></li>
    </ul>
</nav>

如何防止页面跳转菜单打开？

1 个答案: