This article introduces a framework that is so simple that it cannot be simpler.
Let’s first look at the page composition of this framework. Since it is a purely manual test program, I just made some code in Notepa++, which is very sketchy. But it still contains the general content in the Frameset. OK, let’s get back to the point, first look at the composition of the file.
1.Frame.html contains the structure of the framework
2.link.html contains the menu bar on the left side of the frame
3.firstPage.html contains a line of text on the main page of the framework (I am lazy and I didn't do it well)
4.secondPage.html is similar to the above 3 and is used for testing.
Below is a screenshot (not clear, I'm doing this for the first time)
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 very simple? It mainly consists of a Frameset element, and then the attribute cols=159px,* is set. The purpose of this property is to divide the page into 159px and two other areas. As shown in the picture above.
Then there is the frame tag. The cols attribute above has several values. The <frame> child elements below should also have several corresponding values. Then there are some common attributes of <frame>. Including the width of the border, whether scroll bars appear, border color, and whether the user is allowed to change the size. Which source file is, etc.
Then the second source file points to firstPage as the test.
Next is link.html:
<style type=text/css>
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, serif, serif;
font-size:12px;
}
#nav {
width:180px;
line-height: 24px;
list-style-type: none;
text-align:left;
/*Define the line height and background color of the entire ul menu*/
}
/*=======================================================*/
#nav a {
width: 160px;
display: block;
padding-left:20px;
/*Width(must), otherwise the Li below will deform*/
}
#nav li {
background:#CCC; /*Background color of first-level directory*/
border-bottom:#FFF 1px solid; /*A white edge below*/
float:left;
/*float: left, should not be set, but it cannot be displayed normally in Firefox.
Inheriting the width of Nav, limiting the width, li automatically extends downward*/
}
#nav li a:hover{
background:#CC0000; /*The background color displayed by first-level directory onMouseOver*/
}
#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;
}
/*==========================================================*/
#nav li ul {
list-style:none;
text-align:left;
}
#nav li ul li{
background: #EBEBEB; /*Background color of secondary directory*/
}
#nav li ul a{
padding-left:10px;
width:160px;
/* padding-left secondary directory Chinese characters move to the right, but 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;
/* Font color and background color of secondary onmouseover*/
}
/*============================================*/
#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=#>Pay</a></li>
<li><a href=#>Management</a></li>
<li><a href=#>Online payment</a></li>
<li><a href=#>Register 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(); //* Please pay attention to the order of these two functions, otherwise GetMenuID() will not have any effect in Firefox
menuFix();
-->
</script>
This is actually lazy. It is a drop-down menu made by DIV+CSS+JS found on the Internet. If you are interested, you can take a look at it yourself. I feel that I can use it myself and it will be OK to know how to modify it.
Here are two test pages. Since even those who know a little bit of HTML can write them out, only the code for page 1 is posted here:
<html>
<head>
<title>First Page</title>
<style>
</style>
</head>
<body>
<h1>First Page</h1>
</body>
</html>
I guess the master will vomit when he sees this, and he must have said it is very trash, but he just records the little things he made. Haha, forgive me.