个人中心
文章发布
退出
作者热门文章
- 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
我有一个自定义的 android 开关，它是这样定义的 和像这样的拇指选择器项
很不情愿地，我请求你们帮助我克服我的大脑卡住。我正在录制音频，但遇到一个问题，无法在不丢失一半的情况下获取录制的音频。 recAudioInput = recAudioContext.createMe
我正在学习本教程:http://code.tutsplus.com/tutorials/android-user-interface-design-creating-a-numeric-keypad-
我在 Swift 中使用 CGImageCreateWithImageInRect 在触摸位置创建部分图像的副本。 我的代码运行良好，除非用户触摸屏幕边缘并且矩形大小落在 View 框架之外。它不是返
我有一张正在创建的 map ，它的一部分似乎被切断或偏离了中心。我已经尝试添加 google.maps.event.triggerr(map, 'resize') 但它仍然被切断。有什么想法吗？
我有一个包含 5 列的数据框，所有列都包含数值。列代表时间步长。我有一个阈值，如果在规定时间内达到，就会阻止值发生变化。所以假设原始值是 [ 0 , 1.5, 2, 4, 1] 排列成一行，阈值是 2
有没有办法以编程方式关闭电源或关闭 Mac 上的 USB 端口？ 最佳答案 我相信 USB 电源通常直接来自电源。它可能会通过主板或其他一些硬件将其与数据线结合起来，但我认为电压不会通过任何可编程电路
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
Android 上是否有接口(interface)或 API 或其他东西允许应用弹出电缆并停止从电缆供电或接收电源？ 我查看了 USBDevice(包括 USBInterfaces)，似乎找不到任何可
我知道我可以让 Navigation Header 在 actionBar 上滑动，但我只想将整个 Navigation drawer 向下移动，因为我想保持“后退”按钮和 actionBar 始终可
我有一个主要的 viewController A 和一个 UITabBar。我的问题是，当我滚动到最后一个单元格，然后在 UITableView 中单击单元格进入 viewController B，然
我有一个 Web 应用程序，在 Safari 中呈现时看起来不错，但浏览器不遵守打印媒体查询。在 Chrome 中，整个可打印区域看起来都不错，但在 Safari 中，它似乎只是可见内容的一些变体。
当使用带有 SeekBar View 的自定义 thumb drawable 时，拇指 drawable 在 View 的左右边缘被剪裁。 如何解决此问题？ 最佳答案 您应该可以通过设置 paddin
我在文件中有一个字符串: git@github.com:myorg/Myrepo.git git@github.com:myorg/Mysecondrepo.git git@github.com:my
我有一个信息亭网页，其中加载了55px标题，而iFrame则占据了其下方的其余窗口。在iFrame中，我有一个页面可以懒惰地加载项目网格。我们一次加载50个项目，然后再加载50个，依此类推。每个项目都
我正在使用jquery form plugin它使用 jquery ajax 来完成大部分工作。我们有 jquery 1.7.2 我们使用它通过 ajax 向服务器发送表单，并返回指示成功的值或返回带
这是我的按钮元素: Let Me In, please! 这是 CSS: .btn-submit { margin: 0; padding: 0; border: none; font-family:
我的 CSS 样式表中有以下类: .errormsg { border:solid 1px Red; padding:5px 20px 5px 20px; margin:5px; co
我将 JWPlayer 与包含字幕的 HLS 文件一起使用。但是，当我在 iPhone 或其他 iOS 设备上播放此文件时，它会切断字幕: 有没有办法提高移动设备上字幕的高度？我的 HLS 文件是:
我有一个放置在 View 内部的 UIScrollView(界面生成器文档 .xib/.m/.h)，但是由于 UITabBarController，UIScrollView 的下半部分被剪裁并且不显示
我是一名优秀的程序员,十分优秀！