图书管理系统-菜单页面实现
成绩管理系统-菜单页面实现
菜单页面是用户登录之后的界面，该页面有人愿意使用横向菜单，有人愿意采用纵向菜单，我比较喜欢纵向菜单，这里做一个手动伸缩的纵向拉伸菜单，可以收到左边且不影响进入右侧的主页面，右侧的空白是留给大家做主页面展示的，可以是数据的可视化，可以是数据的查询界面，也可以是其他。下面的第一个图就是菜单缩到左侧的界面。
当你点击左侧缩回的图书管理系统之后，界面会将菜单显示，如下图所示：
该界面是可以自动化伸缩的，只会显示你点击的分类菜单。这样一个合理的纵向下拉菜单就完成了。代码见下方：
</head>
<body>
<div id="menu">
<!--隐藏菜单-->
<div id="ensconce">
<h2>
<img src="images/show.png" alt="">
图书管理系统
</h2>
</div>
<!--显示菜单-->
<div id="open">
<div class="navH">
图书种类
<span><img class="obscure" src="images/obscure.png" alt=""></span>
</div>
<div class="navBox">
<ul>
<li>
<h2 class="obtain">经济类<i></i></h2>
<div class="secondary">
<h3>经济1</h3>
<h3>经济2</h3>
<h3>经济3</h3>
<h3>经济4</h3>
<h3>经济5</h3>
<h3>经济6</h3>
</div>
</li>
<li>
<h2 class="obtain">语言文字类<i></i></h2>
<div class="secondary">
<h3>语言文字1</h3>
<h3>语言文字2</h3>
<h3>语言文字3</h3>
<h3>语言文字4</h3>
<h3>语言文字5</h3>
<h3>语言文字6</h3>
</div>
</li>
<li>
<h2 class="obtain">自然科学类<i></i></h2>
<div class="secondary">
<h3>自然科学1</h3>
<h3>自然科学2</h3>
<h3>自然科学3</h3>
<h3>自然科学4</h3>
<h3>自然科学5</h3>
<h3>自然科学6</h3>
</div>
</li>
<li>
<h2 class="obtain">数理科学和化学类<i></i></h2>
<div class="secondary">
<h3>数理科学和化学1</h3>
<h3>数理科学和化学2</h3>
<h3>数理科学和化学3</h3>
<h3>数理科学和化学4</h3>
<h3>数理科学和化学5</h3>
<h3>数理科学和化学6</h3>
</div>
</li>
<li>
<h2 class="obtain">医药卫生类<i></i></h2>
<div class="secondary">
<h3>医药卫生1</h3>
<h3>医药卫生2</h3>
<h3>医药卫生3</h3>
<h3>医药卫生4</h3>
<h3>医药卫生5</h3>
<h3>医药卫生6</h3>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="js/menu.js"></script> <!--控制js-->
<div style="text-align:center;">
</div>
</body>
</html>
全部程序
print:q917267119