Menus sidebar đóng mở đơn giản

05/07/2021 04:33 2171

Anh chị cần làm menu giống như hình dưới đây:

Các code của nó (lưu ý cần include thư viện font awesome):

Table of Contents

1. Code html

<div class="peg100_prodcut_cat_sidebar">
        	                <ul>
                                <li>
                <div class="product_cat_level_2"><span>PEG Products by Functionality</span><span class=""><i class="fa fa-angle-down" aria-hidden="true"></i></span></div>
                	                    <ul>
                    	                    	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/acrylate-acrylamide-peg/">
                            Acrylate/Acrylamide PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/aldehyde-acetal-peg/">
                            Aldehyde / Acetal PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/alkyne-peg/">
                            Alkyne PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/amine-peg/">
                            Amine PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/azide-peg/">
                            Azide PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/biotin-peg/">
                            Biotin PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/boc-fmoc-protected-amine-peg/">
                            Boc/Fmoc protected amine PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/carboxylic-acid-peg/">
                            Carboxylic acid PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/caroxylic-acid-peg/">
                            Caroxylic acid PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/dbco-peg/">
                            DBCO PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/epoxide-glycidyl-ether-peg/">
                            Epoxide glycidyl ether PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/epoxide-peg/">
                            Epoxide PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/fluorescent-peg/">
                            Fluorescent PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/halide-chloride-bromide-peg/">
                            Halide (chloride, bromide) PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/hydrazide-peg/">
                            Hydrazide PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/hydroxyl-peg/">
                            Hydroxyl PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/lipid-dspe-cholesterol-peg/">
                            Lipid / DSPE / Cholesterol PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/maleimdie-peg/">
                            Maleimdie PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/maleimide-peg/">
                            Maleimide PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/nhs-esster-peg/">
                            NHS esster PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/nhs-ester-peg/">
                            NHS ester PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/nitrophenyl-carbonate-npc-peg/">
                            Nitrophenyl carbonate (NPC) PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/norbornene-peg/">
                            Norbornene PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/orthopyridyl-disulfide-opss-peg/">
                            Orthopyridyl disulfide (OPSS) PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/phosphate-peg/">
                            Phosphate PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/pyrene-peg/">
                            Pyrene PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/silane-peg/">
                            Silane PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/sulfonate-tosyl-mesyl-tresyl-peg/">
                            Sulfonate (tosyl, mesyl, tresyl) PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/tert-butyl-protected-carboxylate-peg/">
                            tert-Butyl protected carboxylate PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/thiol-peg/">
                            Thiol PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-functionality/vinylsulfone-peg/">
                            Vinylsulfone PEG                            </a>
                        </li>
                                            </ul>
                                    </li>
                                <li>
                <div class="product_cat_level_2"><span>PEG Products by Reactivity</span><span class=""><i class="fa fa-angle-down" aria-hidden="true"></i></span></div>
                	                    <ul>
                    	                    	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/amine-reactive-peg-derivatives/">
                            Amine reactive PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/biotinylation-peg/">
                            Biotinylation PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/biotinylation-peg-derivatives/">
                            Biotinylation PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/cabonyl-reactive-peg-derivatives/">
                            Cabonyl reactive PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/caboxyl-reactive-peg-derivatives/">
                            Caboxyl reactive PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/carbon-nanotube-cnt-graphene-binding-peg-derivatives/">
                            Carbon nanotube CNT graphene binding PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/carbonyl-reactive-peg-derivatives/">
                            Carbonyl reactive PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/carboxyl-reactive-peg-derivatives/">
                            Carboxyl reactive PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/click-chemistry-peg-derivatives/">
                            Click chemistry PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/dye-labeling-peg-derivatives/">
                            Dye labeling PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/hydroxyl-reactive-peg-derivatives/">
                            Hydroxyl reactive PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/nhs-ester-reactive-peg/">
                            NHS Ester Reactive PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/polymerizable-peg-derivatives/">
                            Polymerizable PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/protein-n-terminal-reactive-peg-derivatives/">
                            Protein N-terminal reactive PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/reversible-pegylation/">
                            Reversible PEGylation                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/self-assembling-peg-derivatives/">
                            Self-assembling PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/surface-reactive-peg-derivatives/">
                            Surface reactive PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/thiol-reactive-peg-derivatives/">
                            Thiol reactive PEG derivatives                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-reactivity/thiol-ene-crosslinker-chemistry/">
                            Thiol-ene Crosslinker Chemistry                            </a>
                        </li>
                                            </ul>
                                    </li>
                                <li>
                <div class="product_cat_level_2"><span>PEG Products by Structure</span><span class="opened"><i class="fa fa-angle-up" aria-hidden="true"></i></span></div>
                	                    <ul style="">
                    	                    	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-structure/4-arm-peg/">
                            4-Arm PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-structure/8-arm-peg/">
                            8-Arm PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-structure/amphiphilic-surfactant-peg/">
                            Amphiphilic, surfactant PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-structure/heterobifunctional-peg/">
                            Heterobifunctional PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-structure/homobifunctional-peg/">
                            Homobifunctional PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-structure/monodisperse-peg/">
                            Monodisperse PEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-structure/mpeg/">
                            mPEG                            </a>
                        </li>
                                            	<li>
                            <a href="http://localhost/peg100/product-category/peg-products/peg-products-by-structure/peg-raw-materials/">
                            PEG Raw Materials                            </a>
                        </li>
                                            </ul>
                                    </li>
                                </ul>
              		</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

