垂直（纵向）二级导航菜单

江山如画 • 2018年9月19日下午7:46 • 网页特效 • 阅读 25482

CSS+JS制作的垂直（纵向）二级导航菜单，可灵活修改。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS+JS制作的垂直（纵向）二级导航菜单|www.125jz.com</title> <style type="text/css">  #PARENT{ width:300px; padding-left:20px; } </style> </head> <body> <div id="PARENT"> <ul id="nav"> <li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">网页制作</a> <ul id="ChildMenu1" class="collapsed"> <li><a href="#">网页制作入门</a></li> <li><a href="#">网页教学网</a></li> <li><a href="#">网站开发</a></li> </ul> </li> <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">网页设计</a> <ul id="ChildMenu2" class="collapsed"> <li><a href="#">web前端</a></li> <li><a href="#">网页配色</a></li> <li><a href="#">网页布局</a></li> </ul> </li> <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">视频教程</a> <ul id="ChildMenu3" class="collapsed"> <li><a href="#">Photoshop</a></li> <a href="#">HTML5</a></li> <li><a href="#">Javascript</a></li> </ul> </li> <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">在线课程</a> <ul id="ChildMenu4" class="collapsed"> <li><a href="#">DIV+CSS</a></li> <li><a href="#">设计宝典</a></li> <li><a href="#">网页开发</a></li> </ul> </li> </ul> </div> </body> </html> <script type=text/javascript></script>

Tips:You can change the code before run.

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2615.html