無限級菜單簡單的設計

阿新 • • 發佈：2017-09-26

是否包含 bottom -a color htm sta code incr

策略：數據庫就一張表，前端查詢出所有的可顯示的菜單，在前端進行循環展示。

1，數據庫表的設計

CREATE TABLE sys_menu (
  id     INT         NOT NULL  AUTO_INCREMENT,
  name   VARCHAR(64) NOT NULL,
  url    VARCHAR(255),
  pid    INT         NOT NULL  DEFAULT 0,
  isLeaf TINYINT     NOT NULL  DEFAULT 1
  COMMENT ‘0表示不是葉子，1表示是葉子‘,
  status TINYINT     NOT 
 NULL  DEFAULT 1
  COMMENT ‘0表示禁用，1表示啟用‘,
  seq    TINYINT     NOT NULL  DEFAULT 0
  COMMENT ‘同級中的順序，0-n，從上到下‘,
  PRIMARY KEY (id)
);

把菜單當作一個多叉樹，root節點為虛擬節點，id為0。第一層節點表示一級菜單，以此類推。其中，isLeaf表示該菜單是不是葉子節點。

簡單的填充數據如下所示：

技術分享

2，查詢所有菜單的接口(略，簡單的sql查詢)

需要過濾status=0，也就是禁用的菜單。

3，前端展示

3.1 html代碼和css樣式

body中就是如下簡單的代碼

<body>
<ul class="Menue">
</ul>
</body>

css樣式（從網上隨便找的）

<style type="text/css">
        a {
            text-decoration: none;
        }

        ul, li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /*定義菜單*/

        .Menue li {
            background: #111;
            color: #fff;
            height 
: 30px;
            line-height: 30px;
            position: relative;
            float: left;
            margin-right: 5px;
            width: 100px;
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
        }

        .Menue li a {
            color: #fff;
            font-size: 14px;
            display: block;
        }

        /*下拉菜單樣式*/

        ul.sub_menu {
            position: absolute;
            width: 100px;
            display: none;
            z-index: 999;
        }

        .Menue li ul.sub_menu li {
            background: none;
            color: #555;
            font-size: 12px;
            border-bottom: 1px #333 solid;
            position: relative;
            width: 100px;
            height: 30px;
        }

        .Menue li ul.sub_menu li.last {
            border-bottom: none;
        }

        /*js會對最後一個li添加該class，去掉border-bottom效果*/

        .Menue li ul.sub_menu li a {
            background: #222;
            color: #888;
            display: block;
            height: 30px;
        }

        .Menue li ul.sub_menu li a:hover, .Menue li ul.sub_menu li a.now {
            background: #f90;
            color: #fff;
        }

        .Menue li.now, .Menue li.current {
            background: #f60;
            color: #fff;
        }

        /*如果有下拉菜單添加的class*/

        .hasmenu {
            background: url(arrow.png) no-repeat right;
            padding-right: 15px;
        }

        /*主導航箭頭向下*/

        .Menue li a.hasmenu {
            background: url(arrow.png) no-repeat right;
            padding-right: 15px;
            background-position: right -30px;
        }

        /*下拉菜單箭頭向右*/

        .Menue li ul.sub_menu li a.hasmenu {
            background: #222 url(arrow.png) no-repeat right top;
        }

        .Menue li ul.sub_menu li a.hasmenu:hover {
            background: #f90 url(arrow.png) no-repeat right top;
            color: #fff;
        }

    </style>

3.2 jquery ajax獲取所有的菜單數據

$.ajax({
        type: "GET",
        url: "<%=request.getContextPath()%>/menu/getMenus.do",
        dataType: "json",
        success: function (result) {
            if (result.status > 0) {
                //獲取到菜單數據，進行展示
                //1,展示頂級菜單
                var list = result.body;
                var i;
                for (i = 0; i < list.length; i++) {
                    //console.log(typeof list[i].url == ‘undefined‘);//如果url不存在，則為undefined，應該用typeof判斷
                }
                //$(".Menue").html("");
                $(".Menue").html(showFirstLevelMenu(list));
                console.log(showFirstLevelMenu(list))
                //在菜單全部顯示後，增加hover件事
                addHover();
            } else {
                alert(result.message);
            }
        },
        error: function () {
            alert("服務器故障，請刷新或稍後重試!");
        }
    })

當獲取到數據後，將數據拼裝成節點html數據，設置到class=Menu的ul中。然後對動態添加的html代碼段加上hover事件

