js下拉导航菜单实例 - 网页特效代码演示

广告服务 | 收藏本页 | 设为首页 | 登录 | 注册退出 | 管理

Alexa排名查询 | 广告代码 | 发布源码

广告代码特效 | 导航条代码 | 菜单特效 | 日期时间 | 背景图像 | 图层样式 | 鼠标特效代码 | 页面窗口 | 色彩表格 | 文字特效 | 表单按钮 | 计数转换 | 游戏特效 | 实例特效

当前位置：网页特效 > 网页特效演示页

菜单导航特效日期时间特效背景图像特效图层样式特效鼠标特效代码页面窗口特效色彩表格特效文字特效代码表单按钮特效计数转换特效游戏网页特效实例网页特效

js下拉导航菜单实例 - 网页特效代码演示 - 特效代码运行

以下是HTML网页特效代码，点击运行按钮可查看效果：

<script type="text/javascript"> 
 
</script> 
<style type="text/css"> 
body { font-size:12px; margin:20px; padding:0; text-align:left;} 
dl,dt,dd,ul,ol,li,p,div,input,h1,h2,h3,h4,h5,h6 { margin:0; padding:0;} 
li { list-style:none;} 
h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;} 
h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;} 
.libiao_menu { margin-bottom:15px;} 
.libiao_menu h3 a { margin-top:15px; margin-bottom:15px; display:block; background:url(../picture/user_11.gif) no-repeat 20px 0; width:130px; height:28px; font-size:14px; text-align:left; padding-left:65px; padding-top:13px; color:#0066cc;} 
.libiao_menu dl { margin-left:30px; margin-top:5px;} 
.libiao_menu dl dt { font-size:14px; line-height:24px;} 
.libiao_menu dl dt a { padding-left:13px; color:#333;} 
.libiao_menu dl dt a.rights { background:url(http://www.heluyao.com.cn/images/user_23.gif) no-repeat 0 3px;} 
.libiao_menu dl dt a.xias { background:url(http://www.heluyao.com.cn/images/user_23.gif) no-repeat 0 -41px;} 
.libiao_menu dl dd { padding-left:20px;} 
.libiao_menu dl dd ul {} 
.libiao_menu dl dd ul li { font-size:14px; line-height:24px;} 
.libiao_menu dl dd ul li a { color:#06c;} 
</style> 
<h2>js2级下拉导航列表[1]</h2> 
<h5>本文出处：<a href="http://www.heluyao.com.cn/" target="_blank">heluyao.com.cn</a>，转载请保留<span style="color:#f00; font-weight:bold;">出处链接</span>！</h5> 
    <div class="libiao_menu"> 
        <dl> 
            <dt><a href="#" class="xias" onclick="showHide(this,'items0');">我的订单</a></dt> 
            <dd id="items0" style="display: block;"> 
                <ul> 
                    <li><a href="#">所有订单</a></li> 
                    <li><a href="#">需要支付的订单</a></li> 
                    <li><a href="#">处理中的订单</a></li> 
                    <li><a href="#">需要确认收货的订单</a></li> 
                </ul> 
            </dd> 
        </dl> 
        <dl> 
            <dt><a href="#" class="xias" onclick="showHide(this,'items1');">帐户管理</a></dt> 
            <dd id="items1" style="display: block;"> 
                <ul> 
                    <li><a href="#">我的积分</a></li> 
                    <li><a href="#">管理收货地址</a></li> 
                </ul> 
            </dd> 
        </dl> 
        <dl> 
            <dt><a href="#" class="xias" onclick="showHide(this,'items2');">我的</a></dt> 
            <dd id="items2" style="display: block;"> 
                <ul> 
                    <li><a href="#">我的收藏</a></li> 
                    <li><a href="#">我的评论</a></li> 
                </ul> 
            </dd> 
        </dl> 
        <dl> 
            <dt><a href="#" class="xias" onclick="showHide(this,'items3');">个人信息管理</a></dt> 
            <dd id="items3" style="display: block;"> 
                <ul> 
                    <li><a href="#">编辑个人档案</a></li> 
                    <li><a href="#">修改密码</a></li> 
                </ul> 
            </dd> 
        </dl> 
    </div>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[提示：可先修改代码再按运行]

刚被其它网友点击的网页特效

搜索查询面板

关于我们·免责声明·广告服务·版权隐私·联系我们·友情链接·网站地图·免费收录·本站技术QQ群:17701495
Copyright 2004-2008 © Alixixi.com 粤ICP备05097156号