搜索
搜索

锁定菜单在滚动时略微关闭

froadie 发表于 Dev
8
奶油

我正在使用CSS和HTML5设置水平菜单。（我的经验有限。）这是我的菜单css：

.horizontalMenu { 
    background-color:  white;
    display: inline-block;
}

.horizontalMenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    text-align: left;
    box-shadow: 0 6px 10px -1px #888888;
    behavior: url(/css/pie/PIE.htc);
}

.horizontalMenu ul li {
    display: inline-block;
    background-color: white; 
    white-space: nowrap;
}

.horizontalMenu a {
    display: block;
    padding: 0 15px 0 15px; 
    color: black;
    font-size: 16px;
    line-height: 45px;
    text-decoration: none;
    cursor: pointer;
}

.horizontalMenu a:hover{ 
    background-color: #B0B0B0;
}

.horizontalMenu a.active{
    background-color: #6789AE;
}

/* Hide Dropdowns by Default */
.horizontalMenu ul ul {
    display: none;
    position: absolute; 
    top: 45px;
    z-index: 1;
}

/* Display Dropdowns on Hover */
.horizontalMenu ul li:hover > ul {
    display: block;
}

/* First Tier Dropdown */
.horizontalMenu ul ul li {
    float: none;
    display: list-item;
    position: relative;
}

/* Sub-menu options should be compact */
.horizontalMenu ul ul a{
    font-size: 14px;
    line-height: 30px;
}

/* Second, Third and more Tiers */
.horizontalMenu ul ul ul{
    position: absolute;
    left: 100%;
    top: 0;
}

我需要添加“锁定”功能，以便如果用户向下滚动到菜单所在的位置，则菜单将被锁定到屏幕顶部并随之出现。我通过添加“固定”类并使用JS代码动态应用它来实现此目的：

.horizontalMenu.fixed {
    position:fixed;
    top:0;
    display:block;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width:710px;
}

JS代码：

$(function(){
    var numScroll = 240; //number of pixels before modifying styles

    $(window).bind('scroll', function () {
        if ($(window).scrollTop() > numScroll) {
            $('.horizontalMenu').addClass('fixed');
        } else {
            $('.horizontalMenu').removeClass('fixed');
        }
    });
});

这样做相对不错，除了我在不同浏览器中硬编码为710px的宽度似乎略有不同外，因此我似乎找不到适合所有浏览器的宽度。在页面顶部处于常规状态的菜单使用自动宽度居中（通过我未设置且未完全理解的包含div中的代码），并且在某些浏览器中向下滚动时会变宽。有什么方法可以将“固定的”类宽度设置为自动宽度，而不是将其硬编码为特定的像素宽度，从而使其在所有浏览器中都能工作？

我试图拼凑一个jsfiddle，但是在设置它来说明我的观点上并没有完全成功，但这是一个基本思想。

为了清楚起见进行更新：

例如，这种带有346px硬编码宽度的小提琴在Chrome中对我来说非常合适，但在FF和IE中则略有不同。

我确实想将宽度设置为auto，但是当我尝试将其扩展以占据屏幕的整个宽度时，可能是由于“ display：block”所致。我对CSS的了解不足，无法正确设置此设置。

i

好吧，我会说您需要重新考虑您的问题，因为这需要将您的元素视为table，因此您可以利用display:table和一些js计算来使您的元素居中：

以下代码段是原始的具有相同菜单项的代码段。

var numScroll = 20;
$(window).bind('scroll', function() {
  if ($(window).scrollTop() > numScroll) {
    $('.horizontalMenu').addClass('fixed').css('left', function(){
      return ($(window).width()-$(this).width())/2
    });
  } else {
    $('.horizontalMenu').removeClass('fixed').removeAttr('style');
  }
});
.horizontalMenu {
  background-color: white;
  display: table;
  margin: 0 auto;
}

.horizontalMenu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  text-align: left;
  box-shadow: 0 6px 10px -1px #888888;
  behavior: url(/css/pie/PIE.htc);
}

.horizontalMenu ul li {
  display: table-cell;
  background-color: white;
  white-space: nowrap;
}

.horizontalMenu a {
  display: table-cell;
  padding: 0 15px 0 15px;
  color: black;
  font-size: 16px;
  line-height: 45px;
  text-decoration: none;
  cursor: pointer;
}

