个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
27
4
我真的坚持使用我的菜单以使其在移动 View 中显示。为了方便起见，我将其放在代码笔中:https://codepen.io/ipg1421/pen/OxRJRB
菜单是简单的下拉菜单。如果将其更改为移动 View ，子项是可见的，但如果悬停 -> 光标切换到父项。此外，最后一个菜单项 (Last) 上升并隐藏在子项下。我的兴趣是将子项作为其他菜单项而不与父项绑定(bind)。
<DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<nav style="float: right; display: inline-block;">
<div class="nav-handle-container">
<div class="nav-handle"></div>
</div>
<ul id="nav">
<li><a href="#">Main</a></li>
<li class="sub"><a href="#">Parent</a>
<ul>
<li><a href="#">Child</a></li>
</ul>
</li>
<li><a href="#">Last</a></li>
</ul>
</nav>
</div>
<script>
$('.nav-handle-container').on('click', function() {
$('#nav').toggleClass('showing');
});
</script>
</body>
</html>
CSS
.list ul {
list-style: none;
}
.list li:before {
content: '\f096';
font-family: 'FontAwesome';
float: left;
margin-left: -1.5em;
color: #1c3ba5;
}
nav {
padding-top: 25px;
padding-right: 20px;
}
nav .nav-handle-container {
box-sizing: border-box;
width: 100%;
padding: 30px;
min-height: 150px;
background: white; /* mobile container back color */
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: none;
}
nav .nav-handle-container .nav-handle {
height: 3px;
width: 30px;
background: #ff0000;
position: absolute;
display: block;
/*left: -webkit-calc(100% - 50px);*/
left: calc(100% - 50px);
top: 55px;
}
nav .nav-handle-container .nav-handle:before, nav .nav-handle-container .nav-handle:after {
content: "";
height: 3px;
width: 30px;
background: #ff0000;
position: absolute;
display: block;
}
nav .nav-handle-container .nav-handle:before {
top: -10px;
}
nav .nav-handle-container .nav-handle:after {
bottom: -10px;
}
nav ul {
font-size: 13pt;
list-style: none;
background-color: white;
overflow: hidden;
color: black; /* color menu font */
margin: 0;
padding: 0;
text-align: center;
-webkit-transition: max-height 0.4s ease-in-out;
transition: max-height 0.4s ease-in-out;
}
nav ul li {
display: inline-block;
border-radius: 5px;
}
nav ul li a {
text-decoration: none;
color: inherit;
display:block; /* a tag full click in menu */
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
nav ul li:hover {
color: white; /* color menu active font */
background: #ff0000;
}
nav ul li.sub {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
nav ul li.sub ul {
display: none;
width: 300px;
position: absolute;
margin: 0;
padding: 0;
list-style-type: none;
background: #ffffff;
border: 1px solid #ff0000;
border-bottom: 5px solid #ff0000;
}
nav ul li.sub:hover ul {
display: block;
position: absolute;
}
nav ul li.sub ul li {
display: block;
border-radius: 0px;
}
nav ul li.sub ul li:hover {
background: black;
}
@media screen and (max-width: 760px)
{
nav {
padding-top: 0px;
padding-right: 0px;
width: 100%;
}
nav .showing {
max-height: 30.5em;
border-bottom: solid #ff0000 3px;
}
nav ul {
max-height: 0px;
}
nav ul li {
box-sizing: border-box;
width: 100%;
text-align: right;
font-size: 1.0em;
border-radius: 0px;
}
nav ul li a {
padding-right: 20px;
padding-top: 15px;
padding-bottom: 15px;
}
nav .nav-handle-container {
display: table-row;
}
nav ul li.sub {
border-radius: 0px;
position: relative;
}
nav ul li.sub ul {
display: block;
position: static;
max-height: none;
width: 100%;
border: 0px;
}
}
如果有人能帮忙，真的非常感谢
最佳答案
您好，在移动 View 中删除 position:absolute
使用这个
@media only screen and (max-width: 767px) {
nav ul li.sub:hover ul {
display: block;
position: relative;
}
}
关于jquery - 在移动 View 中切断父子连接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46353910/
27
4
0
只是想知道 Jquery Mobile 是否足够稳定以用于实时生产企业移动应用程序。 有很多 HTML5 框架，因为我们的团队使用 JQuery 已经有一段时间了，我们更愿意使用 Jquery 移动框
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题. 关闭 3 年前。 Improve t
所以我尝试在 JavaScript 中对元素进行拖放。我使用的视频教程在这里； https://www.youtube.com/watch?v=KTlZ4Hs5h80 。我已经按照它的说明进行了编码，
无法在移动 iOS(safari 和 chrome)上自动播放以前缓存的 mp3 音频 我正在 Angular 8 中开发一个应用程序，在该应用程序的一部分中，我试图在对象数组中缓存几个传入的音频 m
Git 基于内容而不是文件，所以我目前理解以下行为，但我想知道是否有特殊选项或 hack 来检测此类事情: git init mkdir -p foo/bar echo "test" foo/a.tx
我正在寻找语义 ui 正确的类来隐藏例如移动 View 中的 DIV。在 Bootstrap 中，我们有“visible-xs”和“hidden-xs”。 但是在语义ui上我只找到了“仅移动网格” 最
我正在使用 ubuntu 和 想要移动或复制大文件。 但是当我与其他人一起使用服务器时，我不想拥有所有内存并使其他进程几乎停止。 那么有没有办法在内存使用受限的情况下移动或复制文件？ 最佳答案 如果你
这些指令有什么区别？以 ARM9 处理器为例，它不应该是: ASM: mov r0, 0 C: r0 = 0; ASM: ld r0, 0 C: r0 = 0; ? 我不知道为什么要使用一个或另一个:
我有一个文件夹，其中包含一些随机命名的文件，其中包含我需要的数据。 为了使用数据，我必须将文件移动到另一个文件夹并将文件命名为“file1.xml” 每次移动和重命名文件时，它都会替换目标文件夹中以前
我经常在 IB/Storyboard 中堆叠对象，几乎不可能拖动其他对象后面的对象而不移动前面的对象。无论如何我可以移动已经选择但位于其他对象后面的对象吗？当我尝试移动它时，它总是选择顶部的对象，还是
几个月前，我看到 Safari 7 允许推送通知，它似乎是一个非常有用的工具，除了我看到的每个示例都专注于桌面浏览，而不是移动设备。 Safari 推送通知是否可以在移动设备上运行，如果没有，是否有计
我有一个简单的 View 模型，其中包含修改后的 ObservableCollection使用 SynchronizationContext.Current.Send在 UI 线程上执行对集合的更改。
关于cassandra创建的数据文件和系统文件的位置，我需要移动在“cassandra.yaml”配置文件中设置的“commitlog_directory”、“data_file_directorie
我有这个代码 $(function() { var message = 'Dont forget us'; var original; var txt1 = ' - '; $(wind
我的客户报告说他的网站有一个奇怪的问题。该网站的 URL 是 your-montenegro.me 在 基于 Android 的浏览器 上加载时，页面底部会出现一个奇怪的空白区域。以下是屏幕截图: 华
我有这个 HTML 标记: Express 300 bsf Sign Up 我需要将元素从 DOM 上的一个
我有一个可重新排序的 TableView (UITableView 实例)。尽管我已经实现了 UITableViewDataSource 方法: tableView:moveRowAtIndexPat
我的客户报告说他的网站有一个奇怪的问题。该网站的 URL 是 your-montenegro.me 在 基于 Android 的浏览器 上加载时，页面底部会出现一个奇怪的空白区域。以下是屏幕截图: 华
我需要在拖放或复制/剪切和粘贴(复制与移动)期间获取操作类型。它是一个 Swing 应用程序，并且实现了 TransferHandle。我在操作结束时需要此信息，在 importData 方法中。 对
我编写了一个具有 add 和 get 方法的 SortedIntList 类。 我调用以下四个方法: SortedIntList mySortedIntList = new SortedIntList
我是一名优秀的程序员,十分优秀！