Question

我不是Android开发人员，我只是创建一个带有下拉菜单的网站。现在我被告知这个网站也必须与移动设备兼容。我使用Wordpress来创建这个网站，当我使用小部件作为我的菜单时，它在Android设备上不起作用。我使用CSS创建了一个新的下拉菜单，并在我的2个Android设备上再次测试了它。菜单有2个级别。当级别1悬停时（我知道悬停对移动设备有害）通常会显示级别2。两个级别的菜单项在单击时链接到网站的子页面。

在带有Gingerbread的三星Galaxy S2上，CSS菜单运行正常但不完美。当级别1（例如，点击称为“水果”）时，页面“水果”会打开但子项目（例如“Apple”和“Banana”）会显示。如果单击“Apple”或“Banana”，则会调用相应的页面唯一的问题是：如果我已经在“水果”页面，我再次点击菜单中的“水果”，没有任何反应。这根本不好，但对我来说没问题。

不幸的是，我的Asus Transformer Prime平板电脑配有冰淇淋三明治的菜单确实存在问题。单击1级菜单项时，将显示该项目的页面，但无法单击子菜单。在页面加载时显示仅一秒钟。因此，无法在此设备上访问网站的子页面。

我希望我能够清楚地描述我的问题，我是否没有Android知识，我的英语是否完美。如果我应该提供任何CSS或HTML代码或其他什么，请告诉我。感谢您的任何建议和帮助！

这是我的PHP，HTML和CSS代码：

PHP：

    <div id="menu" role="navigation">
        <?php wp_nav_menu(array('sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu-class',
                                'container_id' => 'main-menu-id', 'theme_location'  => 'header', 'show_home' => true)); ?>
    </div> <!-- menu -->

HTML（由PHP生成）：

<div id="menu" role="navigation">
<div class="menu">
<ul>
<li class="current_page_item">
<a title="Home" href="http://whatever.com/wordpress/">Home</a>
</li>
<li class="page_item page-item-40">
<a href="http://whatever.com/wordpress/?page_id=40">Cupcake Ipsum</a>
<ul class="children">
<li class="page_item page-item-388">
<a href="http://whatever.com/wordpress/?page_id=388">Red Velvet Cupcake</a>
</li>
<li class="page_item page-item-390">
<a href="http://whatever.com/wordpress/?page_id=390">Mango Cupcake</a>
</li>
<li class="page_item page-item-392">
<a href="http://whatever.com/wordpress/?page_id=392">Chocolate Cupcake</a>
</li>
</ul>
</li>
<li class="page_item page-item-43">
<a href="http://whatever.com/wordpress/?page_id=43">Bacon Ipsum</a>
<ul class="children">
<li class="page_item page-item-405">
</ul>
</li>
<li class="page_item page-item-45">
<a href="http://whatever.com/wordpress/?page_id=45">Veggie Ipsum</a>
<ul class="children">
<li class="page_item page-item-397">
<a href="http://whatever.com/wordpress/?page_id=397">Tomato</a>
</li>
<li class="page_item page-item-399">
<a href="http://whatever.com/wordpress/?page_id=399">Lettuce</a>
</li>
<li class="page_item page-item-401">
<a href="http://whatever.com/wordpress/?page_id=401">Broccoli</a>
</li>
<li class="page_item page-item-403">
<a href="http://whatever.com/wordpress/?page_id=403">Onion</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

CSS：

.menu {
background-color: #0B5A7D;
display: inline-block;
position: relative; }

#menu .menu-header ul,
div.menu ul {
list-style-type: none;
width: 921px;
margin: 0;
padding: 0; }

#menu ul li a {
text-decoration: none;
color: #CCCCCC;
font-size: 16px;
padding: 10px;
display: block;
position:relative; }

#menu ul li:hover a {
background-color: #006699; }

#menu ul li ul li a:hover {
color: #0B5A7D;
font-weight: bold;
background-color: #89b4ca; }

#menu ul li ul li a {
clear: left;
line-break: strict;
background-color: #006699;
padding: 5px;
font-size: 12px; }

.menu ul li {
display: inline-block;
position: relative;
border-left: solid 1px #006699; }

#menu ul li ul li {
display: block;
float: none;
clear: left;
width: 200px;
border: none;
background-color: #006699; }

.menu li ul {
position: absolute; }

.menu li:not(:hover) ul {
display: none; }

Answer 1

这是我创建的一个小脚本，用于将普通菜单转换为选择下拉菜单，然后我相信我使用媒体查询来切换菜单。很快就会成为一个更灵活的插件。

http://imstillreallybored.com/2012/jquery-snippet-for-mobile-menu/

适用于Android（特别是ICS）的移动设备的下拉菜单

1 个答案: