导航页面练习

tryCbest

已于 2023-12-12 11:43:43 修改

阅读量43

点赞数

分类专栏：前端文章标签：前端

于 2023-10-19 09:41:46 首次发布

本文链接：https://blog.csdn.net/weixin_45146962/article/details/133919826

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

悬浮导航：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>