.horizontalMenu a:hover {
  background-color: #B0B0B0;
}

.horizontalMenu a.active {
  background-color: #6789AE;
}


/* Hide Dropdowns by Default */

.horizontalMenu ul ul {
  display: none;
  position: absolute;
  top: 45px;
  z-index: 1;
}


/* Display Dropdowns on Hover */

.horizontalMenu ul li:hover > ul {
  display: table;
}


/* First Tier Dropdown */

.horizontalMenu ul ul li {
  float: none;
  display: list-item;
  position: relative;
}


/* Sub-menu options should be compact */

.horizontalMenu ul ul a {
  font-size: 14px;
  line-height: 30px;
}


/* Second, Third and more Tiers	*/

.horizontalMenu ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}


/* If any menu options are added, the width needs to be adjusted */

.horizontalMenu.fixed {
  position: fixed;
  top: 0;
  display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='horizontalMenu'>
    <ul>
      <li><a>Website Config &#9662;</a>
        <ul>
          <li><a>Include Files</a></li>
        </ul>
      </li>
      <li><a>User Training &#9662;</a>
        <ul>
          <li><a>Upload new webinar &#9656;</a>
            <ul>
              <li><a>Training webinar</a></li>
              <li><a>Some other webinar</a></li>
            </ul>
          </li>
          <li><a>Upload new guide</a></li>
        </ul>
      </li>
      <li><a>Data</a></li>
    </ul>
  </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />END

在小提琴中，我们添加了更多菜单项，并且效果很好。

查看其他包含更多菜单项的代码段。 

var numScroll = 20;
$(window).bind('scroll', function() {
  if ($(window).scrollTop() > numScroll) {
    $('.horizontalMenu').addClass('fixed').css('left', function(){
      return ($(window).width()-$(this).width())/2
    });
  } else {
    $('.horizontalMenu').removeClass('fixed').removeAttr('style');
  }
});
.horizontalMenu {
  background-color: white;
  display: table;
  margin: 0 auto;
}

.horizontalMenu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  text-align: left;
  box-shadow: 0 6px 10px -1px #888888;
  behavior: url(/css/pie/PIE.htc);
}

.horizontalMenu ul li {
  display: table-cell;
  background-color: white;
  white-space: nowrap;
}

.horizontalMenu a {
  display: table-cell;
  padding: 0 15px 0 15px;
  color: black;
  font-size: 16px;
  line-height: 45px;
  text-decoration: none;
  cursor: pointer;
}

.horizontalMenu a:hover {
  background-color: #B0B0B0;
}

.horizontalMenu a.active {
  background-color: #6789AE;
}


/* Hide Dropdowns by Default */

.horizontalMenu ul ul {
  display: none;
  position: absolute;
  top: 45px;
  z-index: 1;
}


/* Display Dropdowns on Hover */

.horizontalMenu ul li:hover > ul {
  display: table;
}


/* First Tier Dropdown */

.horizontalMenu ul ul li {
  float: none;
  display: list-item;
  position: relative;
}


/* Sub-menu options should be compact */

.horizontalMenu ul ul a {
  font-size: 14px;
  line-height: 30px;
}


/* Second, Third and more Tiers	*/

.horizontalMenu ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}


/* If any menu options are added, the width needs to be adjusted */

