PJBlog3 - 技术

Div+Css+Js菜单

lioil77{@}gmail.com(lioil) — Thu,08 Jan 2009 18:16:22 +0800

HTML代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单</title>
<style>
body{
background-color:#B8B8A0;
}
#fbtn{
display:none;
overflow:hidden;
border-style:solid;
border-width:1px;
border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
padding:1 1 1 1;
width:115px;
height:30px;
}
#fbtn_txt{
position:relative;
}
#fbtn_txt div{
height:30px;
padding-top:11px;
font-size:12px;
color:#800080;
text-align:center;
cursor:hand;
}
#fbtn_mask{
background-color:#ffffff;
position:relative;
width:100%;
height:100%;
}
</style>

</head>

<body>

<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>

<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>

<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M1</div>
<div>my name is fireyy</div>
</div>
</div>

<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>

<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>

<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M1</div>
<div>my name is fireyy</div>
</div>
</div>

for(var i=0;i<fbtn.length;i++){
fbtn_txt[i].style.posTop=-30;
fbtn_mask[i].style.posTop=-30;
fbtn[i].index=i;
fbtn[i].style.display="block";

fbtn[i].onmouseover=function(){
if(!current){
current=this;
domove(this.index);
}
else 
if(current!=this){
domove(current.index);
domove(this.index);
current=this;
}
}

fbtn[i].onmouseout=function(){
if(event.toElement==this.parentElement&t==this){
domove(this.index);
current=null;
}
}
}

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

.menu {
font-family: arial, sans-serif; 
width:750px; 
margin:0; 
margin:50px 0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left; 
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block; 
text-align:center; 
text-decoration:none; 
width:104px; 
height:30px; 
color:#000; 
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7; 
line-height:30px; 
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff; 
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block; 
position:absolute; 
top:31px; 
left:0; 
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block; 
background:#faeec7; 
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#dfc184; 
color:#000;
}

</style>
<!--[if lte IE 6]>

/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0; 
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff; 
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
display:block; 
position:absolute; 
top:32px; 
left:0; 
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
background:#faeec7; 
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#dfc184; 
color:#000;
}

</style>

<![endif]-->
</head>

<body>

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<ul>
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
    <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
    <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
    <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
    <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
    </ul>

</li>

<li><a class="hide" href="index.html">MENUS</a>

<ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>
    </ul>

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<ul>
    <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
    </ul>

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<ul>
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
    <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
    <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
    </ul>

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<ul>
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
    </ul>

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<ul>
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
    </ul>

</li>
</ul>

<div class="clear"> </div>

</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三级dropdown弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

</style>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

</style>
<![endif]-->
</head>

<body>

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

<ul>
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>

</li>

<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
    <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
    <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
    <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
    </ul>

</li>

<li><a class="hide" href="index.html">MENUS</a>

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<ul class="left">
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>

</li>
    </ul>

</li>
</ul>

</div>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flyout-竖向三级弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}

</style>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}

</style>
<![endif]-->
</head>

<body>
<div class="menu">
 <ul>
 <li><a class="hide" href="../menu/index.html">DEMOS</a>

<ul>
   <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
   <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
   <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
   </ul>

</li>
  <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
  <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
  <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
  <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
  <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
  </ul>

</li>

<li><a class="hide" href="index.html">MENUS</a>

<ul>
  <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
  <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
  <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
  <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
  <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
  <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
  <li><a href="circles.html" title="circular links">circular links</a></li>
  </ul>

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<ul>
  <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
  <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
  <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
  <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
  <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
  </ul>

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<ul>
  <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
  <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
  <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
  <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
  <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
  <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
  <li><a href="circles.html" title="circular links">circular links</a></li>
  </ul>

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<ul>
  <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
  <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
  <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
  <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
  <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
  <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
  <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
  <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
  <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
  </ul>

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<ul>
  <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
  <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
  <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
 </ul>

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<ul>
 <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
 <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
 <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
 <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
 </ul>

</li>
 </ul>

</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropline-水平三级横向弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

</style>
<!--[if lte IE 6]>
<style type="text/css">
table {border-collapse:collapse; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}

.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

</style>
<![endif]-->
</head>

<body>

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>

<ul class="right_side">
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>

</li>

</li>

<li><a class="hide" href="index.html">MENUS</a>

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<ul class="right_side">
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
    </ul>

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<ul class="right_side">
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>

