左侧导航栏右侧内容

已于 2022-09-27 10:05:47 修改
阅读量4.2k 收藏 97
点赞数 6
文章标签： html5 css3
于 2022-07-13 14:20:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53715817/article/details/125761970
版权
这篇博客记录了一位前端初学者在创建静态页面时遇到的挑战，强调了布局的重要性。文章中展示了带有三级菜单的导航栏设计，以及通过iframe实现页面跳转的功能。内容包括表格的布局，每个表格包含多个标题和数据，可点击跳转到不同的内容页面。同时，还提供了部分CSS样式以完善页面显示效果。
摘要由CSDN通过智能技术生成

嘿嘿嘿，前端小白来画静态界面

画这个界面期间其实遇到的问题还挺多，真让人抓耳挠腮的。

真的，大家一定要注意布局！！！注意布局！！！

这个图是整体静态页面

 点击跳转其他页面

这段代码主要是整体页面的布局代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="left-header">
            <div class="img"><img class="img-logo" src="javaenginer/img/logo.png" alt=""></div>
            <div class="title">
                <h2>左侧导航栏右侧内容区域</h2>
            </div>
        </div>
    </div>
    <!-- 主体 -->
    <div class="container">
        <!-- 左侧导航 -->
        <div class="left_daohang">
            <div class="menu">
                <i class="fa fa-bars"></i>
                <span class="menu-title" aria-hidden="true">一级菜单</span>
                <ul class="menu-content">
                    <li class="two">二级菜单</li>
                    <ul class="menu-content-third">
                        <li src="1.html">三级菜单</li>
                        <li src="2.html">三级菜单</li>
                        <li src="3.html">三级菜单</li>
                    </ul>
                </ul>
            </div>
            <div class="menu">
                <i class="fa fa-bars"></i>
                <span class="menu-title" aria-hidden="true">一级菜单</span>
                <ul class="menu-content">
                    <li class="two">二级菜单</li>
                    <ul class="menu-content-third">
                        <li src="1.html">三级菜单</li>
                        <li src="2.html">三级菜单</li>
                        <li src="3.html">三级菜单</li>
                    </ul>
                </ul>
            </div>
            <div class="menu">
                <i class="fa fa-bars"></i>
                <span class="menu-title" aria-hidden="true">一级菜单</span>
                <ul class="menu-content">
                    <li class="two">二级菜单</li>
                    <ul class="menu-content-third">
                        <li src="1.html">三级菜单</li>
                        <li src="2.html">三级菜单</li>
                        <li src="3.html">三级菜单</li>
                    </ul>
                </ul>
            </div>
        </div>
        <!-- 右侧内容 -->
        <div class="right_content">
            <iframe name="mainFrame" id="mainFrame" frameborder=" 0 " style="width:90%;height:100% " src="1.html "></iframe>
        </div>
    </div>
    <!-- iframe跳转 -->
    <script type="text/javascript ">
        let menus = document.querySelectorAll('.menu-content-third')
        let lis = document.querySelectorAll('.menu-content-third li')
        let iframe = document.querySelector('iframe')
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                for (let j = 0; j < lis.length; j++) {
                    lis[j].removeAttribute('class', 'dot')
                }
                iframe.setAttribute('src', lis[i].getAttribute('src'))
                this.setAttribute('class', 'dot')
            }
        }
    </script>
    <!-- 导航栏 -->
    <script>
        $(function() {
            //第一步，隐藏子菜单项//找到每一个菜单项，用each循环    
            $(".menu ").each(function() {
                $(this).children(".menu-content ").hide();
            });
            //给所有的主标题添加点击事件    
            $(".menu-title ").each(function() {
                $(this).click(function() {
                    //弹出当前主标题下的子标题列表          
                    var mList = $(this).parents(".menu ").children(".menu-content ");
                    //展开、收起导航栏        
                    mList.slideToggle();
                });
            });
            //找到二级标签，给他注册点击事件，收展它下面的三级标题组  
            $(".two ").click(function() {
                $(".two ").next().slideToggle();
            });
        })
    </script>
