首頁(yè) 猿問 web上使用css實(shí)現(xiàn)導(dǎo)航欄？

web上使用css實(shí)現(xiàn)導(dǎo)航欄？

JavaScript

慕運(yùn)維8079593 2018-11-14 17:18:10

1、如何實(shí)現(xiàn)導(dǎo)航欄就像http://chuangzaoshi.com/code左側(cè)一樣？2、能用css完全實(shí)現(xiàn)嗎？純css怎么實(shí)現(xiàn)？js怎么實(shí)現(xiàn)？謝謝！ps：感謝兩位大神的答案，我沒說清楚，我的疑難如下：左側(cè)導(dǎo)航點(diǎn)擊設(shè)計(jì)等大的標(biāo)簽會(huì)自動(dòng)收起原來的，彈出現(xiàn)在的ul，同時(shí)右側(cè)的內(nèi)容又跟著變化。這個(gè)如何實(shí)現(xiàn)不清楚，還望賜教。

查看完整描述

1 回答

慕田峪4524236

TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超5個(gè)贊

你是要鼠標(biāo)移動(dòng)過去的變色效果吧？

用CSS實(shí)現(xiàn)的話，左邊用列表做，然后改樣式，用:hover偽類去配鼠標(biāo)移動(dòng)過去的樣式
比如

ul li {

... // 此處為常規(guī)樣式

}

ul li:hover {

... // 此處為鼠標(biāo)經(jīng)過的樣式

}

如果用JS實(shí)現(xiàn)的話，就要監(jiān)聽對(duì)應(yīng)元素的鼠標(biāo)進(jìn)入事件onmouseenter，將列表的項(xiàng)目中除了當(dāng)前項(xiàng)，其他的樣式都設(shè)置為常規(guī)樣式，還要監(jiān)聽元素的鼠標(biāo)離開事件onmouseleave，在鼠標(biāo)離開時(shí)需要將之前鼠標(biāo)經(jīng)過時(shí)設(shè)置的樣式恢復(fù)成常規(guī)樣式。

反對(duì) 回復(fù) 2018-12-26