$(".Menue").html(showFirstLevelMenu(list));
//在菜單全部顯示後，增加hover事件
addHover();

3.3 遞歸拼接

使用遞歸調用實現拼接子菜單

function showFirstLevelMenu(list) {
        //class = Menu_li
        //遍歷list找到
        var menu = "";
        var subList = new Array();
        var i;
        for (i = 0; i < list.length; i++) {
            if (list[i].pid == 0) {
                subList.push(list[i]);
            }
        }
        subList.sort(function (a, b) {
            return a.seq - b.seq;//從小到大排序
        });
        alert(subList.length)
        for (i = 0; i < subList.length; i++) {
            menu += ‘<li class="Menue_li">‘ + showSubMenu(list, subList[i]) + ‘</li>‘;
        }
        return menu;
    }

    function showSubMenu(list, menuInfo) {
        //class = sub_menu
        var menu = ‘<a href="#">‘ + menuInfo.name + ‘</a>‘;
        if (menuInfo.isLeaf == 0) {//有子菜單
            var subList = new Array();
            var i;
            for (i = 0; i < list.length; i++) {
                if (list[i].pid == menuInfo.id) {
                    subList.push(list[i]);
                }
            }
            if (subList.length != 0) {
                subList.sort(function (a, b) {
                    return a.seq - b.seq;//從小到大排序
                });
                menu += ‘<ul class="sub_menu">‘;
                for (i = 0; i < subList.length; i++) {
                    menu += ‘<li>‘ + showSubMenu(list, subList[i]) + ‘</li>‘;
                }
                menu += ‘</ul>‘;
            }
        }
        return menu;
    }

3.4 hover事件(網上粘貼的)

function addHover() {

        //為導航設置默認高亮 與本菜單無關

        $("ul.Menue li.Menue_li:eq(0)").addClass("current")

        /*jquery menu 開始*/

        //為子菜單的最後一個li添加樣式，適合為li添加下劃線時去除最後一個的下劃線

        $(".sub_menu").find("li:last-child").addClass("last")

        //遍歷全部li，判斷是否包含子菜單，如果包含則為其添加箭頭指示狀態

        $(".Menue li").each(function () {

            if ($(this).find("ul").length != 0) {
                $(this).find("a:first").addClass("hasmenu")
            }

        })


        //

        $(".Menue li").hover(function () {

            $(this).addClass("now");

            var menu = $(this);

            menu.find("ul.sub_menu:first").show();

        }, function () {

            $(this).removeClass("now");

            $(this).find("ul.sub_menu:first").hide();

        });


        var submenu = $(".sub_menu").find(".sub_menu")

        submenu.css({left: "100px", top: "0px"})

        $(".sub_menu li").hover(function () {

            $(this).find("a:first").addClass("now")

            $(this).find("ul:first").show();

        }, function () {

            $(this).find("a:first").removeClass("now")

            $(this).find("ul:first").hide()

        });

        /*jquery menu 結束*/

    }

3.5 最終頁面顯示結果

技術分享 =====>>=====>>

無限級菜單簡單的設計