</body>

</html>

 1.html包含table表单

<body>
    <div class="content con1">
        <div class="table">
            <table id="tab_table" cellpadding="0" cellspacing="0">
                <caption>
                    <h3>标题1</h3>
                </caption>
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">文档.docx</a></td>
                        <td>qq</td>
                        <td>qq</td>
                        <td>qq</td>
                    </tr>
                    <tr>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="table">
            <table id="tab_table" cellpadding="0" cellspacing="0">
                <caption>
                    <h3>标题2</h3>
                </caption>
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">文档.docx</a></td>
                        <td>qq</td>
                        <td>qq</td>
                        <td>qq</td>
                    </tr>
                    <tr>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="table">
            <table id="tab_table" cellpadding="0" cellspacing="0">
                <caption>
                    <h3>标题3</h3>
                </caption>
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">文档.docx</a></td>
                        <td>qq</td>
                        <td>qq</td>
                        <td>qq</td>
                    </tr>
                    <tr>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="table">
            <table id="tab_table" cellpadding="0" cellspacing="0">
                <caption>
                    <h3>标题</h3>
                </caption>
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">文档.docx</a></td>
                        <td>qq</td>
                        <td>qq</td>
                        <td>qq</td>
                    </tr>
                    <tr>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

可以随便写内容的2.html页面


<div class="content con2">
22222222222222222222222222222222
</div>

可以随便写内容的3.html页面


<div class="content con3">
3333333333333333333333333333333333333
</div>

代码可以直接使用。

附上css样式，嘿嘿嘿

* {
    margin: 0;
    padding: 0;
}

body {
    max-width: 1920px;
    min-width: 1024px;
    box-sizing: border-box;
}


/* 头部 */

.header {
    height: 3rem;
    background-color: #053796;
    color: #fff;
    display: flex;
    justify-content: space-between;
}

.left-header {
    font-size: 1.2rem;
    line-height: 3rem;
    display: flex;
    justify-content: space-between;
}

.img {
    margin: .5rem;
    height: auto;
    width: auto\9;
    /* width:90%;
    text-align: center;
    padding:  0 0.2rem ; */
}

.title h2 {
    font-size: 1.5rem;
}

.right-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.item {
    width: 4rem;
    height: 2rem;
    font-size: 1rem;
    line-height: 2rem;
    text-align: center;
}


/* index页面容器 */

.container {
    height: 93vh;
    width: 100%;
    display: flex;
    flex-direction: colum;
    overflow-y: auto;
}

.left_daohang {
    /* 定位 */
    position: fixed;
    top: 3rem;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 95vh;
    min-width: 200px;
    /* 设置最小宽度防止文字被压缩 */
    background-color: #ececec;
    overflow-x: scroll;
}

.menu {
    width: 100%;
    margin-left: 1rem;
    margin-top: 1rem;
    overflow: hidden;
}

i {
    color: #053796;
}

.menu-img {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    margin: auto 1rem;
}

.menu-title {
    height: 1.5rem;
    cursor: pointer;
    font-size: 1.25rem;
    color: #000;
    overflow: hidden;
    border-bottom: 1px #000;
}

.content-content {
    display: block;
    font-size: .875rem;
}

ul {
    width: 100%;
}

.menu-content li {
    margin: 1rem auto;
    margin-left: 2.5rem;
    text-align: left;
    list-style: none;
}

li:hover {
    text-decoration: none;
    color: #00aae3;
    cursor: pointer;
}

.menu-content-third .java li:hover {
    color: #00aae3;
    cursor: pointer;
}

.menu-content-third {
    margin-left: 3.5rem;
    font-size: .875rem;
}


/* iframe跳转内容 */

.right_content {
    width: 90%;
    position: fixed;
    top: 3rem;
    bottom: 0;
    left: 10%;
    /* 隐藏 */
    overflow-y: auto;
    overflow-x: hidden;
}


