我创建了一个仅在手机上可见的菜单。
使用CSS我已经成功地创建了一个显示/隐藏导航菜单。你可以在http://js.co.nz/mobile-test.php(目前只有在手机上的纵向视图,因为这是我目前的开发)上看到这个操作。
我希望能够显示/隐藏子菜单项太(因为导航菜单很长!)。例如,如果用户点击"按类型浏览",我希望看到以下子菜单:椅子;表;镜像等出现
当前的html是这样的:
<nav id="responsivenav" role="navigation">
<a href="#responsivenav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul>
<li><a href="../index.php">HOME</a></li>
<li><a href="../all-stock.php">BROWSE ALL STOCK</a></li>
<li><a href="#">BROWSE BY TYPE</a>
<ul>
<li><a href="../antique-chairs.php">Antique chairs</a></li>
<li><a href="../dining-tables.php">Dining tables</a></li>
<li><a href="../antique-mirrors.php">Antique mirrors</a><li>
</ul>
</li>
<li><a href="#">BROWSE BY CATEGORY</a></li>
<li><a href="#">BROWSE BY ROOM</a></li>
<li><a href="../reduced-items.php">REDUCED ITEMS</a></li>
<li><a href="../opening-hours.php">OPENING HOURS</a></li>
<li><a href="../news.php">NEWS</a></li>
<li><a href="../find-us.php">FIND US</a></li>
<li><a href="../about-john-stephens.php">ABOUT US</a></li>
<li><a href="../brochures.php">BROCHURES</a></li>
<li><a href="../period-styles.php">PERIOD STYLES</a></li>
</ul>
<div class="clear"></div>
</nav>
css看起来像这样:
#responsivenav {display:block;}
#responsivenav > a { }
#responsivenav:not( :target ) > a:first-of-type,
#responsivenav:target > a:last-of-type {
display: block;
height:50px;
line-height:50px;
font-size:15px;
margin-bottom:0;
padding:0;
text-indent:100px;
text-decoration:none;
color:#fff;
font-weight:bold;
text-transform:uppercase;
background: #393b3c url(../images/wd/mobile-menu-icon.jpg) no-repeat 40px center; }
/* first level */
#responsivenav > ul {
height: auto;
display: none;
border-bottom:5px solid #fff;}
#responsivenav:target > ul {
display: block;
list-style:none;
padding:0;
margin:0;}
#responsivenav > ul > li {
width: 100%;
float: none;
display:block;
height:60px;
line-height:60px;
font-size:15px;
text-indent:40px;
border-top: 1px solid #eee;}
#responsivenav > ul > li a {
text-decoration:none;
color:#393b3c;}
/* second level */
#responsivenav > ul > li > ul {
display: none;
}
#responsivenav > ul > li:hover > ul {
display:block;
}
这是菜单的第二层,我知道我没有做对。我尝试了各种方法来做到这一点,例如向子菜单添加类,使用left:-9999px而不是display:none;等等,但似乎都不起作用。
请帮忙!我相信这应该很简单!
将#responsivenav > ul > li
的属性height: 60px
替换为min-height: 60px
(PhonePtest.css文件中的第138行)。
目前,你的代码使子菜单出现在悬停,在移动的情况下,点击工作。这就是导航菜单在点击时隐藏的原因。为了避免这种情况,可以替换
<a href="#">BROWSE BY TYPE</a>
<a href="javascript:void(0)">BROWSE BY TYPE</a>
您可以对其他菜单元素执行相同的操作