.horizontalMenu.fixed {
  position: fixed;
  top: 0;
  display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='horizontalMenu'>
    <ul>
      <li><a>Website Config &#9662;</a>
        <ul>
          <li><a>Include Files</a></li>
        </ul>
      </li>
      <li><a>User Training &#9662;</a>
        <ul>
          <li><a>Upload new webinar &#9656;</a>
            <ul>
              <li><a>Training webinar</a></li>
              <li><a>Some other webinar</a></li>
            </ul>
          </li>
          <li><a>Upload new guide</a></li>
        </ul>
      </li>
      <li><a>Data</a></li>
      <li><a>Data2</a></li>
      <li><a>Data3</a></li>
    </ul>
  </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />END

更新了小提琴。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

kendogrid过滤器菜单在mouseleave上关闭

来自分类Dev

刷新数据时，下拉菜单在ng-repeat中关闭

来自分类Dev

固定菜单在关闭画布菜单打开时丢失其固定状态

来自分类Dev

离子的两个侧面菜单在添加更多内容时不会自动滚动

来自分类Dev

Bootstrap-下拉菜单在Datepicker中单击时关闭

来自分类Dev

菜单在悬停时向左移动

来自分类Dev

关闭时自动锁定纸张

来自分类Dev

使下拉菜单略微增加

来自分类Dev

仅CSS子菜单在鼠标移出时关闭

来自分类Dev

子菜单在悬停时消失

来自分类Dev

kendogrid过滤器菜单在mouseleave上关闭

来自分类Dev

下拉菜单在关闭后无法打开

来自分类Dev

CSS下拉菜单在悬停时将滚动条添加到标题div

来自分类Dev

固定菜单在关闭画布菜单打开时丢失其固定状态

来自分类Dev

CSS下拉菜单在我单击之前关闭

来自分类Dev

响应式菜单在选择项目时未关闭

来自分类Dev

jQuery菜单在点击时滑入

来自分类Dev

Bootstrap 菜单在单击时消失

来自分类Dev

Bootstrap 侧边栏菜单在内容滚动期间重叠

来自分类Dev

子菜单在悬停时消失

来自分类Dev

下拉菜单在悬停时消失

来自分类Dev

为什么滚动/跟随菜单在滚动时会弹跳？

来自分类Dev

选择下拉菜单时，导航栏略微向右移动

来自分类Dev

为什么导航栏 Bootstrap 菜单在单击选项卡面板项时折叠关闭

来自分类Dev

防止屏幕关闭时锁定

来自分类Dev

HTML/Javascript/CSS 可折叠菜单在刷新时不会保持关闭状态

来自分类Dev

显示侧边栏菜单在页面加载时打开默认值，并在单击角度 4 中的切换按钮时关闭

来自分类Dev

javascript - 菜单在页面加载时打开

来自分类Dev

当下拉菜单在另一个组合框上关闭时，如何更新 WPF 组合框？

Related 相关文章

  1. 1

    kendogrid过滤器菜单在mouseleave上关闭

  2. 2

    刷新数据时，下拉菜单在ng-repeat中关闭

  3. 3

    固定菜单在关闭画布菜单打开时丢失其固定状态

  4. 4

    离子的两个侧面菜单在添加更多内容时不会自动滚动

  5. 5

    Bootstrap-下拉菜单在Datepicker中单击时关闭

  6. 6

    菜单在悬停时向左移动

  7. 7

    关闭时自动锁定纸张

  8. 8

    使下拉菜单略微增加

  9. 9

    仅CSS子菜单在鼠标移出时关闭

  10. 10

    子菜单在悬停时消失

  11. 11

    kendogrid过滤器菜单在mouseleave上关闭

  12. 12

    下拉菜单在关闭后无法打开

  13. 13

    CSS下拉菜单在悬停时将滚动条添加到标题div

  14. 14

    固定菜单在关闭画布菜单打开时丢失其固定状态

  15. 15

    CSS下拉菜单在我单击之前关闭

  16. 16

    响应式菜单在选择项目时未关闭

  17. 17

    jQuery菜单在点击时滑入

  18. 18

    Bootstrap 菜单在单击时消失

  19. 19

    Bootstrap 侧边栏菜单在内容滚动期间重叠

  20. 20

    子菜单在悬停时消失

  21. 21

    下拉菜单在悬停时消失

  22. 22

    为什么滚动/跟随菜单在滚动时会弹跳？

  23. 23

    选择下拉菜单时，导航栏略微向右移动

  24. 24

    为什么导航栏 Bootstrap 菜单在单击选项卡面板项时折叠关闭

  25. 25

    防止屏幕关闭时锁定

  26. 26

    HTML/Javascript/CSS 可折叠菜单在刷新时不会保持关闭状态

  27. 27

    显示侧边栏菜单在页面加载时打开默认值，并在单击角度 4 中的切换按钮时关闭

  28. 28

    javascript - 菜单在页面加载时打开

  29. 29

    当下拉菜单在另一个组合框上关闭时，如何更新 WPF 组合框？

热门标签

归档