<ul class="left_side">
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>

</li>
    </ul>

</li>
</ul>

</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>upmenu-水平竖弹向上三级弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#000; background:#e9e9c7;}
.menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;}
.menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;}
.menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;}

.menu ul li:hover ul.left {left:-105px;}
.menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;}

</style>
<!--[if lte IE 6]>
<style type="text/css">
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#000; background:#e9e9c7;}
.menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;}
.menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;}
.menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;}

.menu ul li a:hover ul.left {left:-105px;}
.menu ul li a:hover ul li a:hover ul.left {left:-210px;}

</style>
<![endif]-->
</head>

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

</ul>

</li>

<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
    <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
    </ul>

</li>

<li><a class="hide" href="index.html">MENUS</a>

<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>
    </ul>

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

</ul>

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>

</ul>

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>

<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
    <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
    </ul>

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>

</li>

<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
    </ul>

</li>

</ul>

</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

中文字串截取无乱码 [搜]

lioil77{@}gmail.com(lioil) — Sun,07 Sep 2008 11:21:46 +0800

msubstr 函数

复制内容到剪贴板程序代码

substr 用法

复制内容到剪贴板程序代码

$rest = substr("abcdef", 1); // returns "bcdef"
echo 'substr("abcdef", 1) returns ' . $rest . "
";
$rest = substr("abcdef", 1, 3); // returns "bcd"
echo 'substr("abcdef", 1, 3) returns ' . $rest . "
";
$rest = substr("abcdef", -1); // returns "f"
echo 'substr("abcdef", -1) returns ' . $rest . "
";
$rest = substr("abcdef", -2); // returns "ef"
echo 'substr("abcdef", -2) returns ' . $rest . "
";
$rest = substr("abcdef", -3, 1); // returns "d"
echo 'substr("abcdef", -3, 1) returns ' . $rest . "
";
$rest = substr("abcdef", 1, -1); // returns "bcde"
echo 'substr("abcdef", 1, -1) returns ' . $rest . "
";
?>

ord(substr($str,$i,1))>0xa0

处理截取一段汉字的程序，在ASCII中，0xa0表示汉字的开始

另两截取函数

$str = '我是一串比较长的中文-www.ooso.net';

echo "mb_substr:" . mb_substr($str, 0, 6, 'utf-8');

echo "
";

echo "mb_strcut:" . mb_strcut($str, 0, 6, 'utf-8');
?>

输出结果如下：

mb_substr：我是一串比较
mb_strcut：我是

从上面的例子可以看出，mb_substr是按字来切分字符，而mb_strcut是按字节来切分字符，但是都不会产生半个字符的现象

ac 数据库中使用宏替换 BR 成回车符

lioil77{@}gmail.com(lioil) — Mon,11 Aug 2008 18:14:35 +0800

复制内容到剪贴板程序代码

Sub RemoveCRLF()
Dim conn As ADODB.Connection
Dim rs As New ADODB.Recordset
Dim f As ADODB.Field
Dim val As String

Set conn = CurrentProject.Connection
rs.Open "Select 内容 FROM content", conn, adOpenStatic, adLockOptimistic
Do While Not rs.EOF
Set f = rs.Fields.Item("内容")

