到現在為止,一直在前端開發學習的最基礎上,比如什麼優化,什麼美化之類。室友反而學的比我快。原因就是,我主要把時間放在基礎知識的熟練掌握之上了,現在的css運用可以說是比較嫻熟了。之後再進行更深一步的學習可能會更加輕鬆。
下面是我花一些時間寫出的選單優化,貼出源**和效果,大家共同學習。
下面是最基礎的導航效果:
先看下效果吧
滑鼠移動到上面時是下面這種效果:
這是最基礎的選單。
源**如下:
下面是在上面基礎上新增了二級選單:
下面貼出源**:
new
contact
about
這是用css實現的**,下面貼出用js實現的**:
new
contact
about
**選單:**選單是在二級的基礎上進行的,而掌握了**選單後,再寫更高階選單應該就比較容易了,下面給乙個效果圖:
這裡我偷個懶,沒有寫a:hover的效果,這個不重要,**選單實現才重要:
home2
newcontact
about
中英文轉換選單:
嗯。。效果就是這樣的,當滑鼠移上去的時候,中文變成了英文。
下面看一下怎麼實習的吧:
這就是我這些天自學的幾種優化方法。自我感覺還算良好。 jQuery導航選單
大牛達 昨天研究 jquery 研究的怎麼樣啊?菜鳥frank 不研究不知道,一研究俺真的徹底愛上了jquery!大牛達 哦?怎麼說?菜鳥frank jquery 真的很方便,您知道我的性格的嘛!力求用最短的時間,做最有效率的事情。大牛達 呵呵,你這不就是明擺著懶!菜鳥frank 唉,這都是跟您學的...
左邊選單導航
通訊錄 管理資訊 首頁模版 首頁模版 首頁模版 首頁模版 首頁模版 首頁模版 首頁模版 管理資訊 首頁模版 首頁模版 首頁模版 首頁模版 首頁模版 首頁模版 首頁模版 管理資訊 首頁模版 首頁模版 首頁模版 首頁模版 首頁模版 首頁模版 首頁模版 通訊錄 管理資訊 首頁模版 首頁模版 首頁模版 首頁...
element多層導航選單
很久沒寫部落格了原因就是懶,剛下班今天寫了個基於element導航選單實現多層選單 可以無限多層 元件核心思想就是元件遞迴 這個有時候面試會問到 可以看看這篇我寫的簡單文章 vue元件遞迴 然後就判斷children有沒有內容,沒內容就是選擇項嘛,內容就是父選單 只提供最基礎實現功能各種 可以參考e...