使下拉导航跨越浏览器的宽度，即使父导航具有固定宽度

Making a drop down nav span the width of the browser even if parent nav has a fixed width

本文关键字：导航固定宽度跨越浏览器更新时间：2024-02-06

我有一个下拉导航，我想跨越浏览器的宽度（类似于这里的iwc），我面临的问题是父导航的固定宽度为960px，所以下拉导航被限制在这个宽度。

有什么帮助吗？谢谢

JS

$(document).ready(function() {
    $('li.nav').attr('class', 'shownav');//this removes the css class that is targetted by the rules so .js will now take over
    $('.menu li.shownav').click(function() {
        //will auto slide down content below it for it to fit
        $('ul', this).slideToggle();
    });
});

HTML

<header>
    <div class="wrap">
        <nav>
            <ul class="menu">    
              <li><a href="/">Home</a></li>        
                <li class="nav"><a href="#">Services</a>
                <ul class="products-nav">
                    <li><a href="/">Submenu</a></li>
                    <li><a href="#">Submenu</a></li>
                    <li><a href="#">Submenu</a></li>
                    <li><a href="#">Submenu</a></li>
                </ul>
              </li>        
              <li><a href="#">Projects</a></li>
              <li><a href="#">Projects</a></li>     
              <li><a href="#">Projects</a></li>     
              <li><a href="#">Projects</a></li>     
            </ul>
        </nav>
    </div>
</header>
<div class="banner">
</div>

CSS

.wrap {
    margin: 0 auto;
    width: 960px;
}
.banner {
    background: #007715;
    width: 100%;
    height: 400px;
    color: #FFF;
    text-align: center;
}
.menu>li {
    display: inline-block;
    width: 132px;
    text-align: center;
    position: relative;
}
.menu>li>a {
    color: #007715;
    font-size: 0.813em; /* 13px */
    font-weight: 700;
    height: 120px;
    line-height: 120px;
    text-transform: uppercase;
}
.menu>li.nav>ul,.menu>li.shownav>ul { 
    display: none;
    position: absolute;
}
.menu>li.nav:hover>ul {
    display: block;
}
.products-nav {
    background: #FFF;
    border-bottom: 1px solid #d2d3d0;
    padding: 40px 0;
    position: absolute;
    width: 100%;
    min-width: 960px;
    left: 0;
}
.products-nav>li {
    width: 25%;
    display: inline-block;
}

jsfiddle

这是FIDDLE

<li class="nav"><a href="#">Services &#9660;</a>
  <ul class="shownav">
    <li><a href="/">Submenu 1</a></li>
    <li><a href="#">Submenu 2</a></li>
    <li><a href="#">Submenu 3</a></li>
    <li><a href="#">Submenu 4</a></li>
  </ul>
</li>        
<li class="nav"><a href="#">Projects &#9660;</a>
  <ul class="shownav">
    <li><a href="/">Submenu 5</a></li>
    <li><a href="#">Submenu 6</a></li>
    <li><a href="#">Submenu 7</a></li>
    <li><a href="#">Submenu 8</a></li>
  </ul>
</li>

.menu li.nav ul,
.menu li.shownav ul { 
  display: none;
  position: absolute;
}
/*
.menu>li.nav:hover>ul {
  display: block;
}
*/
.shownav {
  background: #fff;
  border-bottom: 1px solid #d2d3d0;
  padding: 0;
  position: absolute;
  min-width: 960px;
  z-index: 9999;
}
.shownav li {
  width: 25%;
  display: block;
  float: left;
  padding: 20px 0;
}
.shownav li:hover {
  background: #eee;
}

$(function() {
  $('.nav').click(function() {
    $('.shownav').slideUp(600);
    $(this).find('.shownav')
      .css({
         width: $(window).innerWidth() + 'px',
         left: - $(this).offset().left + 'px'
      })
      .stop()
      .slideDown(600);
  });
  $('.shownav').mouseleave(function() {
    $(this).slideUp(600);
  });
});