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.     }

复制代码