注册 | 登陆

您的位置：阿里西西 > 网页特效 > 导航菜单 > 详细内容

0顶

js下拉导航菜单实例

稿源：互联网 2022-04-09 07:14:48 点击： 2363 撤稿纠错

js下拉导航菜单，用户个人信息最常用的一个特效，完全支持自定义。

以下讨论的是和js 导航菜单相关的js下拉导航菜单实例教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

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

关于js下拉导航菜单实例的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20081105367.shtml方便下次再访问哦。

·上一篇： 缓冲效果
·下一篇： 鼠标跟随提示效果

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

更多 »

最新新闻

更多 »