MENU菜单功能示范脚本

admin

重大调整，弘帝框架及弘帝HTML6全面替代原MENU设计思想
新的HTML6代码：
<navbar-toggler class="本功能样式" btn="手机菜单按纽的样式" tar="调用的目录菜单ID" menu="目录菜单的手机样式" show="默认手机的菜单项是否显示"></navbar-toggler>
navbar-toogler暂时用bootstrap命名法，此标签可显示在任意位置。

弘帝启用FLEX技术全面取代老式排版

DIV:
<div class="menu">$func_menu(pos=0,divi=none)$</div>

CSS:
.menu{ height: 60px; background: #5A342b;text-align: center;}
.menu .MenuCenter{ display:block; width:1200px; margin: 0 auto;}
.menu ul{ display: flex; justify-content: center; flex-direction: row;}
.menu ul li{flex-grow:1;}
.menu ul li a{ display:block; color: #fff; line-height: 60px; font-size: 15px;}
.menu ul li a:hover,.menu ul .sel a{ background:#472922;}

JS:
$(function(){var o=jQuery(".menu ul li .sel");$(function(){$(".menu ul li").hover(function(){o.removeClass();$(this).children("ul").slideDown()},function(){o.addClass("sel");$(this).children("ul").slideUp()})})});

admin

固定底部的菜单

DIV:
<div class="fixed-bottom w-100 blue hidden-lg">$func_menu(pos=1,divi=none)$</div>
SCSS:须加载hondy.css

1. .fixed-bottom {
   
2.     .on a:hover {
   
3.         color: $white;
   
4.     }
   
5. 
   
6.     ul li {
   
7.         text-align: center;
   
8. 
   
9.         &::before {
   
10.             margin: 0 auto;
    
11.             font-size: 24px;
    
12.             justify-content: center;
    
13.         }
    
14. 
    
15.         &:nth-child(1):before {
    
16.             text-align: center;
    
17.             content: '\f015';
    
18.         }
    
19. 
    
20.         &:nth-child(2)::before {
    
21.             content: '\f097';
    
22.         }
    
23. 
    
24.         &:nth-child(3)::before {
    
25.             content: '\f07a';
    
26.         }
    
27. 
    
28.         &:nth-child(4)::before {
    
29.             content: '\f098';
    
30.         }
    
31. 
    
32.         a {
    
33.             padding: 0;
    
34.             font-size: 12px;
    
35.         }
    
36.     }
    
37. }

复制代码

admin

DIV:
<div class="py-3">
        <div class="container">
                <div class="row">
                        <div class="logo col-lg-3">$show_logo$</div>
                        <div class="red menu col-lg-9 menu-lg-underline">$func_menu(pos=0,divi=none,sub=1)$</div>
                </div>
        </div>
</div>


CSS:

1. .red {
   
2.     background: $red;
   
3.     color: $white;
   
4. 
   
5.     menu {
   
6.         ul {
   
7.             li {
   
8.                 a {
   
9.                     color: $white;
   
10.                 }
    
11. 
    
12.                 &.on,
    
13.                 &:hover {
    
14.                     a {
    
15.                         background: $orange;
    
16.                     }
    
17. 
    
18.                     ul {
    
19. 
    
20.                         li {
    
21.                             a {
    
22.                                 &:hover {
    
23.                                     color: $white;
    
24.                                 }
    
25.                             }
    
26.                         }
    
27.                     }
    
28.                 }
    
29.             }
    
30.         }
    
31. 
    
32.     }
    
33. }
    
34. 
    
35.     .menu-lg-underline {
    
36.         background: transparent;
    
37.         color: inherit;
    
38. 
    
39.         ul {
    
40.             li {
    
41.                 text-align: center;
    
42. 
    
43.                 a {
    
44.                     display: inline-flex;
    
45.                     color: inherit !important;
    
46.                     border-bottom: 2px solid transparent;
    
47. 
    
48.                     b {
    
49.                         display: none;
    
50.                     }
    
51.                 }
    
52. 
    
53.                 &.on,
    
54.                 &:hover {
    
55. 
    
56. 
    
57.                     a {
    
58.                         background: $white !important;
    
59.                         color: inherit;
    
60.                         border-bottom: 2px solid $red;
    
61.                     }
    
62. 
    
63.                     ul {
    
64.                         background: $red;
    
65. 
    
66.                         li {
    
67.                             background: $red;
    
68. 
    
69.                             a {
    
70.                                 background: $red !important;
    
71.                                 display: flex;
    
72.                                 white-space: nowrap;
    
73.                                 text-align: left;
    
74.                                 padding-left: 40px;
    
75.                                 padding-right: 40px;
    
76.                                 justify-content: left;
    
77.                                 border-bottom: 0 !important;
    
78.                                 color: $white !important;
    
79. 
    
80.                                 &:hover {
    
81.                                     background: $gray !important;
    
82.                                     color: inherit !important;
    
83. 
    
84.                                     &::before {
    
85.                                         margin-left:-20px;
    
86.                                         content: '\f02e';
    
87.                                         margin-right: 10px;
    
88.                                         color: $orange;
    
89.                                     }
    
90.                                 }
    
91.                             }
    
92.                         }
    
93.                     }
    
94.                 }
    
95. 
    
96.                 ul {
    
97.                     background: $red;
    
98.                     left: 0;
    
99.                     margin-top: -2px;
    
100.                     width: auto;
     
101. 
     
102.                 }
     
103.             }
     
104.         }
     
105.     }

复制代码

admin

模板：meiyi | 250603
效果：


HTML:
<div class="container-fluid header">
    <div class="container-xxl">
        <div class="row justify-content-lg-between align-items-center">
            <div class="logo d-xl-none">$show_logo$</div>
            <div class="menu d-none d-xl-flex" id="navbar">$func_menu(pos=0,sub=2,divi=none)$</div>
            <navbar-toggler class="fixed-top text-right mt-3" btn="bg-fst white m-3 mt-4 d-inline-block d-xl-none"
                tar="navbar" menu="bg-fst px-0 red li-hover-sec hover-white ul-li-2" show="false"></navbar-toggler>
        </div>
    </div>
</div>


CSS：
.Logo {
    display: flex;
    flex-flow: column-reverse wrap;
    margin-bottom: 1rem;

    .dt {
        font-size: 2rem;
    }

    .dd {
        img {
            max-width: 100%;
            filter: brightness(100%);
        }
    }
}

li.logo {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;

    .Logo {
        img {
            max-height: 60px !important;
            width: auto !important;
            max-width: auto !important;
        }

    }
}

.header {
    background-color: rgba($color: white, $alpha: 0.5);

    .menu {
        display: flex;
        flex-grow: 1;

        ul {
            flex-grow: 1;

            li {
                padding-left: 20px;
                padding-right: 20px;
                position: relative;

                a {
                    padding-top: 10px;
                    padding-bottom: 10px;
                }

                ul {
                    position: absolute;
                    background-color: rgba($color: white, $alpha: 0.5);
                    padding-top: 10px !important;
                    padding-bottom: 0 !important;
                    top: 100% !important;
                    left: 50% !important;
                    transform: translateX(-50%);
                    z-index: 10000;

                    li {
                        padding: 0;

                        a {
                            font-weight: 100 !important;
                            padding: 10px 15px;
                        }

                        ul {
                            display: none !important;
                        }

                        &:last-child {
                            border-bottom: 0;
                        }

                        &:hover {
                            background-color: darken($fst, 5%) !important;

                            a {
                                color: white !important;
                            }

                            ul {
                                display: flex !important;
                                position: absolute;
                                top: 0 !important;
                                left: 150% !important;
                                padding: 0 !important;
                                background-color: $fst;

                                li {
                                    border-bottom: 1px solid rgba($color: white, $alpha: 0.1);

                                    &:hover {
                                        background-color: #2D3D87 !important;
                                    }
                                }
                            }
                        }

                    }
                }

                &:hover {
                    // background-color: $fst;

                    ul li a {
                        // color: white;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}


JS:
$(function(){
    moveLogoToMiddle();
});
//将logo移动主菜单中间
function moveLogoToMiddle() {
    const $menu = $(".header menu");
    const $logo = $(".Logo");
    const $menuItems = $menu.find("ul li.menutop.li3");

    // 先移除 Logo（避免重复插入）
    $logo.detach();

    // 用 <li> 包裹 Logo
    const $logoLi = $("<li class='logo'></li>").append($logo);
    $logoLi.insertAfter($menuItems);
}