<ul>

<li>

<div class="product_cat_level_2"><span>PEG Products by Functionality</span><span class=""><i class="fa fa-angle-down" aria-hidden="true"></i></span></div>

<ul>

<li>

Acrylate/Acrylamide PEG </a>

</li>

<li>

Aldehyde / Acetal PEG </a>

</li>

<li>

Alkyne PEG </a>

</li>

<li>

Amine PEG </a>

</li>

<li>

Azide PEG </a>

</li>

<li>

Biotin PEG </a>

</li>

<li>

Boc/Fmoc protected amine PEG </a>

</li>

<li>

Carboxylic acid PEG </a>

</li>

<li>

Caroxylic acid PEG </a>

</li>

<li>

DBCO PEG </a>

</li>

<li>

Epoxide glycidyl ether PEG </a>

</li>

<li>

Epoxide PEG </a>

</li>

<li>

Fluorescent PEG </a>

</li>

<li>

Halide (chloride, bromide) PEG </a>

</li>

<li>

Hydrazide PEG </a>

</li>

<li>

Hydroxyl PEG </a>

</li>

<li>

Lipid / DSPE / Cholesterol PEG </a>

</li>

<li>

Maleimdie PEG </a>

</li>

<li>

Maleimide PEG </a>

</li>

<li>

NHS esster PEG </a>

</li>

<li>

NHS ester PEG </a>

</li>

<li>

Nitrophenyl carbonate (NPC) PEG </a>

</li>

<li>

Norbornene PEG </a>

</li>

<li>

Orthopyridyl disulfide (OPSS) PEG </a>

</li>

<li>

Phosphate PEG </a>

</li>

<li>

Pyrene PEG </a>

</li>

<li>

Silane PEG </a>

</li>

<li>

Sulfonate (tosyl, mesyl, tresyl) PEG </a>

</li>

<li>

tert-Butyl protected carboxylate PEG </a>

</li>

<li>

Thiol PEG </a>

</li>

<li>

Vinylsulfone PEG </a>

</li>

</ul>

</li>

<li>

<div class="product_cat_level_2"><span>PEG Products by Reactivity</span><span class=""><i class="fa fa-angle-down" aria-hidden="true"></i></span></div>

<ul>

<li>

Amine reactive PEG derivatives </a>

</li>

<li>

Biotinylation PEG </a>

</li>

<li>

Biotinylation PEG derivatives </a>

</li>

<li>

Cabonyl reactive PEG derivatives </a>

</li>

<li>

Caboxyl reactive PEG derivatives </a>

</li>

<li>

Carbon nanotube CNT graphene binding PEG derivatives </a>

</li>

<li>

Carbonyl reactive PEG derivatives </a>

</li>

<li>

Carboxyl reactive PEG derivatives </a>

</li>

<li>

Click chemistry PEG derivatives </a>

</li>

<li>

Dye labeling PEG derivatives </a>

</li>

<li>

Hydroxyl reactive PEG derivatives </a>

</li>

<li>

NHS Ester Reactive PEG </a>

</li>

<li>

Polymerizable PEG derivatives </a>

</li>

<li>

Protein N-terminal reactive PEG derivatives </a>

</li>

<li>

Reversible PEGylation </a>

</li>

<li>

Self-assembling PEG derivatives </a>

</li>

<li>

Surface reactive PEG derivatives </a>

</li>

<li>

Thiol reactive PEG derivatives </a>

</li>

<li>

Thiol-ene Crosslinker Chemistry </a>

</li>

</ul>

</li>

<li>

<div class="product_cat_level_2"><span>PEG Products by Structure</span><span class="opened"><i class="fa fa-angle-up" aria-hidden="true"></i></span></div>

<li>

4-Arm PEG </a>

</li>

<li>

