仅在特定屏幕大小上悬停
Hover only on specific screen size
我正在为移动设备创建一个菜单,到目前为止,除了效果之外,它还可以工作。我正试图在768px以上和768px以下的窗口大小的下拉子菜单中添加一个具有悬停效果的菜单,菜单应该都显示出来,而不会出现任何悬停效果。
每当我加载初始窗口大小超过768px的网站时,悬停效果都很好,但一旦我缩小窗口大小并尝试在菜单上悬停(对于小屏幕大小),子菜单就会在悬停时淡出。基本上相反的效果正在发生。
如果我加载的网站大小小于768px,菜单工作正常,直到我将窗口大小调整到768px以上。基本上根本没有悬停效果。子菜单甚至不会显示。
我知道,我可以创建两个单独的菜单,一个用于移动设备,一个适用于桌面,并分别设置它们的样式。但是,我想尝试只使用一个菜单,因此在整个HTML文档中也只使用一种nav.menu
。
HTML(正文)
<nav class="menu">
<ul>
<li><a href="">Menu Link</a></li>
<li><a href="">Menu Link</a></li>
<li>
<a href="">Menu Link</a>
<ul>
<li><a href="">Sub Links 1</a></li>
<li><a href="">Sub Links 1</a>
<ul>
<li><a href="">more sub links</a></li>
<li><a href="">more sub links</a></li>
<li><a href="">more sub links</a></li>
<li>
<a href="">more sub links</a>
<ul>
<li><a href="">more links</a></li>
<li><a href="">more links</a></li>
<li><a href="">more links</a></li>
<li><a href="">more links</a></li>
<li>
<a href="">more links</a>
<ul>
<li><a href="">MORE LINKS!</a></li>
<li><a href="">MORE LINKS!</a></li>
<li><a href="">MORE LINKS!</a></li>
<li><a href="">MORE LINKS!</a></li>
</ul>
</li>
<li><a href="">more links</a></li>
<li><a href="">more links</a></li>
<li><a href="">more links</a></li>
</ul>
</li>
<li><a href="">more sub links</a></li>
</ul>
</li>
<li><a href="">Sub Links 1</a></li>
<li><a href="">Sub Links 1</a></li>
<li><a href="">Sub Links 1</a></li>
</ul>
</li>
<li><a href="">Menu Link</a></li>
<li><a href="">Menu Link</a></li>
</ul>
</nav>
CSS
对于CSS,我使用normalize.CSS和以下样式:
/* HTML */
html { font-size: 100%; text-overflow: ellipsis; text-rendering: optimizelegibility; word-wrap: break-word; }
/* Body */
body { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.5; color: #333333; margin: 1.5rem 0 0; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
/* Paragraphs */
p { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; margin: 1rem 0; }
/* Links */
a { font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; text-decoration: none; color: #0086eb; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
a:hover { text-decoration: underline; color: #333333; }
/* Images and Videos */
img, video { width: 100%; }
/* Youtube and Vimeo */
iframe[src*="vimeo"], iframe[src*="youtube"] { min-height: 32rem; width: 100%; }
/* Lists */
ul ul, ul ol, ol ul, ol ol { margin: 0.5rem 0; }
/* Blockquotes */
blockquote { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-style: italic; line-height: 1.5; color: #888888; margin: 1rem 0 1rem 1rem; padding: 0 1rem; border-left: 4px solid #cccccc; background: #e1e1e1; }
/* Quotes */
q { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-style: italic; line-height: 1.5; color: #333333; }
/* Code Blocks */
pre { margin: 1rem 0 0; }
pre code { padding: 0.75rem; display: block; }
/* Inline Code */
code { font-size: 0.875rem; font-family: "Inconsolata", "Lucida Console", Monaco, monospace; font-weight: normal; line-height: 1.5; color: #0086eb; padding: 0.25rem; border: 1px solid #eeeeee; background: white; }
/* Forms */
form { margin: 0; }
/* Labels */
label { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; margin: 0.25rem 1rem 0 0; display: inline-block; }
/* Input */
input { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; margin: 0 1rem 0 0; padding: 0 0.25rem; border: 1px solid #eeeeee; background: white; display: inline-block; outline: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
input:active, input:focus { -webkit-box-shadow: 0 0 4px 0 #0086eb; -moz-box-shadow: 0 0 4px 0 #0086eb; box-shadow: 0 0 4px 0 #0086eb; }
/* Textarea */
textarea { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; margin: 0 1rem 0 0; padding: 0 0.25rem; border: 1px solid #eeeeee; background: white; display: inline-block; outline: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
textarea:active, textarea:focus { -webkit-box-shadow: 0 0 4px 0 #0086eb; -moz-box-shadow: 0 0 4px 0 #0086eb; box-shadow: 0 0 4px 0 #0086eb; }
/* Input Submit */
input[type="submit"] { min-width: 0; margin: 0; padding: 0; }
/* Textarea Specific */
textarea { min-height: 6rem; }
/* Horizontal Rules */
hr { margin: 1.5rem 0; border: none; border-top: 1px solid #ccc; }
/* Figure */
figure img { display: block; }
/* Figure caption */
figcaption { font-size: 0.875rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; background: #fafafa; padding: 0.5rem 1rem; -webkit-box-shadow: 0 -1px 0 0 #e1e1e1, 1px 0 0 0 #e1e1e1, -1px 0 0 0 #e1e1e1; -moz-box-shadow: 0 -1px 0 0 #e1e1e1, 1px 0 0 0 #e1e1e1, -1px 0 0 0 #e1e1e1; box-shadow: 0 -1px 0 0 #e1e1e1, 1px 0 0 0 #e1e1e1, -1px 0 0 0 #e1e1e1; }
/* Button and Submit Input */
button, input[type="submit"] { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: white; border: 1px solid #398ee5; background: linear-gradient(#3f9eff, #398ee5); margin: 1rem 0; padding: 0.5rem 1rem; outline: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
button:hover, input[type="submit"]:hover { color: #f2f2f2; background: linear-gradient(#2591ff, #2281e2); }
/* Definition List */
dl { max-width: 100%; }
dl dt { font-size: 0.875rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.5; color: #333333; margin-top: 0.5rem 0 0 0; }
dl dd { font-size: 0.875rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; margin: 0 0 0 1.5rem; }
/* Table */
table { max-width: 100%; text-align: left; margin: 1rem 0; -webkit-box-shadow: 0 0 0 1px #e1e1e1; -moz-box-shadow: 0 0 0 1px #e1e1e1; box-shadow: 0 0 0 1px #e1e1e1; }
table tr { border-bottom: 1px solid #e1e1e1; }
table tr:last-of-type { border: none; }
table th { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.5; color: #333333; padding: 0.5rem 1rem; border-right: 1px solid #e1e1e1; }
table th:last-of-type { border: none; }
table td { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; padding: 0.5rem 1rem; border-right: 1px solid #e1e1e1; }
table td:last-of-type { border: none; }
/*
* ==================================================================== *
| 8. Menu
* ==================================================================== *
*/
.menu ul { padding: 0; margin: 0; }
.menu ul li { list-style: none; }
.menu-desktop { display: inline-block; position: relative; }
.menu-desktop > ul > li { display: inline-block; padding: 0 0.5rem; margin: 0 0.5rem; background: yellow; }
.menu-desktop li.has-sub ul { position: absolute; width: 8rem; background: red; }
JavaScript:
$window = $(window);
$window.on("load resize scroll", function (e) {
function add_remove_menu_class() {
$window = $(window);
if ($window.width() > 768) {
var $menu = $('.menu');
if ($menu.hasClass('menu-mobile')) {
$menu.removeClass('menu-mobile')
}
if ($menu.hasClass('menu-desktop')) {} else {
$menu.addClass('menu-desktop')
}
}
if ($window.width() <= 768) {
var $menu = $('.menu');
if ($menu.hasClass('menu-desktop')) {
$menu.removeClass('menu-desktop')
}
if ($menu.hasClass('menu-mobile')) {} else {
$menu.addClass('menu-mobile')
}
}
}
function add_remove_item_class() {
$window = $(window);
if ($window.width() > 768) {
var $item = $('.menu ul li');
$item.has('ul').addClass('has-sub');
}
if ($window.width() <= 768) {
$item = $('.menu ul>li');
if ($item.hasClass('has-sub')) {
$item.removeClass('has-sub')
} else {}
}
}
function list_hack() {
var $item = $('.menu>ul>li.has-sub'),
$link = $('.menu>ul>li.has-sub>a');
$item.width($link.width())
}
function position_submenu() {
var $sub = $('.menu ul li ul li.has-sub>ul');
$sub.each(function () {
var $this = $(this),
$menu = $('.menu'),
$prevItem = $this.parent(),
$prevList = $prevItem.parent(),
$prevListLen = $prevList.children().length,
$prevListWidth = $prevList.width(),
$containerPos = $prevItem.index() + 1,
$topInt = (100 / $prevListLen) * $containerPos - (100 / $prevListLen),
$topPer = $topInt + '%';
if ($menu.hasClass('right')) {
$this.css({
'top': $topPer,
'marginLeft': -1 * $prevListWidth
});
} else {
$this.css({
'top': $topPer,
'marginLeft': $prevListWidth
});
}
});
(function () {
var $subFirst = $('.menu>ul>li.has-sub>ul'),
$menu = $('.menu'),
$item = $subFirst.parent(),
$itemWidth = (parseInt($item.css('marginLeft')) + parseInt($item.css('paddingLeft'))) * -1;
if ($menu.hasClass('right')) {
$subFirst.css({
'marginLeft': -1 * $itemWidth
});
} else {
$subFirst.css({
'marginLeft': $itemWidth
});
}
})();
}
// HERE IS WHERE THE PROBLEM STARTS
function hover_on_menu() {
var $menu = $('.menu-desktop'),
$item = $menu.find('li.has-sub'),
$list = $item.find('ul'),
$dirList = $menu.find('li.has-sub>ul');
$list.hide()
// THIS FUNCTION IN PARTICULAR
$item.each(function () {
var $this = $(this),
$list = $this.children('ul');
$this.hover(function () {
$list.stop().fadeToggle(200)
});
});
}
function clean_up_for_mobile() {
var $menu = $('.menu');
$menu.find('*').removeAttr('style');
$menu.find('*').removeAttr('class');
}
add_remove_menu_class()
add_remove_item_class()
if ($window.width() > 768) {
list_hack()
position_submenu()
hover_on_menu()
} else {
clean_up_for_mobile()
}
});
以下是一个展示该问题的JSFiddle:http://jsfiddle.net/mCMm4/
在样式表的底部放一些类似的东西:
@media only screen and (min-width: 768px){
ul{
li{
a:hover{
/*Your hover effect goes here */
}
}
}
}
@media only screen and (max-width: 767px){
ul{
li{
a{
}
}
}
}
这可以使用媒体查询来完成。创建第二个样式表,该样式表仅在窗口大小小于768px时生效。在该样式表中,删除导航链接的悬停效果。
相关文章:
- 如何将屏幕分辨率乘以 80%,然后在代码中使用
- 当鼠标悬停在文本中的单词上时显示警报
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 手风琴可点击并悬停
- 在不打开聊天屏幕的情况下制作Zopim-ding代理
- 悬停功能触发器
- 如何在鼠标悬停时在另一个图像上滑动图像.
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- css(或jQuery)悬停时淡入淡出
- 使用图像数组列表的simplegallary.js显示适合桌面屏幕的图像
- jquery快速悬停问题
- jQuery:当屏幕大小改变时,如何更改默认图像和悬停图像
- 仅在特定屏幕大小上悬停
- 如何从移动响应屏幕中删除悬停功能
- “鼠标悬停”中的对象屏幕关闭
- 如何在悬停时更改屏幕区域的背景色
- 导航菜单不会根据屏幕大小从悬停切换到切换
- 当我将屏幕尺寸缩小到Bootstrap's中、小或超小,我的点击处理程序停止工作,css悬停属性也停止工作
- 调整屏幕大小时无法删除悬停效果