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

CSS，JavaScript實現手風琴導航選單

相關推薦