粉色直播,国产无吗国产在线a免费观看

技術(shù)頻道 - html技術(shù)

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

作者:admin 時(shí)間:2023-5-10 10:18:18 瀏覽:

本文介紹一款CSS3實(shí)現(xiàn)的折疊下拉菜單，該菜單背景為深色背景。深色的背景有時(shí)候更能吸引住用戶，深色背景往往能讓人聯(lián)想到權(quán)威、嚴(yán)肅和優(yōu)雅的格調(diào)，讓網(wǎng)頁充滿個(gè)性和高品質(zhì)。

效果圖

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

demo download

示例介紹

本示例使用純CSS3實(shí)現(xiàn)。

點(diǎn)擊主菜單時(shí)，展開（下拉）該菜單的項(xiàng)目列舉（二級(jí)菜單）。
點(diǎn)擊二級(jí)菜單項(xiàng)目或其父菜單時(shí)，折疊二級(jí)菜單。
該示例中還出現(xiàn)了三級(jí)、四級(jí)菜單

HTML代碼

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

外層ul標(biāo)簽是菜單盒子，其class屬性值是menu。

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

<ul class="items"><li>...</li></ul>是項(xiàng)目名稱。

我們看到示例中“菜單 4”包含有二、三、四級(jí)菜單，請?jiān)谘菔纠锟雌滹@示方式。

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;
}

菜單樣式

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

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 {...} 設(shè)置菜單樣式：字體、邊框、背景、位置、高寬等。

ul.menu .list:after {...} 是放在項(xiàng)目名稱后面的箭頭圖標(biāo)。

ul.menu .list:before {...} 是放在項(xiàng)目名稱前面的文件夾圖標(biāo)。

注意，這里用了圖標(biāo)字體FontAwesome，所以需要引用FontAwesome的圖標(biāo)字體庫文件，并且需要在你的web服務(wù)器進(jìn)行相關(guān)配置，以支持該圖標(biāo)字體。

FontAwesome是最常用的圖標(biāo)字體，有關(guān)FontAwesome字體的介紹及使用，可看看我寫的幾篇文章。

項(xiàng)目（二級(jí)菜單）樣式

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

另外，我們看到 a:hover {...} 里有一個(gè)過渡動(dòng)畫屬性：transition，意思是當(dāng)鼠標(biāo)移上來后，其背景顏色過渡到另一種顏色，300ms是過渡動(dòng)畫時(shí)間。

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

本示例用到一點(diǎn)JavaScript編程，它的作用是菜單和項(xiàng)目的鼠標(biāo)點(diǎn)擊事件，是菜單折疊的實(shí)現(xiàn)方法。

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);
}