<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答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
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        CSS+JQ實現炫酷導航欄_html/css

        來源:懂視網 責編:小采 時間:2020-11-27 16:19:26
        文檔

        CSS+JQ實現炫酷導航欄_html/css

        CSS+JQ實現炫酷導航欄_html/css_WEB-ITnose:一步一步的學習,后面再做個綜合頁面 1.當前頁面高亮顯示的導航欄 首先是HTML代碼,很簡單,ul+li實現菜單 導航欄一 Android C++ IOS Java Ruby 首頁 基本效果: 接下來設置CSS屬性,這里要注意標簽a是行級元素,所以需要用display轉成塊級元素,
        推薦度:
        導讀CSS+JQ實現炫酷導航欄_html/css_WEB-ITnose:一步一步的學習,后面再做個綜合頁面 1.當前頁面高亮顯示的導航欄 首先是HTML代碼,很簡單,ul+li實現菜單 導航欄一 Android C++ IOS Java Ruby 首頁 基本效果: 接下來設置CSS屬性,這里要注意標簽a是行級元素,所以需要用display轉成塊級元素,

        一步一步的學習,后面再做個綜合頁面

        1.當前頁面高亮顯示的導航欄

        首先是HTML代碼,很簡單,ul+li實現菜單

          導航欄一 
      1. Android
      2. C++
      3. IOS
      4. Java
      5. Ruby
      6. 首頁

        基本效果:

        接下來設置CSS屬性,這里要注意標簽a是行級元素,所以需要用display轉成塊級元素,這個很常用,還有就是line-height的常見用法

        *{ margin:0; padding: 0;}a{ text-decoration: none;}.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222;}.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none;}.list li{ float: left;}.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block;}.list li a:hover{ background:#333; color:#fff;}.list li a.on{ background:#333; color:#fff;}h1{ margin: 20px auto; text-align: center;}

        實現的效果:

        最后就是JS動態添加定位效果了
        js里面這樣考慮,頁面跳轉就會有鏈接,根據鏈接的后綴來匹配屬性,匹配則更改樣式即可達到想要的效果
        需要注意的就是如何獲取URL,如何從URL里面查找出href信息

        $(function(){ //當前鏈接以/分割后最后一個元素索引 var index = window.location.href.split("/").length-1; //最后一個元素前四個字母,防止后面帶參數 var href = window.location.href.split("/")[index].substr(0,4); if(href.length>0){ //如果匹配開頭成功則更改樣式 $(".list li a[href^='"+href+"']").addClass("on"); //[attribute^=value]:匹配給定的屬性是以某些值開始的元素。 }else { //默認主頁高亮 $(".list li a[href^='index']").addClass("on"); }});

        效果圖

        2.劃入自動切換的導航條

        在1的基礎上,修改一下HTMLa標簽內容,然后通過CSS設置動畫效果

         
      7. 首頁 Index
      8. Android 安卓
      9. C++ 誰加加
      10. IOS 蘋果
      11. Java 爪哇
      12. Ruby 如八一
      13. CSS實現動畫效果,首先把b和i標簽都設置為塊級元素,這樣的話就可以垂直分布,再給a設置一個transition,所謂的動畫,就是劃入后改變把a上移,再給a加個邊框好觀察,看下圖

        最后想實現效果,就給包裹菜單的div設置一個溢出隱藏屬性即可

        *{ margin:0; padding: 0;}a{ text-decoration: none;}.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; overflow: hidden;}.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none;}.list li{ float: left;}.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s;} .list b,.list i{ display: block; }.list li a:hover{ margin-top: -40px; background:#333; color:#fff;}.list li a.on{ background:#333; color:#fff;}h1{ margin: 20px auto; text-align: center;}


        也可以采用JQ來實現,代碼如下

        $(function () { $(".list a").hover(function () { //stop是當執行其他動畫的時候停止當前的 $(this).stop().animate({ "margin-top": -40 }, 300); }, function () { $(this).stop().animate({ "margin-top": 0 }, 300); });});

        3.彈性子菜單實現

        首先子菜單使用div包裹,里面都是a標簽,如下

         
      14. Android 子菜單1 子菜單2 子菜單3 子菜單4
      15. 接下來設置樣式,既然是子菜單,就要脫離文檔頁面,所以使用absolute屬性,使用這個屬性那么父容器就要是relative

        *{ margin:0; padding: 0;}a{ text-decoration: none;}.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; position: relative;}.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none;}.list li{ float: left;}.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s;}.list b{ display: block;}.list li a:hover{ background:#333; color:#fff;}.list li a.on{ background:#333; color:#fff;}.list .down{ position: absolute; top: 40px; background-color: #222; /*display: none;*/}.list .down a{ color: #aaa; padding-left: 30px; display: block;}h1{ margin: 20px auto; text-align: center;}

        如下效果:

        接下來使用JQ和easing插件來控制動畫
        find方法一般用來查找操作元素的后代元素的

        $(function () { $(".list li").hover(function () { //這里使用了easing插件 $(this).find(".down").stop().slideDown({duration:1000,easing:"easeOutBounce"}); }, function () { $(this).find(".down").stop().slideUp({duration:1000,easing:"easeOutBounce"}); });});

        效果,圖片錄制不太好,實際上都是彈性動畫的

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

        文檔

        CSS+JQ實現炫酷導航欄_html/css

        CSS+JQ實現炫酷導航欄_html/css_WEB-ITnose:一步一步的學習,后面再做個綜合頁面 1.當前頁面高亮顯示的導航欄 首先是HTML代碼,很簡單,ul+li實現菜單 導航欄一 Android C++ IOS Java Ruby 首頁 基本效果: 接下來設置CSS屬性,這里要注意標簽a是行級元素,所以需要用display轉成塊級元素,
        推薦度:
        標簽: 實現 導航欄 酷炫
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 日本视频免费高清一本18 | 亚洲免费视频一区二区三区| 免费久久精品国产片香蕉| 亚洲精品国产综合久久一线| 色天使色婷婷在线影院亚洲| 最近的2019免费中文字幕| 免费观看无遮挡www的小视频| 女人18毛片a级毛片免费视频| 国产亚洲一区区二区在线| 亚洲精品乱码久久久久久下载 | 亚色九九九全国免费视频| 亚洲精品无码久久久久AV麻豆| 在线观看亚洲精品专区| 久久精品私人影院免费看| 午夜亚洲国产理论秋霞| 亚洲精品GV天堂无码男同| 久久久久久一品道精品免费看 | 亚洲成人免费网址| 国产亚洲成人在线播放va| 中文字幕的电影免费网站| 欧洲美熟女乱又伦免费视频 | 亚洲精品国产精品国自产网站| 中文字幕的电影免费网站| 午夜亚洲AV日韩AV无码大全| 日韩精品免费一级视频| 中文字幕无码精品亚洲资源网久久 | 国产又大又粗又长免费视频| 亚洲五月综合缴情在线观看| 性色av极品无码专区亚洲| 在线观看AV片永久免费| 亚洲另类激情综合偷自拍| 一级午夜a毛片免费视频| 波多野结衣久久高清免费| 一级特黄a免费大片| 亚洲天天在线日亚洲洲精| 成年女人毛片免费播放人| 亚洲一卡二卡三卡四卡无卡麻豆| 久久久久免费精品国产小说| 自拍日韩亚洲一区在线| 亚洲国产一成久久精品国产成人综合| 久久久久久影院久久久久免费精品国产小说|