01html导航菜单，可倾斜的导航菜单设计css

01html导航菜单，可倾斜的导航菜单设计css

游客，如果您要查看本帖隐藏内容请回复

css

1. @import url('https://fonts.googleapis.com/css?family=IM+Fell+English+SC');
   
2. 
   
3. :root {
   
4.   font-size:0.625em;
   
5. }
   
6. 
   
7. /*
   
8. layout
   
9. */
   
10. html,body {min-height:100vh}
    
11. body {
    
12.   display:flex;
    
13.   flex-flow:column nowrap;
    
14.   justify-content:center;
    
15.   align-items:center;
    
16. }
    
17. 
    
18. 
    
19. 
    
20. /*
    
21. Counters
    
22. */
    
23. 
    
24. .menu ol {
    
25.   counter-reset:menu;
    
26. }
    
27. 
    
28. 
    
29. 
    
30. /*
    
31. Regular menu items
    
32. */
    
33. 
    
34. .menu-item a {
    
35.   display:flex;
    
36.   justify-content:flex-start; /*shrink towards text*/
    
37.   color:currentColor;
    
38.   text-decoration:none;
    
39.   padding:0.3rem 0; /* avoid flickin' */
    
40.   order:0;
    
41. }
    
42. 
    
43. .menu-item a::before { /* dots */
    
44.   content:"";
    
45.   display:block;
    
46.   border-bottom:1px dotted black;
    
47.   position:relative; top:-3px;
    
48.   flex:1 1 auto;
    
49.   margin:0 1rem;
    
50.   order:1;
    
51. }
    
52. 
    
53. .menu-item a::after { /* item ids */
    
54.   counter-increment:menu;
    
55.   content:counters(menu, ".");
    
56.   flex:0 0 auto;
    
57.   order:2;
    
58.   transform:rotate(30deg)scale(1.2);
    
59.   text-decoration:underline;
    
60. }
    
61. 
    
62. 
    
63. 
    
64. /*
    
65. Sub menu & items
    
66. */
    
67. 
    
68. .sub-menu {
    
69.   font-size:1.6rem;
    
70.   font-weight:normal;
    
71. }
    
72. 
    
73. .sub-menu > li > a {
    
74.   text-indent:0ch; /*
    
75.     Chrome indentS the "dots" elm, i.e. it counts pseudo-elm.
    
76.     FF and Edge indents first non pseudo-elm.
    
77.     Turn it off for consistency.
    
78.   */
    
79.   padding:0.5rem 0 0.5rem 2ch;
    
80.   margin:0;
    
81. }
    
82. 
    
83. 
    
84. 
    
85. /*
    
86. Main menu
    
87. */
    
88. 
    
89. .menu {
    
90.   width:22vw;
    
91.   min-width:20ch;
    
92.   display:flex;
    
93.   flex-flow:column nowrap;
    
94.   font:bold 2.4rem/1 'IM Fell English SC', serif;
    
95.   position:relative;
    
96.   transform:rotate(-30deg);
    
97. }
    
98. 
    
99. .menu::before {
    
100.   content:"/";
     
101.   align-self:center;
     
102.   transform:rotate(30deg);
     
103.   margin-bottom:1rem;
     
104. }
     
105. 
     
106. .menu::after {
     
107.   content:"/";
     
108.   align-self:center;
     
109.   transform:rotate(30deg);
     
110.   margin-top:1rem;
     
111. }
     
112. 
     
113. 
     
114. 
     
115. /*
     
116. Fx
     
117. */
     
118. 
     
119. .menu { transition:transform 0.3s; }
     
120. .menu:hover { transform:rotate(0); }
     
121. 
     
122. .menu::before { transition:transform 0.5s; }
     
123. .menu:hover::before { transform:rotate(0); content:"__"; }
     
124. .menu::after { transition:transform 0.5s; }
     
125. .menu:hover::after { transform:rotate(0); content:"__"; }
     
126. 
     
127. .menu .menu-item a::after { transition:transform 0.3s }
     
128. .menu:hover .menu-item a::after { transform:rotate(0) }
     
129. 
     
130. .menu:hover > ol > .menu-item { opacity:0.3; }
     
131. 
     
132. .menu-item:hover {
     
133.   transition:background-color 0.3s;
     
134.   background:rgba(255,255,0,0.15);
     
135.   opacity:1 !important;
     
136. }
     
137. 
     
138. .menu-item:hover a::after {
     
139.   text-decoration:none;
     
140. }
     
141. 
     
142. .menu-item:hover > a::before {
     
143.   transition:flex-grow 0.3s;
     
144.   width:0; flex-grow:0;
     
145.   transform-origin:center bottom;
     
146. }
     
147. 
     
148. /*
     
149. Collapse
     
150. */
     
151. 
     
152. .sub-menu > .menu-item {
     
153.   max-height:1ch;
     
154.   transform:scaleY(0.1);
     
155.   transform-origin:center top;
     
156.   transition:transform 0.2s, max-height 0.5s;
     
157. }
     
158. 
     
159. .menu:hover .sub-menu .menu-item {
     
160.   max-height:10em;
     
161.   transform:scaleY(1);
     
162. }

复制代码