CSS導(dǎo)航欄和CSS下拉菜單怎么實(shí)現(xiàn)

這篇文章主要介紹“CSS導(dǎo)航欄和CSS下拉菜單怎么實(shí)現(xiàn)”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“CSS導(dǎo)航欄和CSS下拉菜單怎么實(shí)現(xiàn)”文章能幫助大家解決問(wèn)題。

成都創(chuàng)新互聯(lián)主營(yíng)卡若網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app開(kāi)發(fā)定制,卡若h5重慶小程序開(kāi)發(fā)搭建,卡若網(wǎng)站營(yíng)銷推廣歡迎卡若等地區(qū)企業(yè)咨詢

導(dǎo)航欄

熟練使用導(dǎo)航欄，對(duì)于任何網(wǎng)站都非常重要。

使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的HTML菜單。

導(dǎo)航欄=鏈接列表

作為標(biāo)準(zhǔn)的HTML基礎(chǔ)一個(gè)導(dǎo)航欄是必須的。
在我們的例子中我們將建立一個(gè)標(biāo)準(zhǔn)的HTML列表導(dǎo)航欄。

導(dǎo)航條基本上是一個(gè)鏈接列表，所以使用

和
• 元素非常有意義，公共HTML：

  
      
  主頁(yè)
      
  新聞
      
  聯(lián)系
      
  關(guān)于

  現(xiàn)在，讓我們從列表中刪除邊距和填充：

  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;}

  

  例子解析：
  list-style-type:none – 移除列表前小標(biāo)志，一個(gè)導(dǎo)航欄并不需要列表標(biāo)記。
  移除瀏覽器的默認(rèn)設(shè)置將邊距和填充設(shè)置為0。

  上面的例子中的代碼是垂直和水平導(dǎo)航欄使用的標(biāo)準(zhǔn)代碼。

  
      
      
      
  
      
  主頁(yè)
      
  新聞
      
  聯(lián)系
      
  關(guān)于

  垂直導(dǎo)航欄

  上面的代碼，我們只需要 元素的樣式，建立一個(gè)垂直的導(dǎo)航欄：

  li a {
    display: block;
    width: 60px;
    background-color: #dddddd;}

  示例說(shuō)明：

  display:block 顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度 width:60px 。

  塊元素默認(rèn)情況下是最大寬度。我們要指定一個(gè)60像素的寬度。

  注意： 請(qǐng)務(wù)必指定 元素在垂直導(dǎo)航欄的的寬度。如果省略寬度，IE6可能產(chǎn)生意想不到的效果。

  

  
      
      
      
  
      
  主頁(yè)
      
  新聞
      
  聯(lián)系
      
  關(guān)于

  垂直導(dǎo)航條實(shí)例

  創(chuàng)建一個(gè)簡(jiǎn)單的垂直導(dǎo)航條實(shí)例，在鼠標(biāo)移動(dòng)到選項(xiàng)時(shí)，修改背景顏色：

  

  
      
      
      
  
      
  主頁(yè)
      
  新聞
      
  聯(lián)系
      
  關(guān)于

  激活/當(dāng)前導(dǎo)航條實(shí)例

  在點(diǎn)擊了選項(xiàng)后，我們可以添加 “active” 類來(lái)標(biāo)準(zhǔn)哪個(gè)選項(xiàng)被選中：
  

  li a.active {
      background-color: #4CAF50;
      color: white;}li a:hover:not(.active) {
      background-color: #555;
      color: white;}

  示例代碼：

  
      
      
      
      
  主頁(yè)
      
  新聞
      
  聯(lián)系
      
  關(guān)于

創(chuàng)鏈接并添加邊框

可以在

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果導(dǎo)航欄選項(xiàng)多，允許滾動(dòng) */}

    
    
    
    
主頁(yè)
    
新聞
    
聯(lián)系
    
關(guān)于

ul {
    list-style-type:none;
    margin:0;
    padding:0;}li {
    display:inline;}

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;}li {
    float:left;}li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;}

   float:left – 使用浮動(dòng)塊元素的幻燈片彼此相鄰。
display:block – 顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度。
   width:60px – 塊元素默認(rèn)情況下是最大寬度。我們要指定一個(gè)60像素的寬度。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;}
 li {
    float: left;}
 li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}
 /*鼠標(biāo)移動(dòng)到選項(xiàng)上修改背景顏色 */li a:hover {
    background-color: #111;}

關(guān)于

添加分割線

/* 除了最后一個(gè)選項(xiàng)(last-child) 其他的都添加分割線 */
li {
    border-right: 1px solid #bbb;
}
 
li:last-child {
    border-right: none;
}

  
主頁(yè)
  
新聞
  
聯(lián)系
  
關(guān)于

ul {
    position: fixed;
    top: 0;
    width: 100%;}

ul {
    position: fixed;
    bottom: 0;
    width: 100%;}

    
    
    
    
主頁(yè)
    
新聞
    
聯(lián)系
    關(guān)于

示例 1

    
    
    
    首頁(yè)
    
產(chǎn)品中心
    
新聞資訊
    
文檔下載
    
聯(lián)系我們

CSS 下拉菜單

使用 CSS 創(chuàng)建一個(gè)鼠標(biāo)移動(dòng)上去后顯示下拉菜單的效果。

基本下拉菜單

當(dāng)鼠標(biāo)移動(dòng)到指定元素上時(shí)，會(huì)出現(xiàn)下拉菜單。

    
    
    
    鼠標(biāo)移動(dòng)到我這看到下拉菜單！
    
        
CSDN博客
        
wgchen.blog.csdn.net
    

實(shí)例解析

HTML 部分

我們可以使用任何的 HTML 元素來(lái)打開(kāi)下拉菜單，如： , 或 a 元素。

使用容器元素 (如：

) 來(lái)創(chuàng)建下拉菜單的內(nèi)容，并放在任何你想放的位置上。

使用

元素來(lái)包裹這些元素，并使用 CSS 來(lái)設(shè)置下拉內(nèi)容的樣式。

CSS 部分

.dropdown 類使用 position:relative：
這將設(shè)置下拉菜單的內(nèi)容放置在下拉按鈕 (使用 position:absolute ) 的右下角位置。

.dropdown-content 類中是實(shí)際的下拉菜單。
默認(rèn)是隱藏的，在鼠標(biāo)移動(dòng)到指定元素后會(huì)顯示。 注意 min-width 的值設(shè)置為 160px。你可以隨意修改它。

注意：如果你想設(shè)置下拉內(nèi)容與下拉按鈕的寬度一致，可設(shè)置 width 為 100%
( overflow:auto 設(shè)置可以在小尺寸屏幕上滾動(dòng))。

我們使用 box-shadow 屬性讓下拉菜單看起來(lái)像一個(gè)”卡片”。

:hover 選擇器用于在用戶將鼠標(biāo)移動(dòng)到下拉按鈕上時(shí)顯示下拉菜單。

下拉菜單

創(chuàng)建下拉菜單，并允許用戶選取列表中的某一項(xiàng)：

    
    
    

    
        下拉菜單

                     CSDN博客 1             CSDN博客 2             CSDN博客 3         

關(guān)于“CSS導(dǎo)航欄和CSS下拉菜單怎么實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。