正规学历专本科热招

吉林飞燕舞蹈队

文字广告位5元/月

文字广告位5元/月

文字广告位5元/月

文字广告位5元/月

广告投放QQ:114859419

广告位招租

网站首页 >> 网页特效 >> 菜单特效 >> 文章内容

CSS+JS仿天猫侧边可折叠展开的网页菜单

[日期：2015-01-25] 来源：远方教程作者：远方教程阅读：4070次[字体：大中小]　访问[旧版]

温馨提示：特效代码在文本域中，您可以点击文本域下方的预览按钮先查看效果。

<style type="text/css">
*{margin:0; padding:0;}
body{ font-size:14px; font-family:"宋体";}
h1, h2, h3{ font-size:14px; font-weight:normal;}
li{ list-style:none;}
a{ color:#333; text-decoration:none;}
#nav{ width:152px; height:35px; background:#C00; margin:50px 0 0 20px;}
#nav h1{ padding-left:17px; line-height:35px; color:#fff; margin-right:17px;}
#box{ width:150px; border:1px solid #B00; border-top:none; margin-left:20px; display:none;}
#subnav{width:150px;}
#subnav .list{ width:150px; height:30px;}
#subnav .list h2{ width:110px; height:30px; padding-left:30px; line-height:30px; margin-right:10px;}
#subnav .list a:hover, #subnav .active a:hover{ color:#900; font-weight:bold;}
#subnav .active{ width:150px; height:30px; border-bottom:1px solid #b00; border-top:1px solid #b00; position:relative;}
#subnav .active h2{ width:120px; height:30px; padding-left:30px; line-height:30px; background:#fff; position:absolute; left:1px; top:0; z-index:4;}
#subnav .list_nav{ width:450px; overflow:hidden; border:1px solid #b00; position:absolute; left:150px; top:-1px; z-index:3; display:none;}
</style>
<script type="text/javascript">
window.onload=function()
{
        var oNav=document.getElementById('nav');
        var oBox=document.getElementById('box');
        var oSubnav=document.getElementById('subnav');
        var aLi=oSubnav.getElementsByTagName('li');
        var i=0;
        oNav.onclick=function()
        {
                if(oBox.style.display=='block')
                {
                        oBox.style.display='none';
                }
                else
                {
                        oBox.style.display='block';
                }
        }
        for(i=0;i<aLi.length;i++)
        {
                if(aLi[i].className=='list')
                {
                        aLi[i].onmousemove=function()
                        {
                                for(i=0;i<aLi.length;i++)
                                {
                                        var aDivList=this.getElementsByTagName('div')[0];
                                        aDivList.style.display='block';
                                        this.className='active';
                                }
                        }
                        aLi[i].onmouseout=function()
                        {
                                for(i=0;i<aLi.length;i++)
                                {
                                        var aDivList=this.getElementsByTagName('div')[0];
                                        aDivList.style.display='none';
                                        this.className='list';                
                                }
                        }
                }
        }
};
</script>
<div id="nav">
<h1>网页特效菜单↓</h1>
</div>
<div id="box">
        <ul id="subnav">
                <li class="list">
                        <h2><a href="#">网站主页①</a></h2>
                        <div class="list_nav">
                                <ul>
                                        <li><A target="_blank" href="http://www.52yfjc.com/list.asp?id=1">HTML教程</A></li>
                                        <li><A target="_blank" href="http://www.52yfjc.com/list.asp?id=3">ASP教程</A></li>
                                        <li><A target="_blank" href="http://www.52yfjc.com/list.asp?id=6">PHP教程</A></li>
                                        <li><A target="_blank" href="http://www.52yfjc.com/list.asp?id=22">Dreamweaver教程</A></li>
                                </ul>
                        </div>
                </li>
                <li class="list">
                        <h2><a href="#">软件下载②</a></h2>
                        <div class="list_nav">
                                <ul>
                                        <li><A target="_blank" href="http://www.52yfjc.com/show.asp?id=298">手机浏览器</A> </li>
                                        <li><A target="_blank" href="http://www.52yfjc.com/show.asp?id=35">加速浏览器</A> </li>
                                        <li><A target="_blank" href="http://jifendownload.2345.cn/jifen_2345/qqpcmgr_kyfedu_120184746.exe">电脑管家</A></li>
                                </ul>
                        </div>
                </li>
                <li class="list">
                        <h2><a href="#">网页特效</a></h2>
                        <div class="list_nav">
                                <ul>
                                        <li><A target="_blank" href="http://www.52yfjc.com/list.asp?id=54">菜单特效</A> </li>
                                        <li><A target="_blank" href="http://www.52yfjc.com/list.asp?id=21">文字特效</A> </li>
                                        <li><A target="_blank" href="http://www.52yfjc.com/list.asp?id=53">图片特效</A> </li>
                                        <li><A target="_blank" href="http://www.52yfjc.com/list.asp?id=61">时间特效</A></li>
                                </ul>
                        </div>
                </li>
                <li class="list">
                        <h2><a href="#">美女图片</a></h2>
                        <div class="list_nav">
                                <ul>
                                        <li><A target="_blank" href="http://www.52yfjc.com/list.asp?id=37">美女图片</A></li>
                                        <li><A target="_blank" href="http://www.52yfjc.com/list.asp?id=52">经典漫画</A></li>
                                </ul>
                        </div>
                </li>
        </ul>
</div>

上一篇：用CSS制作的文字变化的导航菜单

下一篇：纯CSS下拉导航菜单代码

图片展示

纯CSS下拉导航菜单代码

左键菜单

热门下载

Dreamwerver 8.0
中文绿色版

AE: After Effects CS5.5
官方完整版+序列号

会声会影X5入门到精通
高清视频教程

腾讯电脑管家最新版
优化+杀毒

2345手机浏览器
免费打电话

相关评论

站长推荐

最新添加

热门阅读

广告招租

本站承接网站制作，维护等业务，并长期招租各类文字、图片广告。业务QQ：1348328127. Email:admin@52yfjc.com 微信客服(微信号)：kf_52yfjc.