尤物国产91九色综合久久,成年人黄色小视频在线观看

技術頻道 - html技術

CSS3折疊下拉菜單（深色背景）【演示/源碼下載】

作者:admin 時間:2023-5-10 10:18:18 瀏覽:

本文介紹一款CSS3實現的折疊下拉菜單，該菜單背景為深色背景。深色的背景有時候更能吸引住用戶，深色背景往往能讓人聯想到權威、嚴肅和優(yōu)雅的格調，讓網頁充滿個性和高品質。

效果圖

CSS3折疊下拉菜單（深色背景）

demo download

示例介紹

本示例使用純CSS3實現。

點擊主菜單時，展開（下拉）該菜單的項目列舉（二級菜單）。
點擊二級菜單項目或其父菜單時，折疊二級菜單。
該示例中還出現了三級、四級菜單

HTML代碼

<ul class="menu">
   <li class="list"><a href="#">菜單 1 </a> 
      <ul class="items">
         <li><a href="#"> 項目 1-1</a></li>
         <li><a href="#"> 項目 1-2</a></li>
         <li><a href="#"> 項目 1-3</a></li>
      </ul>
   </li>
   <li class="list"><a href="#">菜單 2</a> 
      <ul class="items">
         <li> <a href="#"> 項目 2-1 </a></li>
         <li> <a href="#"> 項目 2-2 </a></li>
         <li> <a href="#"> 項目 2-3 </a></li>
      </ul>
   </li>
   <li class="list"><a href="#">菜單 3</a> 
      <ul class="items">
         <li> <a href="#"> 項目 3-1 </a></li>
         <li> <a href="#"> 項目 3-2 </a></li>
         <li> <a href="#"> 項目 3-2 </a></li>
      </ul>
   </li>
   <li class="list"><a href="#">菜單 4</a> 
      <ul class="items">
         <li> <a href="#"> 項目 4-1 </a></li>
         <li> <a href="#"> 項目 4-2 </a></li>
         <li class="list"><a href="#">菜單 4-1</a> 
            <ul class="items">
               <li> <a href="#"> 項目 4-1-1</a></li>
               <li> <a href="#"> 項目 4-1-2</a></li>
               <li class="list"><a href="#">菜單 4-2</a> 
                  <ul class="items">
                     <li> <a href="#"> 項目 4-2-1</a></li>
                     <li> <a href="#"> 項目 4-2-2</a></li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

外層ul標簽是菜單盒子，其class屬性值是menu。

<li class="list">...</li>是菜單名稱。

<ul class="items"><li>...</li></ul>是項目名稱。

我們看到示例中“菜單 4”包含有二、三、四級菜單，請在演示里看其顯示方式。

CSS

盒子樣式

下面ul.menu {...}是菜單盒子樣式：列舉方式、寬度、位置、字體等。

ul.menu {
  padding: 0;
  list-style: none;
  width: 400px;
  margin: 20px auto;
  font-family: 'Century Gothic';
  box-shadow: 0px 0px 25px #00000070;
  clear: both;
  display: table;
}

菜單樣式

下面代碼是設置菜單的樣式：容器、字體、位置、高寬等。

ul.menu .list {
  font-size: 14px;
  border-bottom: 1px solid #324252;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  vertical-align: sub;
  background: #3e5165;
  clear: both;
}
ul.menu .list:after {
  content: "\f107";
  font-family: 'FontAwesome';
  position: absolute;
  right: 17px;
  top: 17px;
  padding: 0px 5px;
  color: #fff;
}
ul.menu .list:before {
  content: '\f07b';
  font-family: 'FontAwesome';
  position: absolute;
  left: 17px;
  top: 17px;
  padding: 0px 5px;
  color: #fff;
}

ul.menu .list {...} 設置菜單樣式：字體、邊框、背景、位置、高寬等。

ul.menu .list:after {...} 是放在項目名稱后面的箭頭圖標。

ul.menu .list:before {...} 是放在項目名稱前面的文件夾圖標。

注意，這里用了圖標字體FontAwesome，所以需要引用FontAwesome的圖標字體庫文件，并且需要在你的web服務器進行相關配置，以支持該圖標字體。

FontAwesome是最常用的圖標字體，有關FontAwesome字體的介紹及使用，可看看我寫的幾篇文章。

項目（二級菜單）樣式

下面代碼 ul.menu .list .items 是設置項目（二級菜單）的樣式：容器、字體、位置、高寬、背景顏色等。

另外，我們看到 a:hover {...} 里有一個過渡動畫屬性：transition，意思是當鼠標移上來后，其背景顏色過渡到另一種顏色，300ms是過渡動畫時間。

ul.menu .list .items {
  height: 0px;
  overflow: hidden;
}
ul.menu .list .items a {
  padding: 17px;
}
ul.menu .list .items a:hover {
  background-color: #3f5d79;
  color: #fff;
  transition: 300ms all;
}

JavaScript

本示例用到一點JavaScript編程，它的作用是菜單和項目的鼠標點擊事件，是菜單折疊的實現方法。

var list = document.querySelectorAll('.list');

function accordion(e)
{
    e.stopPropagation();
    if (this.classList.contains('active'))
    {
        this.classList.remove('active');
    }
    else
    if (this.parentElement.parentElement.classList.contains('active'))
    {
        this.classList.add('active');
    }
    else
    {
        for (i = 0; i < list.length; i++)
        {
            list[i].classList.remove('active');
        }
        this.classList.add('active');
    }
}
for (i = 0; i < list.length; i++)
{
    list[i].addEventListener('click', accordion);
}