/* 跳转子页面样式 */

.content {
    width: 100%;
    position: fixed;
    top: 3rem;
    bottom: 0;
    left: 15%;
    overflow-y: auto;
    overflow-x: hidden;
}

.con2 {
    background-color: aquamarine;
}

.con3 {
    background-color: #419aff;
}

a {
    text-decoration: none;
}

table {
    margin: 1rem 0 1rem;
    font-size: 1rem;
    line-height: 2rem;
    text-align: center;
    width: 100%;
}

caption {
    margin: 1rem 0 1rem;
    text-align: left;
    font-size: 1.5rem;
    line-height: 2rem;
}

.table {
    width: 80%;
    border-bottom: 3px solid #000;
}

th,
td {
    height: 3rem;
    border-collapse: collapse;
    border: 1px solid rgb(79, 242, 3);
}

table thead th:nth-child(),
tbody td:nth-child() {
    width: 20%;
}

thead>tr>th {
    padding: 1px;
    color: #419aff;
    font-weight: normal;
}

田子²
关注
ifame实现左侧导航栏右侧内容
lu_andd的博客
03-31 4582
1.在jsp文件的中加入： html,body{margin:0px; height:100%;} 才能使页面中的设置height：100%起作用。100%是根据其父布局来确定的，所以必须确定父布局的高度。 而width：100%则可自动布满整个页面。 2.     用户管理    角色管理   权限管理         float:l
左侧菜单栏控制右侧页面内容切换
01-18
本demo所需技术：jQuery+Bootstrap 本demo所用工具：IDEA 本demo主要实现功能： 1. 左侧菜单栏切换右侧页面内容 2. boostrap弹框内容的显示
html左侧导航栏右侧显示内容
热门推荐
无心
08-02 2万+
效果图 代码 复制下来直接运行就可以 <!doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.
发现经典布局新魅力：原生HTML+JS打造左侧导航栏右侧内容页
最新发布
gitblog_09750的博客
09-05 578
发现经典布局新魅力：原生HTML+JS打造左侧导航栏右侧内容页 menu-demo.rar项目地址:https://gitcode.com/open-source-toolkit/4b6a8 在当今前端世界，虽然各式各样的框架如Vue、React和Angular大行其道，但回归根本，掌握原生HTML、CSS和JavaScript依然是每位开发者的基本功。今天，我们为您推荐一款开源项目——左侧导航...
记录原生html+js实现左侧导航栏右侧内容页
weixin_53715817的博客
10-17 5603
html+css+javascript+echarts设计的demo，快来学习吧
左栏导航 右栏内容显示
runner_123的博客
04-14 6752
一、 核心iframe方法一：改变元素显示、隐藏状态&lt;div style="width: 20%; float: left"&gt; &lt;div id="butten" style="cursor: pointer;"&gt; 左栏导航一 &lt;/div&gt; &lt;div id="hidden" &gt;
网页左侧导航栏点击怎么显示右侧内容_技巧 | 10个Tips优化导航栏，马上提升站内转化率...
weixin_39904522的博客
12-05 1150
“人们只会购买他们能找到的东西。”导航栏是顾客浏览独立站时看到的第一个东西，他们通过导航栏来寻找目标商品。清晰明确的导航栏可以提升独立站界面的易用性，减少购买中断、促进下单量和提升站内转化率~那么，你的商品好找到吗？如何优化？店小匠为你分享几点关于导航栏的建议及案例，助你优化独立站消费体验、提升下单量。一、10个优化导航栏技巧：1使用广泛熟知的图标图标代替了文本、视觉符号取代了逻辑识别，让大脑在更...
记录原生html+js实现左侧导航栏右侧内容页的实现
10-17
左侧导航栏右侧内容页 /* CSS样式略 */ <!-- 导航栏内容 --> <!-- 内容页内容 --> // JavaScript代码略 ``` 在`<style>`标签内，我们需要编写CSS（Cascading Style Sheets）来设置...
左侧导航栏右侧内容切换
05-24
左侧导航栏右侧内容切换是一种常见的网页设计布局，通常会在网站的主页或者其他重要页面中使用。 这种布局的主要作用是方便用户快速地浏览和查看网站的不同部分或者功能。用户可以通过点击左侧导航栏中的不同选项，...
mpvue实现左侧导航与右侧内容的联动
12-30
本文实例为大家分享了mpvue左侧导航与右侧内容联动的具体代码，供大家参考，具体内容如下 效果图如下： （1）左侧导航联动右侧内容 实现：点击左侧导航，右侧内容滑到对应的位置，并且导航上有current当前样式。 ...
左侧导航右侧显示内容 php,html – 侧栏导航和右侧显示内容
weixin_42310670的博客
03-19 544
为标签略微调整标记,并将标识更改为类以进行样式设置：City GalleryLondonParisLondonLondon is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitant...
vue.js实现左边导航切换右边内容
10-16
主要为大家详细介绍了vue.js实现左边导航切换右边内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html左侧导航右侧内容,HTML5+CSS：左边导航栏，右边是对应的文本区域
weixin_35861708的博客
05-30 4789
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">test#left,#right{float:left;color:#FF33CC;}#right{padding:10px;margin-top:40px;}body{f...
网页左侧导航栏点击怎么显示右侧内容_UI设计优秀可临摹素材|网页设计头部技巧...
weixin_39857513的博客
12-04 449
头部内容设计的一些技巧。1. 关于尺寸对于网页头部图片的大小是没有统一的答案。有时候设计师希望提供相对固定的数字，但网页设计最大的难点之一是很难确保每个屏幕尺寸的有效性。即使两个屏幕的尺寸相同，分辨率也可能不同，因此用户看到的内容也不一定完全一样。因此，我们不要拘泥于精确的像素概念，最好遵循经验积累的常识规则。举几个可以临摹的例子，看看优秀作品是如何操作的，更多网页设计 到搜UI(SOOUI) w...
如何做一个左侧导航栏右侧显示具体消息的html
weijunbaoshuai的博客
07-29 1万+
如果你想做一个这样的东西，左侧分类，比如有分类1，下面的子标题1.1,1.2，1.3等等，然后分类2，下面有相应的子标题。点击不同的子标题右边就会出现相应的界面。我在网上查了查别人怎么做的，然后结合了自己的一些想法，做出来现在的这个东西。 jsp： <div style="height: 400px;"> <div class="title">...
左边导航栏 右边内容 用js javascript 实现
nash01的专栏
05-23 2440
js代码 ------------------------------------------------------------------------------------------ 说明：当执行showContent时，在id为right_content的ifame框架中显示该url所指向的html或者jsp文件 [code="java"] function showCo...
网页左侧导航栏点击怎么显示右侧内容_一篇教程搞懂网页设计
weixin_39955938的博客
11-02 2143
研习设订阅号设计干货 杜绝注水戳一下看视频版我们每天都会浏览大量网页。现在，让我们回想一下，你印象最深的网页。在你浏览它们的时候，是不是只看到了网页中想要查找的信息呢。这是因为，每一个网页设计师的首要任务，就是要把信息有效的传达出来。那是不是说，网页只需要有信息传达的功能，就足够了呢？显然，回答是否定的。那么接下来，我们就来看一下到底什么是网页设计呢？乔布斯说：“设计，看中的不是感觉...
左侧导航栏固定，点击进行路由跳转右侧部分显示不同内容
weixin_45096939的博客
01-19 2379
路由跳转的方法：this.$router.push(' 定义的路由名 ')；表示路由占位，在路由占位的时候可以把路由写活。在router中定义路由名称时可以用children定义子级路由；头部和左侧的导航栏不动，点击左侧导航栏中的按钮右侧的内容发生变化。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值