是否包含 bottom -a color htm sta code incr 策略：數據庫就一張表，前端查詢出所有的可顯示的菜單，在前端進行循環展示。 1，數據庫表的設計 CREATE TABLE sys_menu ( id INT NOT

使用postgre數據庫實現樹形結構表的子-父級叠代查詢，通過級聯菜單簡單舉例

with 兼容 rep blank 增刪改結果關系型 mssq word 前言：開發常用的關系型數據庫MySQL，mssql，postgre，Oracle，簡單的增刪改查的SQL語句都與標準SQL兼容，這個不用講，那麽對於叠代查詢（不嚴格的叫法：遞歸查詢）每種數據庫都不

最簡單的無線分類，無限樹形菜單解決方案

func AD nbsp name 簡單 AC DC pos div JS版本　　整體思路就是：不管多少層級，每層都需要添加子類進去，寫個遞歸函數尋找子類即可 var data = [ {"txt":"成都",

3級菜單實現---low版

菜單json menu(): file=(,,=) str=f (): str=str+file.readline() =json.loads(str) file.close() dict=menu() wl(dc): : m

python-實現3級菜單（作業課）

大頁 max 退出廣州 += 2級菜單 span -- 顯示 1 #任務： 2 #顯示3級菜單 3 #1級菜單#顯示 3個城市 => 1北京 2上海 3廣州 4 #2級菜單 #顯示選擇1 北京 => B1 B2 B3 5 #2級菜單 #顯示

利用jQuery設計橫/縱向菜單

cor 清晰 down content img javascrip ogg 當我菜單在網頁中，菜單扮演著“指路者”的角色。怎樣設計一個人性化的菜單呢。以下小編帶著大家一起做。效果圖：設計歷程： 1.首先利用html中的<ul>和&l

JS簡單實現自定義右鍵菜單

ans idt 右鍵動畫忘記 span spa round 部分 RT，一個簡單的例子，僅僅講述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolu

【Android 應用開發】 ActionBar 樣式具體解釋 -- 樣式主題簡單介紹 Actionbar 的 icon logo 標題菜單樣式改動

detail sub str 進度條代碼分析 extc dst 模式 html 作者 : 萬境絕塵 ([email protected]/* */)轉載請著名出處 : http://blog.csdn.net/shulianghan/article/deta

兩種簡單實現菜單高亮顯示的JS類(轉載)

on() pos 菜單高亮 href 不同的 index body -m ear 兩種簡單實現菜單高亮顯示的JS類近期在寫一個博客管理後臺的前端,涉及在同一頁面兩種高亮顯示當前菜單的需求.記得當年寫靜態頁時,為了實現高亮都是在每個頁面加不同的樣式,呵.高亮

Python字典實現簡單的三級菜單

直轄市 test 什麽 bre python字典山東 oldboy als 實現 data = { "北京":{ "昌平":{"沙河":["oldboy","test"],"天通苑":["鏈接地產","我愛我家"]}, "朝陽":{"望京

[收集] 各式各樣的無限級分類的數據庫設計方案

where 數據庫位數 sel 其中三級 mat sco tiny 第一種方案：表為兩張，一張分類表，一張信息表。表1： `ID` int(10), `cID` tinyint(3) , `title` varchar(255), 表2：`cID` tinyint(

Ubuntu下使用dialog制作菜單執行簡單操作

cat img cti ext cnblogs 文件 cas exit lec 新建test5 #!/bin/bash #using select in the menu temp=$(mktemp -t test.XXXXXX) temp2=$(mktemp -t te

簡單的菜單聯動

creat end long 簡單 append children 目錄 es2017 ima 1 <select name="" id="a"> 2 <option value="">guangdong</option&

python（5）- 簡單練習：python三級菜單優化

blog 三級 cells lsp http x11 cin while 山東 python三級菜單優化，菜鳥版鏈接：http://www.cnblogs.com/xuyaping/p/6648170.html 1 2 3 4 5 6 7 8 9 10 11

幹貨分享！關於APP導航菜單設計你應該了解的一切

導航菜單是人機交互的最主要的橋梁和平臺，主要作用是不讓用戶迷失方向。現在市面上產品的菜單欄種類繁多，到底什麽樣的才是優秀的導航菜單設計呢？好的菜單設計不僅能提升整個產品的用戶體驗，而且還能讓用戶耳目一新。這篇文章將聚焦導航菜單，分享我們對於導航菜單的認識和體驗。一、導航菜單有什麽作用？

簡單練習：Python三級菜單優化

nbsp while 重新定義 pri 浦東 continue end pan true 1 menu = { 2 ‘北京‘:{ 3 ‘海澱‘:{ 4 ‘五道口‘:{ 5 ‘soho

BootStrap實現簡單響應式導航菜單

bar query alt str content doctype bootstra inf ini 　　　用BootStrap實現響應式導航欄，我會對其中的一些樣式進行說明。　　先上代碼，是一個很簡單的Demo。　　　 <!doctype html>

MySQL基礎入門學習【9】無限級分類表設計

父親連接參照物 insert gpo 平板電視生活電器 type mysql 比如：圖書/小說、文學.../四大名著、戲曲.../... 理論上可以設計很多張表；但是隨著分類逐步增多，這些表的數目不可能無限擴展；所以對於無限級分類表一般我們采用如下形式(通過自身

簡單遞歸寫側邊菜單欄

() data $.ajax nbsp urn += false com bubuko htm： <div id="main"> </div> data： { "code": 100, "content": {

級聯菜單

nth while ESS != ref pan pid left HR <?php header("content:text/html;charset=utf8"); $con=@mysql_connect("localhost","roo

無限級菜單簡單的設計

1，數據庫表的設計

2，查詢所有菜單的接口(略，簡單的sql查詢)

3，前端展示

3.1 html代碼和css樣式

3.2 jquery ajax獲取所有的菜單數據

3.3 遞歸拼接

3.4 hover事件(網上粘貼的)

3.5 最終頁面顯示結果

相關推薦