仅在特定屏幕尺寸上悬停

时间：2013-12-11 14:29:52

标签： javascript jquery html css

我正在创建一个移动菜单，到目前为止，它除了效果之外还有效。我试图在窗口大小超过768px且低于768px的下拉子菜单中添加一个具有悬停效果的菜单，菜单应该全部显示，不会发生任何类型的悬停效果。

每当我加载初始窗口大小超过768px的网站时，悬停效果完全正常，但是一旦我缩小窗口大小并尝试将鼠标悬停在菜单上（对于小屏幕尺寸），子菜单会淡出在悬停。基本上相反的效果正在发生。

如果我加载的网站尺寸小于768像素，菜单工作正常，直到我将窗口调整到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/

2 个答案:

答案 0 :(得分：1)

将这样的内容放在样式表的底部：

@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{

            }
        }
    }
}

答案 1 :(得分：0)

这可以使用媒体查询来完成。创建第二个样式表，仅在窗口大小小于768px时生效。在该样式表中，将悬停效果移除到导航链接。

相关问题
最新问题