簡單的下拉導航條代碼

利用HTML+CSS+jquery實現一個特別簡單鼠標經過彈出下拉的效果
HTML代碼

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title></title>
    <link rel="stylesheet" type="text/css" href="./css/bin.css">
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
</header>
<!-- 導航條 -->
<div id="div">
        <ul>
            <li><a href="">PHP</a>
          <ul>
            <li>php的32中設計模式</li>
            <li>memeched和redis的區別</li>
            <li>分布式</li>
          </ul>
        </li>
        </ul>
        <ul>
            <li><a href="">Mysql</a>
          <ul>
            <li>數據庫優化</li>
            <li>23條提高</li>
            <li>酷站</li>
          </ul>
        </li>
        </ul>
        <ul>
            <li><a href="">JaveScript</a>
          <ul>
            <li>html5</li>
            <li>css</li>
            <li>過渡動畫</li>
          </ul>
        </li>
        </ul>
        <ul>
            <li><a href="">Vue.js</a>
                <img src="./image/news.png" alt"">
          <ul>
            <li>Mvvm是啥</li>
            <li>模型綁定</li>
            <li>非常6+1</li>
          </ul>
        </li>
        </ul>
    </div>
</body>
</html>

CSS代碼

body{background-image: url(../image/image.jpg);}
img{position: relative;top: -10px;right: -10xp;}
header {margin: 22px auto;}
/*導航條下拉樣式*/
ul { margin:0; padding:0;}
#div {text-align：center;margin:0 auto;}
#div ul li{float:left;height:28px;display:inline;line-height:28px; padding:0px 20px;position:relative;}
#div ul li a{font-size: 25px;color: white;}
#div ul li ul{position:absolute;z-index:99; display:none;top:28px;  width:100px;left:0px;}
#div ul li ul li{display:block;width:100px;height:26px;line-height:26px;background-color:#666;border-bottom:1px #FFFFFF solid;}

jquery

$(function(){
      $(" ul li").hover(function(){
            $(this).children("ul").slideDown();
      },function(){
            $(this).children("ul").slideUp();
      })
      $("ul li ul li").hover(function(){
         $(this).css("background","blue");
         },function(){
         $(this).css("background","#666");
         })
})

本文鏈接：https://blog.csdn.net/qq_34827048/article/details/73379430

智能推薦

Hbuilder開發APP（一）——底部導航條簡單實現

Hbuilder是由DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE，它最大的特點及優勢就是——快，通過完整的語法提示和代碼輸入法、代碼塊及很多配套，Hbuilder能大幅度提升HTML、js、css的開發效率。并且HBuilder本身主體就是基于Eclipse，所以能夠兼容Eclipse的插件。作為...

摘要：在平板上做一個表格的樣板展示。在文件過多的時候下面有一個類似CSDN博客的導航條。其中樣板展示使用的pdf格式。里面涉及獲取pdf首頁截圖，和pdf一個展示簡單的效果如上圖： RecyclerView滾動條屬性含義 android:fadeScrollbars 此項配置用來表示是否在不滾動時隱藏滾動條，可以選擇true或false，默認為true，也就是不滾動時隱藏。如果將其設置為fa...

簡單的下拉導航條代碼

智能推薦

猜你喜歡