Building a Side Navigation Menu with jQuery

🏷️ jq 🏷️ jq侧边导航jQuery Sidebar Navigation 🏷️ 侧边导航Sidebar Navigation 📂 js 📝 424 字 · ⏱️ 2 分钟 阅读 0 次 👀

As domestic website development has matured, plenty of companies have started asking for improvements to their admin interfaces. What follows is how to build a side navigation menu with jQuery. Requirement: make a navigation where clicking a different link shows the corresponding content. First, build a basic HTML and CSS layout Next, do a bit of simple analysis. The submenu content is hidden when the page opens; when you click a navigation link with the mouse, an action fires that displays the hidden sub-navigation. That’s show() to display and hide() to hide With that, tune the corresponding CSS and the effect appears Finally, here is the complete code <!DOCTYPE html> jq Product Navigation

css file / reset /
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
body{m
  argin:0;padding:0 0 12px 0;
  font-size:12px;
  line-height:22px;
  font-family:"\\5b8b\\4f53","Arial Narrow";background:#fff;
} 
form,ul,li,p,h1,h2,h3,h4,h5,h6{
  margin:0;
  padding:0;
}
input,select{
  font-size:12px;
  line-height:16px;
} 
img{border:0;}
ul,li{list-style-type:none;} 
a {
  color:#00007F;
  text-decoration:none;
} 
a:hover {
  color:#bd0a01;
  text-decoration:underline;
} 
.box { width: 150px; margin: 0 auto; } 
.menu{ 
  width:100%; 
  overflow:hidden;
  border-color: #C4D5DF; 
  border-style: solid;
  border-width: 0 1px 1px; 
} 
/* lv1 */ 
.menu li.level1 a{ 
  display: block;
  height: 28px; 
  line-height: 28px;
  background:#EBF3F8;
  font-weight:700;
  color: #5893B7;
  text-indent: 14px;
  border-top: 1px solid #C4D5DF; 
} 
.menu li.level1 a:hover{text-decoration:none;} 
.menu li.level1 a.current{background:#B1D7EF;}
/* lv2 */ 
.menu li ul{overflow:hidden;} 
.menu li ul.level2{ 
  width:100%; 
  display:none; 
  text-align: left; 
}
.menu li ul.level2 li a{ 
  width: 100%; display: block; 
  height: 28px; line-height: 28px;
  background:#ffffff;
  font-weight:400;
  color: #42556B; 
  text-indent: 18px; 
  border-top: 0px solid #ffffff;
  overflow: hidden; 
  text-align: left; 
}
.menu li ul.level2 li a:hover{ color:#f60; }

🧑‍💻 本文作者：艾瑞可erik
🔗 本文链接：https://erik.xyz/2015/07/31/jq-shi-xian-ce-bian-dao-hang-en/
📜 版权声明：本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可，转载请注明出处！
支付宝💙 支付宝
微信💚 微信