HTML Frameset Example Code

HTML Frameset Example Code

This article introduces a framework made by Frameset that is as simple as it can be.

Well, let's first take a look at the page structure of this framework. Since it is a purely manual test program, I just made some code in Notepa++, which is very rough. But it still contains the general content of Frameset. Okay, let’s get back to the topic and first take a look at the file structure.

1.Frame.html contains the structure of the frame

2.link.html contains the menu bar on the left side of the frame

3.firstPage.html contains a line of text for the main page of the framework (I am lazy and didn’t do it well)

4.secondPage.html is similar to 3 above and is used for testing.

Here is a screenshot (not clear, first time doing this)

Let's take a look at the code in Frame.htm:

<html>
<head>
</head>
<frameset cols="159px,*">
<frame name="a1" src="link.html" noresize="yes" border="1px" scrolling="auto" bordercolor="blue" >
<frame name="a2" src="firstPage.html">
</frameset>
</html>

Doesn’t it feel simple? It is mainly a Frameset element, and then the attribute cols="159px,*" is set. The purpose of this attribute is to divide the page into 159px and other two areas. As shown in the picture above.

Then comes the frame tag. The cols attribute above has several values, and the <frame> child elements below should have the same number of values. Then there are some common attributes of <frame>. Including the width of the border, whether a scroll bar appears, the border color, and whether the user is allowed to change the size. Which source file is it and so on.

Then the second source file points to firstPage for testing.

Next is link.html:

<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
width:180px;
line-height: 24px;
list-style-type: none;
text-align:left;
/*Define the row height and background color of the entire ul menu*/
}
/*==================First level directory===================*/
#nav a {
width: 160px;
display: block;
padding-left:20px;
/*Width (must be), otherwise the Li below will be deformed*/
}
#nav li {
background:#CCC; /*Background color of the first-level directory*/
border-bottom:#FFF 1px solid; /*white border at the bottom*/
float:left;
/*float: left, should not be set, but cannot be displayed normally in Firefox
Inherit the width of Nav, limit the width, and li automatically extends downwards*/
}
#nav li a:hover{
background:#CC0000; /*Background color displayed onMouseOver of the first-level directory*/
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
/*==================Secondary Directory===================*/
#nav li ul {
list-style:none;
text-align:left;
}
#nav li ul li {
background: #EBEBEB; /*Background color of the secondary directory*/
}
#nav li ul a{
padding-left:10px;
width:160px;
/* The text in the padding-left secondary directory moves to the right, but the Width must be reset = (total width - padding-left)*/
}
/*The following is the link style of the secondary directory*/
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;
text-decoration:none;
font-weight:normal;
background:#CC0000;
/* Secondary onmouseover font color, background color*/
}
/*===============================*/
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
#nav ul.collapsed {
display: none;
}
-->
#PARENT{
width:180px;
}
*#PARENT{
width:100%;
}
</style>
<div id="PARENT">
<ul id="nav">
<li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">My Website</a>
<ul id="ChildMenu1" class="collapsed">
<li><a href="firstPage.html" target="a2">First page</a></li>
<li><a href="secondPage.html" target="a2">Second page</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">My Account</a>
<ul id="ChildMenu2" class="collapsed">
<a href="#">Payment</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Online Payment</a></li>
<li><a href="#">Register for remittance</a></li>
<li><a href="#">Online Found</a></li>
<li><a href="#">Historical Accounts</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">Website Management</a>
<ul id="ChildMenu3" class="collapsed">
<li><a href="#">Login</a></li>
<a href="#">Role Management</a></li>
<li><a href="#">User Management</a></li>
</ul>
</li>
</ul>
</div>
<script type=text/javascript>
<!--
var LastLeftID = "";
function menuFix() {
var obj = document.getElementById("nav").getElementsByTagName("li");

for (var i=0; i<obj.length; i++) {
obj[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
function DoMenu(emid)
{
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
if((LastLeftID!="")&&(emid!=LastLeftID)) //Close the previous Menu
{
document.getElementById(LastLeftID).className = "collapsed";
}
LastLeftID = emid;
}
function GetMenuID()
{
var MenuID="";
var _paramStr = new String(window.location.href);
var _sharpPos = _paramStr.indexOf("#");

if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
{
_paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
}
else
{
_paramStr = "";
}

if (_paramStr.length > 0)
{
var _paramArr = _paramStr.split("&");
if (_paramArr.length>0)
{
var _paramKeyVal = _paramArr[0].split("=");
if (_paramKeyVal.length>0)
{
MenuID = _paramKeyVal[1];
}
}
}

if(MenuID!="")
{
DoMenu(MenuID)
}
}
GetMenuID(); //*Pay attention to the order of these two functions, otherwise GetMenuID() will not work in Firefox
menuFix();
-->
</script>

This is actually just a lazy idea. I made a drop-down menu using DIV+CSS+JS found on the Internet. If you are interested, you can take a look at it yourself. I feel like I can use it and it will be OK as long as I know how to modify it.

Below are two test pages. Since anyone who knows a little HTML can write a test page, I will only post the code for page 1 here:

<html>
<head>
<title>First page</title>
<style>
</style>
</head>
<body>
<h1>First page</h1>
</body>
</html>

I guess all the experts would puke when seeing this and would say it's rubbish, but it's just a record of the little things I made. Haha, I'm sorry.

<<:  Solution to the docker command exception "permission denied"

>>:  Analyze the usage and principles of Vue's provide and inject

Recommend

WeChat applet implements simple chat room

This article shares the specific code of the WeCh...

How to find and delete duplicate records in MySQL

Hello everyone, I am Tony, a teacher who only tal...

Detailed example of using CSS to beautify HTML form controls (form beautification)

1. Basic syntax structure of HTML submit and bott...

Why MySQL does not recommend using subqueries and joins

To do a paginated query: 1. For MySQL, it is not ...

js canvas realizes random particle effects

This article example shares the specific code of ...

MySQL 8.0.20 installation and configuration tutorial under Win10

MySQL 8.0.20 installation and configuration super...

Vue implements simple calculator function

This article example shares the specific code of ...

CSS3 sets a mask for the background image and solves the problem of mask style inheritance

In many cases, you need to process the background...

Several methods to execute sql files under mysql command line

Table of contents The first method: When the MySQ...

Summary of MySQL foreign key constraints and table relationships

Table of contents Foreign Key How to determine ta...

Implementation of HTML sliding floating ball menu effect

CSS Styles html,body{ width: 100%; height: 100%; ...

js to achieve the pop-up effect

This article example shares the specific code of ...

MySQL date functions and date conversion and formatting functions

MySQL is a free relational database with a huge u...

Detailed explanation of homology and cross-domain required for front-end interviews

Preface As we all know, the browser's homolog...

React nested component construction order

Table of contents In the React official website, ...