h5學習筆記：下拉選單

阿新 • • 發佈：2019-02-20

這裡寫圖片描述

滑鼠經過選單的時候，下拉選單形成起來。這個案例中，有一些比較有趣的事情。

首先要了解這種選單設計結構。我們知道ul+li經常組合列表，這種列表既有縱向，也有橫向。列表中的li元素，再包一個ul+li的組合元素。這樣一個列表下拉選單結構就變得很清晰了。

 <ul>
      <li>選單一</li>
      <li>選單二
         <div class="sub_item">
              <ul>
                 <li>案例一</li>
                 <li 
>案例二</li>
              </ul> 
         </div>
      </li>
      <li>選單三</li>
   <ul>

我們將一個選單橫向化，有float：left的做法，配置邊框間隔可以做出這種相間的效果。其次使用display: inline-block;內聯塊也可以快速橫向佈局起來。但使用內聯塊有一些奇怪的事情發生。當浮動選單的時候就出現一些詭異的事情。

改用float ：left則沒事情。
預設情況下，二級選單列表是隱藏的，顯示方式為：display:none

。隱藏狀態。

浮動方式使用jq的hover方法，當浮動的時候顯示，不浮動的時候則隱藏。

下面一起看看css和jq的設計。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>下拉選單</title>
    </head>
    <style type="text/css">

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

        .menu >ul> li{
            background-color: black;
            float: left;
            width: 80px;
            height: 40px;   
            text-align: center;
            line-height: 40px;
            color: white;
            margin-right: 10px;
        }

        .menu >ul> li:hover{
            background-color: red;
        }

        .sub_menu{
            display: none;
        }

        .sub_menu >li{
            background-color: black;
        }

        .sub_menu >li:hover{
            background-color: blue;
        }

    </style>
    <body>  
        <div class="main">
            <div class="menu">
                <ul>
                    <li>首頁</li>
                    <li>視訊
                        <div>
                           <ul class="sub_menu">
                              <li>案例一</li>
                              <li>案例二</li>
                           </ul>
                       </div>
                    </li>
                    <li>教學</li>
                    <li>關於
                      <div>
                           <ul class="sub_menu">
                              <li>招聘資訊</li>
                              <li>公司簡介</li>
                           </ul>
                       </div>
                    </li>
                    <li>聯絡我們</li>
                </ul>
            </div>
        </div>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
          $(function(){

             $(".menu >ul >li").hover(function(){

                $(this).find(".sub_menu").show();

             },function(){

                $(this).find(".sub_menu").hide();
             });

           });

        </script>

    </body>
</html>

h5學習筆記：下拉選單

滑鼠經過選單的時候，下拉選單形成起來。這個案例中，有一些比較有趣的事情。首先要了解這種選單設計結構。我們知道ul+li經常組合列表，這種列表既有縱向，也有橫向。列表中的li元素，再包一個ul+li的組合元素。這樣一個列表下拉選單結構就變得很清晰了。

Bootstrap 學習筆記8 下拉菜單滾動監聽

bsp http drop htm bar 下拉 overflow inf flow 代碼部分： <nav class="navbar navbar-default"> <a href="#" class="navba

CSS實戰心得筆記——常用下拉選單

寫作目的花了一個月左右的時間，學完了HTML5和CSS的基礎知識，主要通過W3school、菜鳥教程和網易雲課堂的網課。學習過程中CSDN的很多部落格給了我幫助和啟發，效果要比生硬的教程好得多。因此，開始實戰練習的過程中，把每個案例的實現及其思路記錄在這裡，作為總結。常用下拉選單

小程式：下拉選單

1. wxml部分  <view class="page">  <view class="nav">  &l

Qt學習筆記——QMainWindow下建立選單欄與工具欄

選單欄與工具欄的建立 <------QMainWindow 需要QAction 選單欄選項快捷鍵設定，QAction物件->setShortcuts(QKeySequence); <--函式表示設定QAction這個物件的快捷鍵，QKeySequen

h5 學習筆記：記錄一些前端用到後臺和移動樣式庫

這幾天一直在找一些移動和業務樣式庫，發現了不少不錯的，既是漂亮又符合業務用到。前端發展真的變化很快，發現市面上還是有不少開源好用的產品。針對後臺研發的，有阿里ant design、阿里通訊的，還有餓了麼，京東，有贊等等一些庫。我比較喜歡ant design裡面

