- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我努力让这个菜单在我的页面上运行,但我仍在努力处理移动 View 。
我想像大多数经典导航一样设计它的样式,比如这个:
100% 宽度和每行一个元素的移动菜单
我试过:
@media (max-width :899px){
.site-nav {
display: block;
width: 100%;
但这对 flex 元素没有影响。
有人会如此友善并提示我从哪里开始吗?
jQuery( document ).ready( function( $ ) {
// add JS-classes into the HTML-Tag
$('html').addClass('js');
// add classes for sub menus and sub menus toggle button
$(".site-nav li > ul").parent('li').addClass('has-sub-menu');
$(".site-nav li > ul").addClass('sub-menu');
// create button for expand- und collapse the menu and render it into the header
var create_toggle_nav_button = ['<div class="toggle-site-nav">Menu</div>'].join("");
$("header").append(create_toggle_nav_button);
// create button for expand- und collapse the sub menu for mobile view and add them to all sub menus
var create_sub_toggle_button = ['<span class="toggle-sub-menu"></span>'].join("");
$(".has-sub-menu > a").after(create_sub_toggle_button);
// define variables
var $menu = $('.site-nav'),
$toggle_nav = $('.toggle-site-nav'),
$toggle_sub_menu = $('.toggle-sub-menu');
// collapse and expand function of the main menu
$toggle_nav.click(function(e) {
e.preventDefault();
$menu.slideToggle();
});
// collapse and expand function of the drop down menu for mobile view
$toggle_sub_menu.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active').next('ul').slideToggle();
});
// display hidden elements again, when browserwindow is resized by user
$(window).resize(function(){
var w = $(window).width();
if(w > 900) {
$('.site-nav').removeAttr('style');
$('.sub-menu').removeAttr('style');
}
});
// collapse navigation automatically to the left, when it run out of the viewport
$(".site-nav .has-sub-menu").on('mouseenter mouseleave', function (e) {
var nav_element = $('ul:first', this);
var element_offset = nav_element .offset();
var element_offset_left = element_offset.left;
var element_width = nav_element.width();
var viewport_width = $(window).width();
var element_in_viewport = (element_offset_left + element_width <= viewport_width);
if ( ! element_in_viewport ) {
$(this).addClass('sub-left');
} else {
$(this).removeClass('sub-left');
}
});
});
* {
margin:0;
padding:0;
list-style:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body::after {
content:'';
position: fixed;
bottom:1em;
right:1em;
opacity: 0.5;
font-size: 0.8em;
z-index: 10;
}
header {
width:100%;
background: white;
}
.container {
max-width:1000px;
margin:0 auto;
}
.logo {
display:block;
width:100%;
padding:1em;
text-decoration:none;
color:gray; /* ? */
}
.site-nav {
z-index: 10;
}
.site-nav>ul {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: stretch;
flex-wrap: wrap;
margin: auto;
}
.site-nav >ul> li {
display: inline-block;
flex-wrap:wrap;
width:auto;
padding:0;
}
.site-nav a {
display:inline-flex;
align-content: stretch;
padding:1em;
white-space: nowrap;
text-decoration:none;
height:100%;
width:100%;
color:white; /* text color of all */
background:#5a595a; /* background color main nav Link 1 */
border-top: 1px solid rgba(0,0,0,0.5);
z-index: 10;
}
.site-nav a:hover {
background:#8c8e94; /* mouseover color Link 1 and Link 1.1 opacity */
}
.js .site-nav {
display:none;
}
.js .sub-menu {
display:none;
position:absolute;
top:100%;
left:0px;
z-index: 12;
}
.js .sub-menu .sub-menu {
top:0px;
right:100%;
left:auto;
text-align:right;
}
.js .has-sub-menu {
position:relative;
top:100%;
left:0px;
}
.sub-menu li:last-of-type {
padding-bottom:0;
}
.sub-menu a {
background:#676567; /* background color menu 2.1 only */
}
.sub-menu .sub-menu a {
background:#747274; /* background color menu 2.1.1 only */
}
.sub-menu .sub-menu a:hover {
background:#8c8e94; /* mouseover color Link 1 and Link 1.1 */
}
/* toggles */
.toggle-site-nav {
background:#5a595a; /* background color of menu button when resized */
display:block;
position:absolute;
right:0;
top:0;
padding:1em;
color:white; /* text color of the word menu in menu button when resized */
cursor:pointer;
z-index: 10;
}
.toggle-site-nav:hover {
background:rgba(0,0,0,0.5); /* mouseover color of menu button when resized */
}
.toggle-sub-menu {
display:none;
}
.js .toggle-sub-menu {
display:flex;
position:absolute;
align-content: center;
right:0em;
top:1.05em; /* hight of the borders */
background:#817e81; /* backgound of annoying squares when resized */
height: 15px;
width: 15px;
cursor:pointer;
z-index: 11;
}
.js .toggle-sub-menu.active {
background: #DCDCDC; /* color of annoying square after clicking on it when resized */
}
.toggle-sub-menu:hover,
.toggle-sub-menu.active:hover {
background-color: rgba(0,0,0,0.4); /* mouseover of annoying squares when resized */
}
@media screen and (min-width:900px) {
.logo {
width:auto;
float:left;
}
.site-nav {
width:auto;
display: flex !important;
}
.site-nav a {
border:none;
}
.site-nav li {
width:auto;
padding:0;
}
.site-nav li:hover {
background:rgba(52,50,52,1); /* mouseover background color of all menu */
}
.has-sub-menu a {
padding-right: 2em; /* check this value */
}
.has-sub-menu:after { /* check this for editing the stripes */
display:flex;
content:'';
position: absolute;
align-content: center;
top:1.1em;
right: 0;
width:1em;
height:30%;
background:#817e81; /* color of stripes in main menu when it has submenu */
}
/* sub menu */
.site-nav li:hover > .sub-menu {
display: block;
position: absolute;
width: 300px; /* width of sub menus */
padding: 0 25px 25px 25px;
left: -25px;
}
.sub-menu {display:none;}
.sub-menu li {
width:100%;
}
.sub-menu > a {
width:100%;
display:block;
}
.has-sub-menu .has-sub-menu:after {
background:#817e81; /* color of stripes of Link 2.1 menu when it has submenu */
}
.has-sub-menu .has-sub-menu:hover .sub-menu {
display:block;
position:absolute;
width: 300px; /* width of subsub menues */
padding: 0 25px 25px 25px;
left: 224px;
top: 0px;
}
.toggle-site-nav,
.toggle-sub-menu {
display:none !important;
}
/* navigations items, which collapse to the left */
.sub-left > .sub-menu {
left:auto;
right:0;
}
.site-nav .sub-menu .sub-left > .sub-menu {
left:-275px;
}
}
@media (max-width :899px){
.site-nav {
z-index: 13;
margin-top: 19px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="container">
<a href="#" class="logo"></a>
<nav class="site-nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.1</a>
<ul>
<li><a href="#">Link 2.1.1</a></li>
<li><a href="#">Link 2.1.2</a></li>
<li><a href="#">Link 2.1.3</a></li>
<li><a href="#">Link 2.1.4</a></li>
</ul>
</li>
<li><a href="#">Link 2.1</a></li>
</ul>
</li>
<li><a href="#">loooooong</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
<li><a href="#">loooooooooooooooooong</a></li>
<li><a href="#">Link 3.5</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a>
<ul>
<li><a href="#">Link 7.1</a></li>
<li><a href="#">Link 7.2</a></li>
<li><a href="#">Link 7.3</a>
<ul>
<li><a href="#">Link 7.3.1</a></li>
<li><a href="#">Link 7.3.2</a></li>
<li><a href="#">loooooooong</a></li>
<li><a href="#">Link 7.3.4</a></li>
<li><a href="#">Link 7.3.5</a></li>
</ul>
</li>
<li><a href="#">Link 7.4</a></li>
<li><a href="#">Link 7.5</a></li>
</ul>
</li>
<li><a href="#">Link 8</a></li>
</ul>
</nav>
</div>
</header>
最佳答案
试试这个
@media screen and (max-width: 899px){
.site-nav>ul {
display: block !important;
width: 100%;
margin: auto;
}
.site-nav >ul> li {
display: block !important;
width: auto;
width: 100%;
}
}
关于css - 如何使用@media 为移动 View 重新设置菜单样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46909410/
使用 Foundation 6.3.1,我希望在桌面上显示 Canvas 外菜单,在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
我正在处理一个页面,该页面有一个显示“更新”的链接。当用户单击此链接时,我希望表单使用幻灯片效果并显示在链接下方。提交表单后,它会更新数据库,并且菜单会显示。 我知道这可以用 JavaScript 来
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
您好,我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
我的应用程序中有一个菜单,当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。 然而 有时当我点击菜单打开触发器时,菜单实际上不会打开,但我仍然收到触觉反馈。我只在菜单实际
也许这是一个简单的解决方案,但我坚持了下来。 这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单 我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径,但仅在下拉菜单上设置
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素,但它们存在一些问题。 您必须瞄准鼠标。当您将鼠标移开时,有些菜单会折叠,而有些
我有 codeigniter 背景。现在,我正在学习 Laravel。所以,我处于这种情况(示例),我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ,他们可以访问菜单 a、菜单 b
我正在学习 JQuery 的基础知识,我的老师显示的 menu() 看起来根本不像我的。 这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
- SELECT - 上面的显示:none不起作用。我也尝试过“隐藏”,但没有成功。 如何隐藏此选择菜单? 最佳答案 换行与 或并将 id 添加到标签。 - SELECT
我使用 Jquery 创建菜单,如下所示: homeinfo2info3 Jquery 代码如下: $(document).ready(function(){ $(".prof_info1").unb
我是 C 新手,我需要为项目构建一个带有循环的菜单。我有两个问题。 1) 我想在 else 中添加一个字符,如果在主菜单中按“2”后询问某事,问题将是“你要去参加事件吗?”用户可以输入聊天“Y”或“N
大家好,过去几个小时我一直在为类(class)编写这个程序,但似乎无法解决最后两个问题。它基本上是一个略微修改的 CashRegister 类,通过菜单提供基本功能。我遇到的问题是: 1) 用户第一次
List studentInfo = new LinkedList(); int choice; boolean flag = true; Student student =
我正在使用 bootsrap 4 alpha 6 和 midnight.js 来更改导航菜单切换器的颜色。我想在它旁边插入一个文本(菜单)。捕获中的示例。对于文本切换器,我使用 fontawesome
我正在尝试使用 CSS 菜单解决菜单在 IE 6 中无法正确显示的问题 alt text http://content.screencast.com/users/Dokmanc/folders/Jin
我无法让这段代码工作 - 我想要的是当我将鼠标悬停在圆圈上时,菜单会出现,然后如果我将鼠标从圆圈或菜单上移开,它就会消失。我尝试做的任何事情都是非常错误的,例如 onmouseover 在圆圈上然后在
我有一个典型的 CSS 顶部导航,当您滑过不同的父菜单项时,它会显示一个子菜单。如何更改代码以保持显示事件子菜单。因此,如果您在该父菜单项或其子项之一的页面上,它将保持显示该子菜单,除非您将鼠标悬停在
我很亲近。我怎样才能在我的 上有 MENU 1。 fiddle显示为默认菜单选项,然后在 MENU 2 悬停时更改? 提前致谢。继续编码! :) 最佳答案 要根据您的响应完全远离 jquery 进行编
我是一名优秀的程序员,十分优秀!