Effect of a simple css
<html>
<head>
<title> New document </ title>
<link Type="text/css" rel="stylesheet" href="style.css" />
<script Type="text/javascript">
Function ShowTree (obj)
(
WhichEl = eval (obj);
If (whichEl.style.display == "none")
(
Var div = document.getElementsByTagName ( "div");
For (i = 0; i <div.length; i + +)
(
If (div [i]. ClassName == whichEl.className)
(
Div [i]. Style.display = "none";
)
)
Eval (obj +. "Style.display = \" \ ";");
)
Else
(
Eval (obj +. "Style.display = \" none \ ";");
)
)
Function ShowMain (obj1, obj2)
(
WhichEl = eval (obj1);
If (whichEl.style.display == "")
(
Eval (obj1 +. "Style.display = \" none \ ";");
Eval (obj2 +. "Style.display = \" \ ";");
)
Else
(
Eval (obj1 +. "Style.display = \" \ ";");
Eval (obj2 +. "Style.display = \" none \ ";");
)
)
</ Script>
</ Head>
<body>
<div Id="f1" class="frame_style" style="display:;">
<div Class="main_style">
<div Id="div1" class="title_style" onclick="ShowTree('data1')"> test </ div>
<div Id="data1" class="data_style" style="display:none;">
<ul>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
</ Ul>
</ Div>
<div Id="div2" class="title_style" onclick="ShowTree('data2')"> test </ div>
<div Id="data2" class="data_style" style="display:none;">
<ul>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
</ Ul>
</ Div>
</ Div>
</ Div>
<div Class="space_style"> <div onclick="ShowMain('f1','f2')"> </ div> </ div>
<div Id="f2" class="frame_style" style="display:none;">
<div Class="main_style">
<div Id="div3" class="title_style" onclick="ShowTree('data3')"> test2 </ div>
<div Id="data3" class="data_style" style="display:none;">
<ul>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
</ Ul>
</ Div>
<div Id="div4" class="title_style" onclick="ShowTree('data4')"> test2 </ div>
<div Id="data4" class="data_style" style="display:none;">
<ul>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
</ Ul>
</ Div>
</ Div>
</ Div>
<div Class="space_style"> <div onclick="ShowMain('f2','f3')"> </ div> </ div>
<div Id="f3" class="frame_style" style="display:none;">
<div Class="main_style">
<div Id="div5" class="title_style" onclick="ShowTree('data5')"> test3 </ div>
<div Id="data5" class="data_style" style="display:none;">
<ul>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
</ Ul>
</ Div>
<div Id="div6" class="title_style" onclick="ShowTree('data6')"> test3 </ div>
<div Id="data6" class="data_style" style="display:none;">
<ul>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
<li> Asdf </ li>
</ Ul>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
Style.css
A, input (
Behavior: url ( 'blur.htc');
)
Body
(
Margin: 10px;
)
Body, td, th, p, span, div, li (
Font-size: 12px;
Line-height: 150%;
Font-family: "10 lines," Arial;
)
Input (
Border-top-color: # CCCCCC;
Border-left-color: # CCCCCC;
Border-right-color: # 999999;
Border-bottom-color: # 999999;
Border-width: 1px;
Border-style: solid;
Background-color: # FFFFFF;
Font-size: 12px;
Padding-top: 1px;
Float: right;
)
. Frame_style (
Float: left;
)
. Main_style (
Float: left;
Width: 300px;
Height: 350px;
Overflow: hidden;
)
. Title_style (
Cursor: hand;
Padding: 4px;
Padding-left: 16px;
Margin-bottom: 4px;
Border-color: # E1E1E1;
Border-style: solid;
Border-width: 1px;
Width: 300px;
Background-color: # FAFAFA;
)
. Data_style (
Border-color: # F1F1F1;
Border-style: solid;
Border-width: 1px;
Width: 300px;
Background-color: FAFAFA;
)
. Data_style ul (
List-style-type: none;
Margin: 0px;
Padding: 10px;
)
. Space_style (
Margin: 4px;
Border-color: # F1F1F1;
Border-style: solid;
Border-width: 1px;
Width: 6px;
Height: 340px;
Background-color: # FAFAFA;
Float: left;
)
. Space_style div (
Cursor: hand;
Background-color: # CCCCCC;
Width: 100%;
Height: 20px;
Margin-top: 160px;
)
Tags: CSS DIV, CSS effect, css layout, css manuals, css templates, div css
Leave a Reply