8-Arm PEG </a>

</li>

<li>

Amphiphilic, surfactant PEG </a>

</li>

<li>

Heterobifunctional PEG </a>

</li>

<li>

Homobifunctional PEG </a>

</li>

<li>

Monodisperse PEG </a>

</li>

<li>

mPEG </a>

</li>

<li>

PEG Raw Materials </a>

</li>

</ul>

</li>

</ul>

</div>

2. Code css

<style>
.peg100_prodcut_cat_sidebar ul {
    margin: 0;
    padding: 0;
}

.peg100_prodcut_cat_sidebar ul li {
    list-style: none;
}


.peg100_prodcut_cat_sidebar>ul>li>.product_cat_level_2 {
    position: relative;
    border: 1px solid #ddd;
    padding: 5px;
    font-size: 18px;
	    margin-bottom: 10px;
}

.peg100_prodcut_cat_sidebar>ul>li>.product_cat_level_2>span:nth-of-type(2) {
    position: absolute;
    right: 5px;
	    cursor: pointer;
}

.peg100_prodcut_cat_sidebar>ul>li>ul>li {list-style: disc;line-height: 35px;}

.peg100_prodcut_cat_sidebar>ul>li>ul {
    padding-left: 14px;
	display: none;
}
.peg100_prodcut_cat_sidebar>ul>li:last-child>ul {
	display: block;
}

</style>

<style>

.peg100_prodcut_cat_sidebar ul {

margin: 0;

padding: 0;

}

.peg100_prodcut_cat_sidebar ul li {

list-style: none;

}

.peg100_prodcut_cat_sidebar>ul>li>.product_cat_level_2 {

position: relative;

border: 1px solid #ddd;

padding: 5px;

font-size: 18px;

margin-bottom: 10px;

}

.peg100_prodcut_cat_sidebar>ul>li>.product_cat_level_2>span:nth-of-type(2) {

position: absolute;

right: 5px;

cursor: pointer;

}

.peg100_prodcut_cat_sidebar>ul>li>ul>li {list-style: disc;line-height: 35px;}

.peg100_prodcut_cat_sidebar>ul>li>ul {

padding-left: 14px;

display: none;

}

.peg100_prodcut_cat_sidebar>ul>li:last-child>ul {

display: block;

}

</style>

Các bài viết khác có thể hữu ích với bạn

3. Code js

<script>
jQuery(function($){
	$(document).ready(function(e) {
        $(document).on('click','.peg100_prodcut_cat_sidebar>ul>li>.product_cat_level_2>span:nth-of-type(2)',function(e){
			e.preventDefault();
			console.log($(this).parent('li'));
			$(this).parent().parent().find('ul').toggle();
			if($(this).hasClass('opened')){
				$(this).removeClass('opened');
				$(this).html('<i class="fa fa-angle-down" aria-hidden="true"></i>');
			}else{
				$(this).addClass('opened');
				$(this).html('<i class="fa fa-angle-up" aria-hidden="true"></i>');
			}
		});
    });	
});
</script>

jQuery(function($){

$(document).ready(function(e) {

$(document).on('click','.peg100_prodcut_cat_sidebar>ul>li>.product_cat_level_2>span:nth-of-type(2)',function(e){

e.preventDefault();

console.log($(this).parent('li'));

$(this).parent().parent().find('ul').toggle();

if($(this).hasClass('opened')){

$(this).removeClass('opened');

$(this).html('<i class="fa fa-angle-down" aria-hidden="true"></i>');

}else{

$(this).addClass('opened');

$(this).html('<i class="fa fa-angle-up" aria-hidden="true"></i>');

}

});

</script>

5/5 (2 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Disable animation trong revolution slider [ 20/09/2022 08:07 ]
Cách tạo button printer một element bằng javascript [ 19/09/2022 12:56 ]
Code sử dụng vue js, quasar, axios, sweetalert2 trong tác vụ quản lý danh sách [ 19/07/2022 10:26 ]
Hướng dẫn lấy botToken và chatId của bot telegram [ 13/06/2022 13:54 ]
Tạo thanh bar bottom mobile trong theme wordpress [ 07/06/2022 10:00 ]
Fix acf not save iframe [ 23/04/2022 07:44 ]
Rewrite lại url cho page template wordpress [ 21/04/2022 02:11 ]
Tối ưu hóa cron trong wordpress để website chạy nhanh hơn [ 09/04/2022 03:30 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Thêm editor cho mô tả category wordpress (add editor description for category wordpress) [ 01/04/2022 02:02 ]

Menus sidebar đóng mở đơn giản

1. Code html

2. Code css

3. Code js

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)