1

2

3 /*重置一些樣式*/

4 *, *::after, *::before{

5 box-sizing:border-box;

6 /*padding: 0;*/

7 margin:0;

8 font-size:14px;

9 }

10 .cd-vertical-nav ul{

11 list-style:none;

12 }

13 a{

14 color:#c0a672;

15 text-decoration:none;

16 }

17

18 .nav{

19 height:80px;

20 }

21

22 .cd-image-replace{

23 /*小屏顯示的圖標*/

24 display:inline-block;

25 overflow:hidden;

26 text-indent:100%;

27 white-space:nowrap;

28 color:transparent;

29 }

30

31 /*--------------------------------32

33 小屏時的圖標樣式，和小圖標響應式的顯示與隱藏34

35 --------------------------------*/

36 .cd-nav-trigger{

37 display:block;

38 position:fixed;

39 z-index:2;

40 bottom:30px;

41 right:5%;

42 height:44px;

43 width:44px;

44 border-radius:0.25em;

45 background:rgba(9, 150,90, 0.9);

46 /*reset button style*/

47 cursor:pointer;

48 -webkit-appearance:none;

49 -moz-appearance:none;

50 -ms-appearance:none;

51 -o-appearance:none;

52 appearance:none;

53 border:none;

54 outline:none;

55 }

56 .cd-nav-trigger span{

57 position:absolute;

58 height:4px;

59 width:4px;

60 background-color:#3a2c41;

61 border-radius:50%;

62 left:50%;

63 top:50%;

64 bottom:auto;

65 right:auto;

66 transform:translateX(-50%) translateY(-50%);

67 }

68 .cd-nav-trigger span::before, .cd-nav-trigger span::after{

69 content:\'\';

70 position:absolute;

71 left:0;

72 height:100%;

73 width:100%;

74 background-color:#3a2c41;

75 border-radius:inherit;

76 }

77 .cd-nav-trigger span::before{

78 top:-9px;

79 }

80 .cd-nav-trigger span::after{

81 bottom:-9px;

82 }

83

84 @media only screen and (min-width: 768px){

85 .cd-nav-trigger {86 display:none;

87 }

88 }89

90 /*--------------------------------91

92 導航條的背景等屬性93

94 --------------------------------*/

95 /*移動優先原則 這里是小屏時的導航*/

96 .cd-vertical-nav{

97 position:fixed;

98 z-index:1;

99 right:5%;

100 bottom:30px;

101 width:90%;

102 max-width:400px;

103 max-height:90%;

104 overflow-y:auto;

105 transform:scale(0);

106 transform-origin:right bottom;

107 transition:transform 0.2s;

108 border-radius:0.25em;

109 background-color:rgba(9, 9, 9, 0.9);

110 }

111 .cd-vertical-nav li{

112 height:auto;

113 }

114 .cd-vertical-nav a{

115 display:block;

116 padding:1em;

117 color:#3a2c41;

118 font-weight:bold;

119 border-bottom:1px solid rgba(58, 44, 65, 0.1);

120 }

121 .cd-vertical-nav a.active{

122 color:#c0a672;

123 }

124 .cd-vertical-nav.open{

125 transform:scale(1);

126 z-index:10;

127 -webkit-overflow-scrolling:touch;

128 }

129 .cd-vertical-nav.open + .cd-nav-trigger{

130 background-color:transparent;

131 }

132 .cd-vertical-nav.open + .cd-nav-trigger span{

133 background-color:rgba(58, 44, 65, 0);

134 }

135 .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after{

136 /*給點擊后的按鈕做叉號(×)樣式*/

137 height:3px;

138 width:20px;

139 border-radius:0;

140 left:-8px;

141 }

142 .cd-vertical-nav.open + .cd-nav-trigger span::before{

143 -webkit-transform:rotate(45deg);

144 -moz-transform:rotate(45deg);

145 -ms-transform:rotate(45deg);

146 -o-transform:rotate(45deg);

147 transform:rotate(45deg);

148 top:1px;

149 }

150 .cd-vertical-nav.open + .cd-nav-trigger span::after{

151 -webkit-transform:rotate(135deg);

152 -moz-transform:rotate(135deg);

153 -ms-transform:rotate(135deg);

154 -o-transform:rotate(135deg);

155 transform:rotate(135deg);

156 bottom:0;

157 }

158 @media only screen and (min-width: 768px){

159 .cd-vertical-nav {160 /*pc端展示的效果，首先重置一下樣式*/

161 right:0;

162 top:0;

163 bottom:auto;

164 text-align:center;

165

166 /*這里的vh是相對可視屏幕的高度，100vh表示高度始終等于瀏覽器可是高度*/

167 height:100vh;

168 width:90px;

169 max-width:none;

170 max-height:none;

171 transform:scale(1);

172 background-color:transparent;

173 overflow:hidden;

174 /*下面通過flex彈性盒子，讓內容的主軸線編程垂直的。175 然后通過修改主軸的元素排列方式讓他們居中*/

176 display:flex;

177 flex-direction:column;

178 justify-content:center;

179 }

180

181 /*下面通過調節內容的縮放比和padding，margin等屬性來調節個選項間的距離，實現動畫效果

總結

以上是生活随笔為你收集整理的侧边导航栏代码css,【源码分享】jquery+css实现侧边导航栏(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。