CSS,JavaScript實現手風琴導航選單
<!DOCTYPE html> <html> <head> <title>Side Navigator Demo</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> <style> body { padding: 0px; margin: 0px; /* background-color: cadetblue; */ } .side-nav { width: 300px; position: fixed; height: 100%; z-index: 1; top: 0; } ul { list-style-type: none; padding: 0px; margin: 0px; font-size: 20px; color: #ffffff; } .first-menu-item { padding: 10px; border-bottom: 1px solid #d3d3d3; background-color: #2e8b57; } .second-menu-item { padding: 10px 10px 10px 20px; border-bottom: 1px solid #d3d3d3; background-color: #32cd32; } .third-menu-item { padding: 10px 10px 10px 30px; border-bottom: 1px solid #d3d3d3; background-color: #3cb371; } .menu-group { display: none; } .drop-down-item { position: relative; } .drop-down-item i { position: absolute; right: 14px; top: 14px; } .arrow-rotate { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .second-menu-item-selected { background-color: #32aa32; } .third-menu-item-selected { background-color: #3c8871; } </style> </head> <body> <script> $(document).ready(function() { $(".drop-down-item").click(function() { $(this).next(".menu-group").slideToggle(); $(this).parent().siblings().find(".menu-group").slideUp(); var arrow = $(this).children(".fa-angle-right"); if (arrow.hasClass("arrow-rotate")) { arrow.removeClass("arrow-rotate"); } else { arrow.addClass("arrow-rotate"); } var arrow_brothers = $(this).parent().siblings().find(".fa-angle-right"); if (arrow_brothers.hasClass("arrow-rotate")) { arrow_brothers.removeClass("arrow-rotate"); } }); $(".second-menu-item.menu-link").click(function() { $(".second-menu-item.menu-link").removeClass("second-menu-item-selected"); $(".third-menu-item.menu-link").removeClass("third-menu-item-selected"); $(this).addClass("second-menu-item-selected"); }); $(".third-menu-item.menu-link").click(function() { $(".second-menu-item.menu-link").removeClass("second-menu-item-selected"); $(".third-menu-item.menu-link").removeClass("third-menu-item-selected"); $(this).addClass("third-menu-item-selected"); }); }); </script> <div class="side-nav"> <ul> <li> <div class="first-menu-item drop-down-item">Frontend <i class="fa fa-angle-right"></i></div> <ul class="menu-group"> <li> <div class="second-menu-item menu-link">HTML</div> </li> <li> <div class="second-menu-item drop-down-item">CSS <i class="fa fa-angle-right"></i></div> <ul class="menu-group"> <li> <div class="third-menu-item menu-link">Bootstrap</div> </li> <li> <div class="third-menu-item menu-link">Font Awesome</div> </li> <li> <div class="third-menu-item menu-link">Foundation</div> </li> </ul> </li> <li> <div class="second-menu-item drop-down-item">JavaScript <i class="fa fa-angle-right"></i></div> <ul class="menu-group"> <li> <div class="third-menu-item menu-link">JQuery</div> </li> <li> <div class="third-menu-item menu-link">Angular</div> </li> <li> <div class="third-menu-item menu-link">VueJS</div> </li> </ul> </li> </ul> </li> <li> <div class="first-menu-item drop-down-item">Backend <i class="fa fa-angle-right"></i></div> <ul class="menu-group"> <li> <div class="second-menu-item menu-link">Java</div> </li> <li> <div class="second-menu-item menu-link">C</div> </li> <li> <div class="second-menu-item menu-link">C++</div> </li> <li> <div class="second-menu-item menu-link">Python</div> </li> <li> <div class="second-menu-item menu-link">PHP</div> </li> </ul> </li> <li> <div class="first-menu-item drop-down-item">Mobile <i class="fa fa-angle-right"></i></div> <ul class="menu-group"> <li> <div class="second-menu-item menu-link">Android</div> </li> <li> <div class="second-menu-item menu-link">Swift</div> </li> <li> <div class="second-menu-item menu-link">Ionic</div> </li> </ul> </li> </ul> </div> </body> </html>
效果圖:
相關推薦
CSS,JavaScript實現手風琴導航選單
開發十年,就只剩下這套架構體系了! >>>
css ul li實現縱向導航選單效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>
豎向摺疊手風琴導航選單[JS+div+css]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm
html+css+jQuery+JavaScript實現tab自動切換功能
() conf charset 臨時 effect 保存 sheet http oat tab1.html內容 <!DOCTYPE html> <html> <head> <meta charset="U
js實現當前導航選單高亮顯示
html: <div id="navi"> <ul> <li><a href="1.html">主頁</a></li> <li><a href="2.html">欄目1</a></l
html,css,js實現音樂播放,含音訊特效和歌詞
前端播放器樣例 有需要的小夥伴直接用就行:https://download.csdn.net/download/qq_34042417/10669205 實現思路: 1.載入完頁面後請求等到歌曲,歌詞檔案,要實現歌詞跟歌曲滾動則要求歌詞是lrc格式。 2.對歌詞處理,處理
HTML、CSS、JavaScript 實現一個簡單的計算器
計算器效果圖: 程式碼如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>計算器</title> </head
web之html,css,javascript 簡要概述
最近學習了一些有關web開發方面的基礎知識,包括html,css,javascript等等。其中html曾經有過一些接觸,而css及javascript只是聽說過,為了 今後能更好的掌握和應用這些知識,在這裡就此先做一個小小的總結回顧。
Html,Css,JavaScript,Jquery概述
Html HTML的全稱是Hyper Text Mark-up Language,超文字標記語言。 1.超文字:頁面內可以包含圖片、連結,甚至音樂、程式等非文字元素。 2.標記:與之相對是的編譯型語言,標記型語音無需編譯,直接可以被解析展示。 特點
HTML,CSS,JavaScript知識樹思維導圖
最近師父佈置的學習任務,就是構建知識樹。一個週末終於完成了任務,有一些是網上有的,就直接用了,有些沒有,就是自己總結的。整理的過程中發現前端的知識真是錯綜複雜,還有層出不窮的各種框架。任重而道遠 想要原稿的可以留言郵箱,統統發給你! PS:微信公眾號  
CSS:響應式的導航選單
最近我寫了一點資料關於怎樣製作一個響應式的移動導航欄,現在我發現了一個新的技術(有關HTML5)可以在沒有使用Javascript的情況下做一個響應式選單。這個選單可以自動排列到左邊、中間或者右邊)。不像之前的教程需要點選某“開關”來顯示或隱藏選單,現在只需要把滑
只使用HTML 和 CSS,JavaScript開發貪食蛇遊戲,新手程式設計師請上車
歡迎上車。今天我們將開始一場激動人心的冒險,在這裡我們將開發屬於我們自己的貪食蛇遊戲。通過將其分解為一個個簡短的步驟來學習如何解決問題。在這段旅程結束時,你會學到一些新東西,並且有信心能獨立探索更多。 開始吧 首先新建一個檔案“snake.html”,它將包含全部程式碼。 因為這是一個 HTML 檔案,
前端零基礎入門(三):HTML,CSS,Javascript三者之間的關係
每個人接觸前端的角度可能都不一樣 有些人是以前從事web相關行業的,比如後端,比如設計。從事這些行業的人因為工作需要,多多少少都會對前端有一定的瞭解,不一定是這個詞,但一定是這個職位 小白的話,可能更多的聽到的是h5,css3之類的名詞,其實無論從哪個角度接
jquery和css3實現滑動導航選單
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="ht
純HTML+CSS帶說明的黃色導航選單
HoverTree帶說明的CSS選單:純HTML+CSS結構連結帶說明的黃色導航 <!DOCTYPE html > <html > <head> <title>HoverTree帶說明的CSS選單-hovertree.com</ti
使用laravel開發網站時,如何實現前端導航欄共享資料二種簡單的方法
類似這種,在沒頁面都繼承main.blade.php導航檔案,有些人說了,資料如何進行共享呢,難道讓每個控制器都寫一遍方法嗎? 解決1:將多個控制器同時繼承Controller控制器,可以在: u
關於動態載入html,CSS,javascript程式碼
隨著開始學習前端技術,我也是自然的接觸到了html、CSS、JavaScript這些在網頁前端中最基礎的東西。我也在其中遇到了很多有意思的問題。在一開始我製作的網頁都是用html先把結構全部搭建好了,之後再使用CSS來設定設定html元素的樣式屬性,最後使用JavaScri
前端註冊成功跳轉等待頁面例項(包含Html,Css,JavaScript)
Html程式碼 <div class="container-fluid container-fluid-bg"> <div class="row"> <nav class="header-top">
ios 學習筆記,tabbarcontroller 實現底部導航
要求:通過tabbarcontroller實現一個底部導航,並且實現兩個介面之間通過button切換,互相傳值 參考部落格 轉 tabbar部分 AppDelegate.m #import "AppDelegate.h" #import "View
ExtJs實現手風琴格式選單展示(摺疊選單)
一、簡單的手風琴格式選單: Js程式碼: Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器元件", width:500, height:200, l