国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

jQuery實現簡潔的導航菜單效果_jquery

來源:懂視網 責編:小采 時間:2020-11-27 21:45:54
文檔

jQuery實現簡潔的導航菜單效果_jquery

jQuery實現簡潔的導航菜單效果_jquery:本文實例講述了JavaScript實現的伸展收縮型菜單代碼。分享給大家供大家參考。具體如下: 運行效果截圖如下: 鼠標懸浮時菜單項向上移動成藍底白字,點擊之后底部會有藍條表示當前選中項。 頁面代碼,菜單的每一項都是一個 div ,其中包括一個 ul 用來放
推薦度:
導讀jQuery實現簡潔的導航菜單效果_jquery:本文實例講述了JavaScript實現的伸展收縮型菜單代碼。分享給大家供大家參考。具體如下: 運行效果截圖如下: 鼠標懸浮時菜單項向上移動成藍底白字,點擊之后底部會有藍條表示當前選中項。 頁面代碼,菜單的每一項都是一個 div ,其中包括一個 ul 用來放
本文實例講述了JavaScript實現的伸展收縮型菜單代碼。分享給大家供大家參考。具體如下:
運行效果截圖如下:

鼠標懸浮時菜單項向上移動成藍底白字,點擊之后底部會有藍條表示當前選中項。

頁面代碼,菜單的每一項都是一個 div ,其中包括一個 ul 用來放置顯示文字等,另一個 div 則是底部的藍條,需要給第一項和最后一項設置不同的 class ,樣式需要用到:


  
    
      
  • 首頁
  •       
  • 首頁
  •                            
  • A
  •       
  • A
  •                       
  • A
  •       
  • A
  •                            
  • 退出
  •       
  • 退出
  •             

    樣式,主要就是每個菜單項的左右邊框的設置以及 ul 和 li 的位置設置:

    *
    {
     padding: 0;
     margin: 0;
    }
    body
    {
     background-color: #fffff3;
     font: 12px/1.6em Helvetica, Arial, sans-serif;
    }
    ul,li{
     list-style: none;
    }
    #nav
    {
     text-align: center;
     height: 50px;
     font-size: 10px;
     line-height: 30px;
     background-color: #F0E6DB;
     margin-bottom: 10px;
    }
    .navItem
    {
     cursor: pointer;
     position: relative;
     float: left;
     width: 100px;
     height: 50px;
     font-size: 15px;
     border-right: 2px solid rgb(255,255,255);
     border-left: 2px solid rgb(255,255,255);
     overflow: hidden;
     font-weight:bold;
    }
    .indexNavItem
    {
     border-left: 4px solid rgb(255,255,255);
     margin-left: 10px;
    }
    .lastNavItem
    {
     border-right: 4px solid rgb(255,255,255);
    }
    .logoutNavItem
    {
     float: right;
     width: 120px;
     margin-right: 10px;
     border-left: 4px solid rgb(255,255,255);
    }
    .navUl
    {
     position: relative;
     height: 100px;
     width: 100%;
     border-bottom: 5px solid rgb(2,159,212);
    }
    .navUl li
    {
     height: 50px;
     line-height: 50px;
    }
    .highlighter
    {
     position: absolute;
     bottom: 0;
     height: 5px;
     width: 100%;
    }
    .selectedNav
    {
     background-color: #029FD4;
    }
    .hoverLi
    {
     background-color: #029FD4;
     color: #ffffff;
    }
    

    接下來就是給菜單編寫懸浮和單擊事件的 js 代碼了,懸浮時將 ul 上移 li 的高度,鼠標移開后再恢復,點擊之后就是給藍條的 div 添加樣式即可:

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    jQuery實現簡潔的導航菜單效果_jquery

    jQuery實現簡潔的導航菜單效果_jquery:本文實例講述了JavaScript實現的伸展收縮型菜單代碼。分享給大家供大家參考。具體如下: 運行效果截圖如下: 鼠標懸浮時菜單項向上移動成藍底白字,點擊之后底部會有藍條表示當前選中項。 頁面代碼,菜單的每一項都是一個 div ,其中包括一個 ul 用來放
    推薦度:
    標簽: 導航 菜單 簡單
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top 主站蜘蛛池模板: 欧美日韩国产精品va | 欧美日韩国产码高清综合人成 | 在线播放国产一区 | 久久综合伊人77777麻豆 | 欧美激情免费观看一区 | 麻豆果冻国产91在线极品 | 伊人97| 欧美日韩在线高清 | 国产欧美日韩精品在钱 | 91精品国产91久久 | 欧美一区不卡二区不卡三区 | 免费在线观看一区二区 | 日韩aa在线观看 | 亚洲乱码中文论理电影 | 国产最新在线视频 | 欧美性第一页 | 欧美国产日韩一区二区三区 | 国产一区二区三区欧美 | 欧美日韩国产综合在线 | 自拍偷拍欧美亚洲 | 亚洲天堂一区二区三区 | 欧美一区精品二区三区 | 中文字幕一区二区三区不卡 | 欧美精品在线免费观看 | 久久综合爱 | 亚洲欧美综合另类 | 亚洲电影资源 | 国产精品免费观看网站 | 日韩欧美综合视频 | 中文在线第一页 | 欧美国产一区二区三区 | 日本高清天码一区在线播放 | 国产一区二区高清 | 欧美在线免费观看视频 | 免费的黄色毛片 | 91中文字幕在线观看 | 免费看男女做好爽好硬视频 | 亚洲欧美在线观看 | 欧美国产亚洲一区二区三区 | 鸣人x钢手| 欧美xxx在线 |