導航條裏二級菜單的定位問題

時間 2019-12-18

標籤導航二級菜單定位問題欄目系統網絡简体版

原文原文鏈接

先看圖：javascript

需求：css

1.子菜單的列數和高度都是不肯定的，例如上圖的菜單一有兩列子菜單，菜單二隻有一列子菜單，菜單四有四列子菜單，而且高度也不同。要求整個子菜單在父菜單下居中顯示。html

2.要求子菜單列之間有分割線。java

3.父菜單的寬度和子菜單的列寬度是固定的、已知的。web

解決辦法：瀏覽器

1、居中定位問題：spa

1.爲了能讓子菜單定位到相應的父菜單之下，直接將子菜單代碼寫在父菜單裏code

      <li>
          <a href="javascript:">菜單一</a>
          <div class="sub-menu">
            <div class="sub-wrap">
              <div class="sub-content">
                <dl>
                  <dt>子菜單一</dt>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                </dl>
                <dl>
                  <dt>子菜單一</dt>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                </dl>
              </div>
            </div>
          </div>
    </li>

2.爲了不影響到其餘的文檔流須要對其設置爲絕對定位，使其脫離正常的文檔流，同時父菜單設置爲相對定位，使得子菜單能相對父菜單定位。htm

.sub-menu{
  position:absolute;
}
.navbar>li{
  position:relative;  
}

3.爲了使子菜單的全部列在同一「行」顯示，須要設置子菜單列的顯示方式爲：inline-block，而且不換行，另外視狀況還須要設置垂直對其方式爲text-top。圖片

.sub-menu dl{
 vertical-align: text-top;
 display:inline-block;
}
.sub-menu .sub-content{
  white-space: nowrap;
}

4.這時子菜單應該是在父菜單的正下方，而且左側和父菜單的左側對齊，擁有本身的大小。爲了能相對父菜單居中顯示，須要增長一層包裹容器，同時進行如下設置：

.sub-menu{
  margin-left:65px;/*值爲菜單列寬度的一半*/
}
.sub-menu>.sub-wrap{
  position:relative;
  left:-50%;
}

至此便實現了子菜單相對父菜單的居中顯示。

2、分割線問題：

因爲每列子菜單的高度是不定的，同時也不能使用：height:100%，來使全部子菜單列的高度一致。因此不能簡單地設置子菜單列的邊框來實現分割線。

這時能夠直接在文檔中插入一個空標籤來顯示分割線，也可使用:before僞類來添加一個分割線，同時爲了使分割線的高度小於整個子菜單的高度，須要再加上一層包裹容器，並設置外層容器的內邊距值。

.sub-menu>.sub-wrap{
  padding:10px;
}
.sub-menu>.sub-wrap>.sub-content {
  position:relative;
}
.sub-menu>.sub-wrap>.sub-content dl + dl:before{
  content: "";
  position: absolute;
  height: 100%;
  width: 2px;
  background: #fff;
  top:0;
  margin-left: -49px;/*值爲子菜單列寬度的一半（假如忽略分割線自己的寬度）*/
  margin-left: 0\0\9;/*ie*/
}

這裏值得注意的是設置分割線爲絕對定位（相對於父容器的父容器定位）後，ie下分割線默認對齊父容器的左側，其餘瀏覽器（不知道是否是全部）默認居中對齊父容器，因此須要設置一個負的外邊距，而後針對ie去掉這個外邊距。

如下是圖片例子的源碼：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ol, ul{
  padding:0;
  margin: 0;
}
li{
  list-style: none;
}
a{
  text-decoration:none;
}
nav{
  background-color:#e62129;
}
.navbar{
  width:980px;
  height:45px;
  margin:0 auto;
}
.navbar>li{
  float:left;
  width:130px;
  text-align:center;
  position:relative;  
}
.navbar>li>a{
  color:#fff;
  display: inline-block;
  width: 100%;
  height:45px;
  line-height:45px; 
}
.navbar>li:hover,.navbar>li>a:focus{
  background-color:#ccc;
}
.navbar>li:hover .sub-menu,.navbar>li>a:focus+.sub-menu{
  display:block;
}
.sub-menu{
  position:absolute;
  margin-left:65px;/*值爲菜單列寬度的一半*/
  display:none;
}
.sub-menu .sub-wrap{
  position:relative;
  left:-50%;
  background-color:#ccc;
  padding:10px;
}
.sub-menu .sub-content{
  position:relative;
  white-space: nowrap;
}
.sub-menu dl{
 width:100px;
 vertical-align: text-top;
 display:inline-block;
 padding:5px;
 margin:0;
}
.sub-menu dl>dd{
  margin:0;
}
.sub-menu .sub-content dl + dl:before{
  content: "";
  position: absolute;
  height: 100%;
  width: 2px;
  background: #fff;
  top:0;
  margin-left: -50px;/*值爲子菜單列寬度的一半（假如忽略分割線自己的寬度）*/
  margin-left: 0\0\9;/*ie*/
}
</style>
</head>
<body >
  <header>
    <nav>
    <ul class="navbar">
      <li>
          <a href="javascript:">菜單一</a>
          <div class="sub-menu">
            <div class="sub-wrap">
              <div class="sub-content">
                <dl>
                  <dt>子菜單一</dt>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                </dl>
                <dl>
                  <dt>子菜單一</dt>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                </dl>
              </div>
            </div>
          </div>
    </li>
    <li>
          <a href="javascript:">菜單二</a>
          <div class="sub-menu">
            <div class="sub-wrap">
              <div class="sub-content">
                <dl>
                  <dt>子菜單一</dt>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                </dl>
              </div>
            </div>
          </div>      
        </li>
        <li>
          <a href="javascript:">菜單三</a>
          <div class="sub-menu">
            <div class="sub-wrap">
              <div class="sub-content">
                <dl>
                  <dt>子菜單一</dt>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                </dl>
                <dl>
                  <dt>子菜單一</dt>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                </dl>
                <dl>
                  <dt>子菜單一</dt>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                  <dd>子菜單</dd>
                </dl>
              </div>
            </div>
          </div>    
        </li>
        <li>
          <a href="javascript:">菜單四</a>
          <div class="sub-menu">
            <div class="sub-wrap">
              <div class="sub-content">
                <dl>
                  <dt>子菜單一</dt>
                </dl>
                <dl>
                  <dt>子菜單一</dt>
                </dl>
                <dl>
                  <dt>子菜單一</dt>
                </dl>
                <dl>
                  <dt>子菜單一</dt>
                </dl>
              </div>
            </div>
          </div>     
        </li>
        <li><a href="javascript:">菜單五</a></li>
    </ul>
  </nav>
  </header>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。