Html+Css+Jquery导航页面练习
悬浮导航：ul+li实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>导航练习</title> <style> *{ margin: 0; padding: 0; } #nav_bar { /* position: absolute; */ width: 22%; height: 800px; /* border: 1px solid red; */ float: left; background-color: aliceblue; } li { position: relative; list-style: none; width: 100px; height: 50px; } li>ul { display: none; position: absolute; left: 100%; top: 0; background-color: azure; } li:hover { background-color: cadetblue; } li:hover ul { display: block; } a { text-decoration: none; color: black; display: block; text-align: center; font-size: 20px; } #conten_div { /* position: absolute; */ width: 78%; height: 800px; float: left; } iframe { width: 100%; height: 100%; } </style> </head> <body> <div> <div id="nav_bar"> <ul> <li><a href="#">系统管理</a> <ul> <li><a target="content" href="user_info.html">用户管理</a></li> <li><a target="content" href="#">权限管理</a></li> <li><a target="content" href="#">角色管理</a></li> </ul> </li> <li><a href="#">库存管理</a> <ul> <li><a target="content" href="#">库存信息</a></li> <li><a target="content" href="#">入库管理</a></li> <li><a target="content" href="#">出库管理</a></li> </ul> </li> <li><a href="#">客户管理</a> <ul> <li><a target="content" href="#">客户信息</a></li> <li><a target="content" href="#">拜访客户</a></li> <li><a target="content" href="#">成交信息</a></li> </ul> </li> </ul> </div> <div id="conten_div"> <iframe name="content" src="blank.html" frameborder="0"></iframe> </div> </div> </body> </html>点击导航：div+a实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击菜单练习</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; } #mid_div { height: 100%; width: 100%; border: 1px solid red; background-color: #555; } #nav_bar { width: 20%; height: 100%; float: left; } .menu { color: #fff; cursor: pointer; font-size: 20px; text-align: center; } .heightlight { color: #fff; background-color: green; } .menu a { background: #888; float: left; width: 100%; display: none; } #content { width: 79%; height: 100%; float: left; background-color: #fff; } iframe { width: 100%; height: 100%; } </style> </head> <body> <div id="mid_div"> <div id="nav_bar"> <div class="menu"> <span>菜单一</span> <a href="#">菜单一.1</a> <a href="#">菜单一.2</a> <a href="#">菜单一.3</a> </div> <div class="menu"> <span>菜单二</span> <a href="#">菜单二.1</a> <a href="#">菜单二.2</a> <a href="#">菜单二.3</a> </div> <div class="menu"> <span>菜单三</span> <a href="#">菜单三.1</a> <a href="#">菜单三.2</a> <a href="#">菜单三.3</a> </div> </div> <div id="content"> <iframe src="blank.html" frameborder="0"></iframe> </div> </div> </body> <script> $(document).ready(function(){ $('.menu').click(function(){ if($(this).hasClass('heightlight')){ $(this).removeClass('heightlight').children('a').hide(); }else{ $(this).addClass('heightlight').children('a').show().end() .siblings().removeClass('heightlight').children('a').hide(); } }) }) </script> </html>点击导航：table实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜单</title> <!-- CSS --> <style type="text/css"> body{ background-color: #f2f2f3; text-align: center; } tr{ text-align: center; } table{ border-top:1px solid; border-bottom:1px solid; border-bottom-color: #c3daee; border-top-color: #c3daee; } .table{ margin-left:40px; border-left:1px solid; border-right:1px solid; border-left-color: #c3daee; border-right-color: #c3daee; } /*一级标题*/ .one{ height: 30px; width: 135px; background-color: #e4e6e7; color: #ff8b1a; cursor: pointer;/*小手*/ } /*二级标题*/ .two tr{ background-color: #f2f2f3; color: #000; } .two a{ /*margin-left: 50px;*/ /*float: right;*/ text-decoration: none; color: #000; } .two td{ height: 25px; width: 135px; } </style> </head> <body onload="init()"> <table cellspacing="0" cellpadding="0" class="table"> <tbody> <tr onclick = "f('sub_menu_1')"> <td class="one">个人中心</td> </tr> <tr> <td class="two"> <table id="sub_menu_1"> <tbody> <tr><td><a href="modify_password.html" target="main">修改密码</a></td></tr> <tr><td><a href="my_information.html" target="main">我的资料</a></td></tr> </tbody> </table> </td> </tr> <tr height="1px"></tr> <tr onclick = "f('sub_menu_2')"> <td class="one">考试成绩</td> </tr> <tr> <td class="two"> <table id="sub_menu_2" > <tbody> <tr><td><a href="" target="main">大一学年</a></td></tr> <tr><td><a href="" target="main">大二学年</a></td></tr> <tr><td><a href="" target="main">大三学年</a></td></tr> <tr><td><a href="" target="main">大四学年</a></td></tr> </tbody> </table> </td> </tr> <tr height="1px"></tr> <tr onclick = "f('sub_menu_3')"> <td class="one">平时成绩</td> </tr> <tr> <td class="two"> <table id="sub_menu_3" > <tbody> <tr><td><a href="" target="main">宿舍</a></td></tr> <tr><td><a href="" target="main">考勤</a></td></tr> <tr><td><a href="" target="main">作业</a></td></tr> </tbody> </table> </td> </tr> <tr height="1px"></tr> <tr onclick = "f('sub_menu_4')"> <td class="one">奖项</td> </tr> <tr> <td class="two"> <table id="sub_menu_4" > <tbody> <tr><td><a href="" target="main">材料上传</a></td></tr> <tr><td><a href="" target="main">备注</a></td></tr> </tbody> </table> </td> </tr> <tr height="1px"></tr> <tr onclick = "f('sub_menu_5')"> <td class="one">处分</td> </tr> <tr> <td class="two"> <table id="sub_menu_5" > <tbody> <tr><td><a href="" target="main">处分</a></td></tr> </tbody> </table> </td> </tr> </tbody> </table> </body> <!-- JS --> <script language="javascript"> function init() {//先隐藏二级菜单 document.getElementById("sub_menu_1").hidden=true; document.getElementById("sub_menu_2").hidden=true; document.getElementById("sub_menu_3").hidden=true; document.getElementById("sub_menu_4").hidden=true; document.getElementById("sub_menu_5").hidden=true; } function f(str) {//点击展开折叠效果 var sub_menu = document.getElementById(str); var dis_v = sub_menu.style.display; if(dis_v == "block") sub_menu.style.display = "none"; else sub_menu.style.display = "block"; } </script> </html>