0

我一直在使用 Twitter Bootstrap 开发一个解决方案，当您将鼠标悬停在桌面上时，主导航会展开，但是当单击插入符号移动时菜单会展开（插入符号隐藏在桌面上）。此外，我希望顶级导航项目可以在移动设备上点击。

我所取得的成就：

  • 子菜单在悬停时展开（桌面）
  • 顶级导航是可点击的（桌面和移动）
  • 插入符号隐藏在桌面上，但显示在移动设备上
  • 插入符号的可点击区域展开和折叠（移动）

什么不能正常工作：

  • 顶级导航项目扩展整行（移动）
  • 插入符号的展开/折叠区域位于第二行（请参阅屏幕截图中“服务”下方的黑条 - 移动设备）

我想要发生的事情（见截图）：

  • 红线右侧的可点击区域用于展开/折叠菜单（移动端）
  • 红线左侧的可点击区域用于访问“服务”顶级导航页面（移动）

简而言之，桌面版的工作方式与我希望的完全一样，但移动版存在一些突出的问题。当然，百分比不必与红线完全匹配，但我基本上希望同一行上有两个点击事件；一个用于访问服务页面，另一个用于扩展服务子菜单。

这是我当前为 Twitter Bootstrap 设置的 HTML 设置，其中包含我添加的唯一自定义 CSS 以及移动设备上当前视图的屏幕截图。为清晰起见选择了错误的配色方案。

<ul id="menu-mainnav" class="nav"><li><a href="http://localhost">Home</a></li>
    <li class="dropdown">
         <a href="http://localhost/services" data-hover="dropdown" data-target="#" class="dropdown-toggle pull-left js-activated disabled">Services</a>
         <a data-toggle="dropdown" data-target="#"><b class="caret pull-right hidden-desktop"></b></a>
         <ul class="dropdown-menu">
             <li><a href="http://localhost/services/service1">Service 2</a></li>
             <li><a href="http://localhost/services/service2">Service 1</a></li>
         </ul>
     </li>
 </ul>

CSS

@import url('bootstrap/css/bootstrap.css');
@import url('bootstrap/css/bootstrap-responsive.css');
body {
    padding-top: 60px;
    padding-bottom: 40px;
} 
.caret {border-top: 6px solid #fff; border-right: 6px solid transparent; border-left: 6px solid transparent;}
.dropdown .caret {margin-top: -20px;}

当前问题的屏幕截图

在此处输入图像描述

4

1 回答 1

0

After playing around with it a little bit, here is my solution that worked for me.

<ul id="menu-mainnav" class="nav"><li><a href="http://localhost">Home</a></li>
                <li class="dropdown">
                    <a href="http://localhost/services" data-hover="dropdown" data-target="#" class="dropdown-toggle pull-left js-activated disabled testdd">Services</a>
                    <b data-toggle="dropdown" data-target="#" class="caret pull-right hidden-desktop rh-caret" style="width:6px; float:right;background-position:50% -133px; height:6px;"></b>
                    <ul class="dropdown-menu">
                        <li><a href="http://localhost/services/service1">Service 2</a></li>
                        <li><a href="http://localhost/services/service2">Service 1</a></li>
                    </ul>
                </li>
            </ul>
于 2013-06-01T02:55:19.377 回答