Question

想知道是否有人有一个适用于移动设备的下拉菜单解决方案。该计划最终将重做整个网站以使其适合移动设备，但目前还没有，并且下降不适用于移动设备。您无法选择任何链接，父母或子女。现场网站可在www.cabletv.com上查看。

缩短版HTML：

<ul id='nav'>
<li><a href='/digital-cable' id='tv'>TV</a>
    <ul>
        <li><a href='/comcast/cable-tv'>Comcast</a></li>
        <li><a href='/charter/cable-tv'>Charter</a></li>
        <li><a href='/cox/cable-tv'>Cox</a></li>
        <li><a href='/time-warner/cable-tv'>Time Warner</a></li>
    </ul>
</li>
<li><a href='/internet' id='internet'>Internet</a>
    <ul>
        <li><a href='/comcast/internet'>Comcast</a></li>
        <li><a href='/charter/internet'>Charter</a></li>
        <li><a href='/cox/internet'>Cox</a></li>
        <li><a href='/time-warner/internet'>Time Warner</a></li>
    </ul>
</li>
</ul>

CSS：

ul#nav{position: absolute; top: 0px; right: 0px;  margin: 0px; padding: 0px;}
ul#nav li {display: block; float: left; position: relative; margin: 0px; padding: 0px;}
ul#nav li a{display: block; float: left; height: 67px; font-size: 14px; text-transform: uppercase; color: #5d5d5d; text-decoration: none; padding: 13px 0px 0px; background: url(../images/cabletv/new/generic/nav-sprites.png) no-repeat 0px 0px; text-align: center; position: relative; border-top: 5px solid #fff;}

ul#nav li:hover{background-color: #f2f2f2;}
ul#nav li a:hover, ul#nav li:hover a {border-color: #f2f2f2;}

ul#nav,ul#nav li,ul#nav ul { list-style: none; margin: 0; padding: 0;}

ul#nav li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; position: relative;}

ul#nav li.hover,ul#nav li:hover { position: relative; z-index: 599; cursor: default;}

ul#nav ul { visibility: hidden; position: absolute; top: 100%; left: -40px; z-index: 598; width: 470px; background: rgba(255,255,255,0.9); -webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding-left: 30px;}

ul#nav ul li { display: block; float: left;}
ul#nav ul li:hover{background: none;}
ul#nav ul li a, body._404 ul#nav ul li a{background: none; display: block; float: left; height: auto; padding: 15px 25px; text-transform: none; border: none;}
ul#nav ul li a:hover{background: none; color: #ff6947;}
ul#nav ul ul { top: 1px; left: 99%;}
ul#nav li:hover > ul { visibility: visible;}
ul#nav li.rtl ul { top: 100%; right: 0; left: auto;}
ul#nav li.rtl ul ul { top: 1px; right: 99%; left: auto;}

Answer 1

一个非常简单的解决方案是使用移动菜单的选择菜单。基本上你必须使用select标签而不是ul复制你的菜单，用display：none隐藏它，然后根据用户的设备使用媒体查询显示相应的菜单。然后，您需要添加一个小的JavaScript来激活选择它们时的链接。查看http://css-tricks.com/convert-menu-to-dropdown/了解如何操作。它对我帮助很大 - 不可否认，它不像正确的下拉菜单那么漂亮，但对移动设备非常有用！

CSS下拉菜单将在移动设备上运行

1 个答案: