3月27 隐藏导航

今天主要是做的隐藏导航有横向延伸和纵向延伸两种

横向的

<title>隐藏</title>
<style>
*{
    margin:0px;
    padding:0px;}
.aa
{
    height:40px;
    width:80px;
    left:300px;
    top:100px;
    position:absolute;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#0FF}
.aaa
{
    height:40px;
    width:80px;
    left:300px;
    top:100px;
    position:absolute;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:#399}
/*#b1
{
    height:120px;
    width:80px;
    top:40px;
    left:0px;}*/
table
{
    height:120px;
    width:80px;
    border:0px;
    text-align:center;
    vertical-align:middle;
}
.ee
{
    height:40px;
    width:80px;
    
    top:40px;
    position:absolute;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#699;}
.eee
{
    height:40px;
    width:80px;
    
    top:40px;
    position:absolute;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:#9F0;}
.pp
{
    top:0px;
    left:80px;
    position:absolute;}
    
.dd
{
    height:40px;
    width:80px;
    
    top:80px;
    position:absolute;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#C09;}
.ddd
{
    height:40px;
    width:80px;
    
    top:80px;
    position:absolute;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:#FCC;}

.ff
{
    height:40px;
    width:80px;
    
    top:120px;
    position:absolute;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#309;}
.fff
{
    height:40px;
    width:80px;
    
    top:120px;
    position:absolute;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:#F30;}    

table
{
    height:40px;
    width:240px;
    border:0px;
    text-align:center;
    vertical-align:middle;}
    
</style>


</head>
<body>
<div class="aa" onmouseover="this.className='aaa'" onmouseout="this.className='aa'">餐厅

<div class="ee" onmouseover="this.className='eee'" onmouseout="this.className='ee'">主食<div class="pp">
<table cellpadding="0" cellspacing="0" style="background-color:#9F0">
<tr>
<td >馒头</td>
<td >米饭</td>
<td >汉堡</td>
</tr>
</table>
<script>
function over()
{
    var e=document.getElementById("ee");
    e.setAttribute("style","overflow:visible;background-color:#9F0")}
function out()
{
    
    var e=document.getElementById("ee");
    e.setAttribute("style","overflow:hidden;background-color:#699")}
</script>
</div></div>

<div class="dd" onmouseover="this.className='ddd'" onmouseout="this.className='dd'">饮品<div class="pp">
<table cellpadding="0" cellspacing="0" style="background-color:#FCC">
<tr>
<td >果汁</td>
<td >奶茶</td>
<td >白开水</td>
</tr>
</table>
</div></div>

<div class="ff" onmouseover="this.className='fff'" onmouseout="this.className='ff'">甜点<div class="pp">
<table cellpadding="0" cellspacing="0" style="background-color:#F30">
<tr>
<td >冰激凌</td>
<td >爆米花</td>
<td >棉花糖</td>
</tr>
</table>
</div></div>




<script>
function over()
{
    var a=document.getElementById("aa");
    a.setAttribute("style","overflow:visible;background-color:#399")}//这部分可以没有
function out()
{
    
    var a=document.getElementById("aa");
    a.setAttribute("style","overflow:hidden;background-color:#0FF")}
</script>
</div>


</body>
</html>

纵向的

<title>纵向</title>
<style>
*
{
    margin:0px;
    padding:0px;}
.aa
{
    height:40px;
    width:80px;
    top:100px;
    left:300px;
    position:absolute;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#9F3}
.aaa
{
    height:40px;
    width:80px;
    top:100px;
    left:300px;
    position:absolute;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:#399;}
.bb
{
    height:40px;
    width:80px;
    top:40px;
    
    position:absolute;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#669}
.bbb
{
    height:40px;
    width:80px;
    top:40px;
    
    position:absolute;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:#6C3}
.cc
{
    height:40px;
    width:80px;
    top:80px;
    
    position:absolute;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#0F0}
.ccc
{
    height:40px;
    width:80px;
    top:80px;
    
    position:absolute;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:#303;}
.dd
{
    height:40px;
    width:80px;
    top:120px;
    
    position:absolute;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#399}
.ddd
{
    height:40px;
    width:80px;
    top:120px;
    
    position:absolute;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:#C63}
#q1
{
    top:0px;
    left:80px;
    position:absolute;}

table
{
    height:120px;
    width:80px;
    border:0px;
    text-align:center;
    vertical-align:middle
    }

</style>
</head>

<body>
<div class="aa" onmouseover="this.className='aaa'" onmouseout="this.className='aa'">餐厅

<div class="bb" onmouseover="this.className='bbb'" onmouseout="this.className='bb'">主食<div id="q1">
<table cellpadding="0" cellspacing="0" style="background-color:#6C3">
<tr><td>馒头</td></tr>
<tr><td>米饭</td></tr>
<tr><td>披萨</td></tr>
</table>
</div></div>

<div class="cc" onmouseover="this.className='ccc'" onmouseout="this.className='cc'">饮品<div id="q1">
<table cellpadding="0" cellspacing="0" style="background-color:#303">
<tr><td>稀饭</td></tr>
<tr><td>果汁</td></tr>
<tr><td>奶茶</td></tr>
</table>
</div></div>

<div class="dd" onmouseover="this.className='ddd'" onmouseout="this.className='dd'">甜品<div id="q1">
<table cellpadding="0" cellspacing="0" style="background-color:#C63">
<tr><td>冰激凌</td></tr>
<tr><td>爆米花</td></tr>
<tr><td>棉花糖</td></tr>
</table>
</div></div>

</body>
</html>

posted @ 2016-03-27 20:14 Durriya 阅读(185) 评论(0) 编辑收藏举报

Durriya

3月27 隐藏导航

公告