If Not IsNull(f.Value) Then
val = f.Value
val = Replace(val, "
", vbNewLine)
f.Value = val
End If

rs.MoveNext
Loop
rs.Close

End Sub

简单生成文件夹目录列表的dos命令

lioil77{@}gmail.com(lioil) — Mon,04 Aug 2008 08:07:34 +0800

复制内容到剪贴板程序代码

dir c:\*.* /s > List.Txt

asp 获取文件相关参数

lioil77{@}gmail.com(lioil) — Wed,30 Jul 2008 11:19:57 +0800

复制内容到剪贴板程序代码

  读取一个文件相关信息的范例


  <%
      Dim   objFSO,objFile         '声明一个名称为   objFSO   的变量以存放对象实例
      Set   objFSO   =   Server.CreateObject("Scripting.FileSystemObject")
        If   objFSO.FileExists(Server.MapPath("newfile.asp"))   Then
            Set   objFile   =   objFSO.GetFile(Server.MapPath("newfile.asp"))
            Response.Write   "文件的名称："&objFile.Name&"
"
            Response.Write   "文件的路径："&objFile.Path&"
"
            Response.Write   "文件的建立日期："&objFile.DateCreated&"
"
            Response.Write   "文件的最后浏览日期："&objFile.LastAccessed&"
"
            Response.Write   "文件的最后修改日期："&objFile.LassModified&"
"
            Response.Write   "文件的大小："&objFile.Size&"
"
            Response.Write   "文件的类型："&objFile.Type&"
"
        Else
            Response.Write   Server.MapPath("newfile.asp")&"不存在，无法读取相关信息"
        End   If
      Set   objFile   =   Nothing
      Set   objFSO   =   Nothing             '释放   FileSystemObject   对象实例内存空间
  %>

FCK 返回上传参数

lioil77{@}gmail.com(lioil) — Thu,24 Jul 2008 18:46:21 +0800

以image为例：
fc_image.js 下面的 function ok() 中添加
window.parent.parent.document.myform.DefaultPicUrl.value = GetE('txtUrl').value;

即可将上传图片路径返回至表单的DefaultPicUrl输入框内。

仿GOOGLE搜索提示，无数据库[JavaScript] 转

lioil77{@}gmail.com(lioil) — Thu,12 Jun 2008 00:38:10 +0800

HTML代码

//将初始化的列表转换成数组
function dearray(str)//定义array
{
 arrList = str.split(",");
 intIndex = arrList.length;
}

//初始化下拉列表项
function begin()
{
 init();
 dearray("asp,csdn,asp.net,php,jsp,dvbbs,baidu,92mk,123cha,hao123,google,3721,123456,popasp,alimama,aku,cool");
 downList(arrList,"wd");
}

function init()
{
 if(arrList.constructor!=Array)
 {
  alert("downList初始化失败:第一个参数非数组!");
  return;
 }

arrList.sort( function(a, b)
 {
  if(a.length>b.length)return 1;
  else if(a.length==b.length)return a.localeCompare(b);
  else return -1;
 }); 
}

function downList(arrList,objInputId)
{
 var objouter=document.getElementById("keysList"); //显示的DIV对象
 var objInput = document.getElementById(objInputId); //文本框对象
 var selectedIndex=-1;
 var intTmp; //循环用的
 
 if (objInput==null)
 {
  alert("downList初始化失败:没有找到"+objInputId+"文本框");
  return;
 }
 //文本框失去焦点
 objInput.onblur=function(){
  objouter.style.display="none";
 }
 //文本框按键抬起
 objInput.onkeyup=checkKeyCode;
 //文本框得到焦点
 objInput.onfocus=checkAndShow;

//判断按下的安键
 function checkKeyCode(evt)
 {
  evt = evt || window.event;
  var keyCode = window.event ? evt.keyCode : evt.which;
  //var keyCode = String.fromCharCode(key);
  if (keyCode==40||keyCode==38)
  {//下上
   var isUp=false
   if(keyCode==40) isUp=true;
   chageSelection(isUp);
  }
  else if (keyCode==13)
  {//回车
   outSelection(selectedIndex);
  }
  else
  {
   checkAndShow(evt);
  }
  divPosition(evt);
 }
 
 function checkAndShow(evt)
 {
  var strInput = objInput.value;
  if (strInput!="")
  {
   divPosition(evt);
   selectedIndex=-1;
   objouter.innerHTML ="";
   
   for (intTmp=0;intTmp<arrList.length;intTmp++)
   {
    if (arrList[intTmp].substr(0, strInput.length)==strInput)
    {
     addOption(arrList[intTmp]);
    }
   }
   objouter.style.display="";
  }
  else
  {
   objouter.style.display="none";
  }
 
  //想下拉列表里添加匹配项
  function addOption(value)
  {
   objouter.innerHTML +="<div onmouseover=this.className=\"sman_selectedStyle\";document.getElementById(\""+objInputId+"\").value=\"" + value + "\" onmouseout=this.className=\"\" onmousedown=document.getElementById(\""+objInputId+"\").value=\"" + value + "\">" + value + "</div>" 
  }
 
 }//end checkAndShow()
 
 function chageSelection(isUp)
 {
  if (objouter.style.display=="none")
  {
   objouter.style.display="";
  }
  else
  {
   if (isUp)
    selectedIndex++;
   else
    selectedIndex--;
  }
  
  var maxIndex = objouter.childNodes.length-1;
  if (selectedIndex<0){selectedIndex=0;}
  if (selectedIndex>maxIndex) {selectedIndex=maxIndex;}
  for (intTmp=0;intTmp<=maxIndex;intTmp++)
  {
   if (intTmp==selectedIndex)
   {
    objouter.childNodes[intTmp].className="sman_selectedStyle";
    //当上下键移动时，将选中的文本写到文本框中
    document.getElementById(objInputId).value=objouter.childNodes[intTmp].innerHTML;
   }
   else
   {
    objouter.childNodes[intTmp].className="";
   }
  }
 }
 
 function outSelection(Index)
 {
  objInput.value = objouter.childNodes[Index].innerHTML;
  objouter.style.display="none";
 }
 
 //显示下拉列表项
 function divPosition(evt)
 {
  var e = objInput;
  var ie = (document.all)? true:false
  //定义列表区在不同浏览器中的位置
  if (ie)
  {
   var top = 0;
   var left = -2;
  }
  else
  {
   var top = 2;
   var left = 0;
  }
   
  while (e.offsetParent)
  {
   left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
   top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
   e = e.offsetParent;
  }
  
  left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
  top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
  objouter.style.top = (top + objInput.clientHeight) + "px";
  objouter.style.left = left + "px"; 
  objouter.style.width= objInput.clientWidth+1 + "px";
 }

}//end downList()

function getAbsoluteHeight(ob)
{
 return ob.offsetHeight;
}

function getAbsoluteWidth(ob)
{
 return ob.offsetWidth;
}

function getAbsoluteLeft(ob)
{
 var mendingLeft = ob .offsetLeft;
 while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" )
 {
  mendingLeft += ob .offsetParent.offsetLeft;
  mendingOb = ob.offsetParent;
 }
 return mendingLeft;
}

function getAbsoluteTop(ob)
{
 var mendingTop = ob.offsetTop;
 while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" )
 {
  mendingTop += ob.offsetParent.offsetTop;
  ob = ob.offsetParent;
 }
 return mendingTop;
}

Number.prototype.NaN0 = function()
{
 return isNaN(this)?0:this;
}

//出现光标
document.write("<div id=\"keysList\" style=\"position:absolute;display:none;background:#FFFFFF;border: 1px solid #CCCCCC;font-size:14px;cursor: default;\" onblur> </div>");
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

li 自适应宽度自动换行

lioil77{@}gmail.com(lioil) — Thu,27 Mar 2008 14:29:22 +0800

li 样式中加入: white-space:nowrap;

SQL 主键归零

lioil77{@}gmail.com(lioil) — Fri,21 Mar 2008 15:44:29 +0800

方法一：    如果曾经的数据都不需要的话，可以直接清空所有数据，并将自增字段恢复从1开始计数

    truncate table 表名

方法二:      DBCC CHECKIDENT ('表名', RESEED, 10)     10为已10为开始值

不删除数据，ID就会自动从11开始，也就是10+1开始

[下载] VS2008 零售版

lioil77{@}gmail.com(lioil) — Sun,03 Feb 2008 09:45:49 +0800

[下载] VS2008 零售版

VS2008TeamSuite90DayTrialCHSX1429243.part1.exe	700.0 MB
VS2008TeamSuite90DayTrialCHSX1429243.part2.rar	700.0 MB
VS2008TeamSuite90DayTrialCHSX1429243.part3.rar	700.0 MB
VS2008TeamSuite90DayTrialCHSX1429243.part4.rar	700.0 MB
VS2008TeamSuite90DayTrialCHSX1429243.part5.rar	700.0 MB
VS2008TeamSuite90DayTrialCHSX1429243.part6.rar	700.0 MB
VS2008TeamSuite90DayTrialCHSX1429243.part7.rar	142.7 MB

VS2008 MSDN

http://download.microsoft.com/download/b/c/7/bc73449c-17e2-4097-ba4b-0095e52f5489/VS2008MSDNLibraryCHSX1433063.iso

PJBlog3 - 技术

Div+Css+Js菜单

中文字串截取无乱码 [搜]

ac 数据库中使用宏 替换 BR 成回车符

简单生成文件夹目录列表的dos命令

asp 获取文件相关参数

FCK 返回上传参数

仿GOOGLE搜索提示，无数据库[JavaScript] 转

li 自适应宽度 自动换行

SQL 主键归零

[下载] VS2008 零售版

ac 数据库中使用宏替换 BR 成回车符

li 自适应宽度自动换行