.jpg)
Showing posts with label css bonus. Show all posts
7/06/2009
menu mutil level
<style type="text/css"> .menuchinh{ float:left; border-color:#00CC33; border-style:groove; border:2px; } .menuphu{ float:left; border-color:#00CC33; border-style:groove; border:2px; } </style> <script language="javascript"> function show(id) {var mem="menu"+id document.getElementById(mem).style.display="block"; } function hide(id) {var mem="menu"+id document.getElementById(mem).style.display="none"; } </script> <body> <div style="height:400px" class="menuchinh"> <ul><li onmouseover="show(1)" onmouseout="hide(1)" ><a href="#">trang chu</a></li> <li onmouseover="show(2)" onmouseout="hide(2)" ><a href="#">trang chu</a></li> </div> <div style="height:100px" class="menuphu"> <div id="menu1" style="display:none"> <ul> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> </ul> </div> <div id="menu2" style="display:none"> <ul> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> </ul></div> </div>
menu simple
<pre><script language="javascript">
function chane(obj)
{
var sid=document.getElementById(obj);
if(sid.style.display=='block')
{
sid.style.display='none';
}
else
{
sid.style.display='block';
}
}
</script>
function chane(obj)
{
var sid=document.getElementById(obj);
if(sid.style.display=='block')
{
sid.style.display='none';
}
else
{
sid.style.display='block';
}
}
</script>
<div id="menu1" onclick="chane('sub1')">mainmenu</div>
<span id="sub1" style="display:none">
- <a href="#"> link 4</a><br />
- <a href="#">link 3</a><br />
- <a href="#">link 2</a><br />
- <a href="#">link 1</a>
</span>
<div id="menu2" onclick="chane('sub2')">mainmenu</div>
<span id="sub2" style="display:none">
- <a href="#"> link 4</a><br />
- <a href="#">link 3</a><br />
- <a href="#">link 2</a><br />
- <a href="#">link 1</a>
</span>
</pre>
Subscribe to:
Posts (Atom)
