使用Jquery、HTML、CSS、JS实现下拉菜单列表
生活随笔
收集整理的這篇文章主要介紹了
使用Jquery、HTML、CSS、JS实现下拉菜单列表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
下拉菜單列表
當鼠標進入時，效果如下：
鼠標離開時，下拉列表進行隱藏。效果如下：
下面展示代碼
// <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{padding: 0px;margin: 0px;list-style: none;}.box{margin: 100px auto;width: 340px;height: 30px;background: url(項目J3-11/images/bg.jpg);}.box li{width: 100px;height: 30px;background: url(項目J3-11/images/libg.jpg);float: left;margin-left: 10px;text-align: center;line-height: 30px;cursor: pointer;position: relative;left: 0px;}.box li ul{text-align: center;display: none;position:absolute;top: 30px;left: 0px;}</style> </head> <body><ul class="box"><li>我的淘寶<ul><li>已買到的寶貝</li><li>我的足跡</li><li>購物車</li></ul></li><li>商品分類<ul><li>日化用品</li><li>精品服飾</li><li>零食百貨</li></ul></li><li>賣家中心<ul><li>商品列表</li><li>銷售管理</li><li>訂單管理</li></ul></li></ul> </body> <script src="jquery-1.7.2.min.js"></script> <script>//jquery的代碼我們通常會包裹在一個$(function(){})函數中//$(function() {}) 是$(document).ready(function()的簡寫$(function(){//ready事件提供頁面加載事件，只需Dom元素加載完成后便可觸發//“$(參數)”創建jquery實例對象，為它綁定mouseover的鼠標事件，鼠標進入觸發，參數為事件的處理程序，即匿名函數//$('.box>li')層次選擇器中的子元素選擇器，獲取類名為box下的li元素/* $('.box>li').mouseover(function(){//slideDown() 方法用于向下滑動元素。$(this).children().slideDown(500);});$('.box>li').mouseout(function(){//slideUp() 方法用于向上滑動元素。speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。$(this).children().slideUp(500);}); *//* slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。如果元素向下滑動，則 slideToggle() 可向上滑動它們。如果元素向上滑動，則 slideToggle() 可向下滑動它6們。該方法檢查被選元素的可見狀態。如果一個元素是隱藏的，則運行 slideDown()，如果一個元素是可見的，則運行 slideUp() - 這會造成一種切換的效果。 */$('.box>li').hover(function(){//為導航中的每個選項注冊移入移出事件//children()方法代替子元素選擇器，獲取指定元素的子元素。返回被選元素的所有直接子元素/* stop()方法用于停止動畫效果，如元素上滑下滑，可以讓動畫隊列后面的動畫提前執行在不傳遞參數時，表示立即停止當前正在執行的動畫，開始執行動畫隊列中的下一個動畫 */$(this).children().stop().slideToggle(500);/* 1 鏈式編程：如果一直對同一個元素進行函數操作，可以使用".函數名"一直寫下去2 因為jquery對象調用方法，返回值是jquery對象本身。就用 .語法調用自身方法*/});}) </script> </html>總結
以上是生活随笔為你收集整理的使用Jquery、HTML、CSS、JS实现下拉菜单列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： element-plus分页组件默认显示
- 下一篇： HTML学习之块级元素和行内元素的特征和