FairyGUI筆記：下拉框（十五）

GComboBox 我們可以在編輯器編輯下拉列表的專案，也可以用程式碼動態設定 GComboBox combo = gcom.GetChild("n1").asComboBox; //items是列表專案標題的陣列。 combo.items = new string

h5學習筆記： css佈局案例練習

今天練習一下css相關的佈局，沒有寫互動內容。在css佈局中，發現也不少不熟悉的地方。只是沒有形成概念，其次對一些用法比較模糊。日後需要加強一下這些。對平衡的兩個div應該如何處理，還要繼續想想辦法。

h5學習筆記：layui table

最近在做Layui的後臺，發現Layui這個方案也不錯，能夠快速地在後臺直接部署。相比還要配置webpack，Layui jquery體系開箱即用在一些單獨的情況下還是挺不錯的。最近整理一下現在梳理一下Table元件的用法。一、Table 元件 Tabl

h5學習筆記：居中

將之前的用到的記錄一下。以便不時之需。朋友一直和我講css 是不簡單，到目前為此，css發展已經進化到越來越驚人。其實學好css 不容易，也沒有人所說的那樣簡單。css2- css3 – 進化less，sass，postcss，似乎真是越來越多。那天看了一下le

h5學習筆記：flex

flex部署可以很方便佈局橫向和垂直縱向的設計。所以在編寫小程式可以放心使用。 flex 依舊有瀏覽器相容性的問題。但是ie 8 這種瀏覽器真不管太多了。今晚做一個練習，記錄一下之前工作中用到用法。flex是一種常用佈局方式，使用這種方式處理一些佈局。

[學習筆記]JS下拉框賦值

var FrustaNumber=FrustaNumbers.split(",");if(FrustaNumber.length>0){for(var i=0;i<FrustaNumber

h5學習筆記：使用fis的前端構建工具記錄

這幾天練習一下webpack ，glup的工具使用，發現webpack 配置起來並不是太順利，總是有一種抗拒的，但從vuejs 和react 需要這種配套的方案去解決打包和釋出版本問題。這也是需要挖一下坑，把這塊骨頭啃下來。無意中找到了fis百度的前端構建工

h5學習筆記：vue 路由部署伺服器子目錄問題

《Egret 引擎入門》這兩天一直在查詢vue經過打包後部署伺服器一直顯示不出來的問題。前端沒有報錯，資源載入也很正常。找了很多回答，最後定位在vue的訪問路由出了問題。出現的現象前端vuejs+vue-router+webpack的組合，打包是由w

h5學習筆記：UI庫

自從接觸了web開發以來，每天都會很糾結選什麼UI框架才是比較合適？擺在這個問題面前是一個技術的選型。要想知道，web開發的坑實在太深。不斷地大廠推出開源框架，不斷地發現很多造輪子。或者看到一個比較漂亮就會選。最近我深刻體會到這種矛盾的存在，前段時間一直用j

h5學習筆記：http-server小工具

今天下午遇到一個小問題，下載的專案放置XAMPP二級目錄裡面，資源都會發生錯誤的情況，這個時候為了解決這個辦法，使用了fis3的內建伺服器去處理。使用fis3伺服器也是挺方便的。使用fis3的指令碼首先啟動伺服器，然後將檔案釋出到內建的伺服器。 fis

猜想：下拉選單的顏色疊加！

使用height從0開始變化的方法去實現下拉列表時，並且對高度變化添加了一個過渡效果，會出現顏色變化疊加的效果。現在對這個現象進行分析和猜想，也算是進一步加深對下拉列表的理解。  <div id="navList

學習“javaScript+CSS+DIV實現下拉選單，實現表格變色”內容的筆記

實現下拉選單 <!DOCTYPE html> <html> <head> <title>下拉選單示例</title> <script language="javaScript">

js學習筆記（二）下拉選單項選擇並跳轉

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE>

學習筆記：迪傑斯特拉算法

最短重復 con cin main 單源最短路徑算法路徑 class bool 一、算法概要 1.迪傑斯特拉算法是典型的單源最短路徑算法。 2.主要特點是以起始點為中心向外擴展，直到擴展至終點為止。二、算法步驟 1.將圖中的頂點劃分為兩組，第一組為已求出最短路徑的

h5學習筆記： 下拉選單

相關推薦

h5學習筆記：下拉選單