原文:JS寫的二級導航欄(利用冒泡原理)

今天給大家分享一種用JS寫的導航欄,雖然我們工作中不會使用JS來做導航欄,為了練習我們用JS來做一個JS導航欄 這種方法要比其他方法代碼量少很多,但是需要對 事件冒泡有一定的理解,如果需要理解冒泡可以參考一下, 該注釋的地方我都給大家注釋上了 思路:給所有的 li 加上 鼠標移入事件當鼠標移入時會觸發事件,由於事件的冒泡機制,每次二級導航欄里的事件觸發時同時會觸發父級 li 的事件 調試時可以用 ...

2018-08-23 09:57 0 1392 推薦指數:

查看詳情

設置二級導航的返回按鈕

1. 一般情況下的導航跳轉,當在一界面跳轉到二級界面的時候,左item的會出現 “返回箭頭+一導航的標題”; 比如說:一導航是“白菜精華”,那么二級導航的返回鍵是 : 2. 當我們使用下方的代碼(下方代碼是在一界面)時,確實可以當跳轉到二級界面的時候,左上角是“返回 ...

Wed Jun 29 23:39:00 CST 2016 0 1768
html css二級導航

二級導航制作: 1.將一導航去除列表樣式(list-style:none),並給予浮動,使其橫向排列(float:left) 2.給每個li中添加一個<a></a>標簽,給a設置樣式,使其成為塊元素( display:block),這樣只需要點擊當前 li ...

Mon Feb 24 03:29:00 CST 2020 0 1914
原生js實現二級導航功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js制作二級菜單</title> < ...

Wed Nov 08 01:17:00 CST 2017 0 3240
dedecms織夢導航二級菜單的實現方法

dede導航下拉菜單,一欄目增加二級下拉菜單 使用dedecms5.6——5.7 將這段代碼貼到templets\default\head.htm文件里<!-- //二級子類下拉菜單,考慮SEO原因放置於底部 --><script ...

Wed Jun 10 01:54:00 CST 2015 1 5244
使用HTMl+CSS制作二級菜單或二級導航

  二級菜單的實現思路為:1.在默認狀態下,使用display:none;將二級菜單隱藏。 2.當一菜單中的列表標簽li獲取焦點(hover)后,使用display:blick;將二級菜單顯示出來。 3.使用position: relative;和position: absolute;分別得一 ...

Thu Jan 06 03:50:00 CST 2022 0 3823
導航二級導航,三導航介紹

導航 (新學者如有不懂可以去參看我博客里其他的相關隨筆) * { margin: 0; padding: 0; }消除網頁默認的margin值和padding值 .nav { width: 1280px; height: 60px; border: 1px solid red ...

Wed Jun 28 04:50:00 CST 2017 0 4213
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM