使用css+js构造的无限级菜单（寻梦的稻草人）

最新推荐文章于 2013-11-25 16:05:58 发布
最新推荐文章于 2013-11-25 16:05:58 发布
阅读量423 收藏
点赞数
文章标签： css function menu html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hejishan/article/details/2249725
版权

 

先看看效果：

css menu 

html代码：

 

< html >
< head >
< style >
ul#menu, ul#menu ul {
    list-style : none ;
    margin : 0 ;
    border-bottom : 1px solid #DDD ;
    border-right : 1px solid #DDD ;
    border-left : 1px solid #DDD ;
    width : 150px ;
    padding : 0 ;
    font-size : 14px ;
}
ul#menu li {
    border-top : 1px solid #DDD ;
    position : relative ;
    padding : 4px ;

}
ul#menu li ul {
    position : absolute ;
    left : 150px ;
    _left : 144px ;     
    top : 0 ;
    display : none ;
}
ul#menu li.over {
    background : #EEE ;
}
ul#menu li.out {
    background : #fff ;
}
ul#menu a {
    display : block ;
    text-decoration : none ;
    color : #000 ;
    _height : 0 ;
}
style>
<script type="text/javascript">
function initMenu(event,ul){
    if(!ul) ul = document.getElementById("menu");
    li = ul.getElementsByTagName("li");
    for(i=0;i<li.length;i++)
    {
        li[i].onmouseover = function(){
            try{
                this.className='over';
                this.getElementsByTagName("ul")[0].style.display="block";
            }catch(e){};
        }
        li[i].onmouseout = function(){
            try{
                this.className='out';
                this.getElementsByTagName("ul")[0].style.display="none";
            }catch(e){};
        }
    }
}
window.onload = initMenu;
 script>
 head>
<body>
<ul id="menu">
    <li>
        这是菜单1
        <ul>
            <li>
                这是菜单1
                <ul>
                    <li><a href="#">这是子菜单 a> li>
                    <li>
                        这是菜单1
                        <ul>
                            <li><a href="#">这是子菜单 a> li>
                            <li><a href="#">这是子菜单 a> li>
                            <li>
                                这是菜单1
                                <ul>
                                    <li><a href="#">这是子菜单 a> li>
                                    <li>
                                        这是菜单1
                                        <ul>
                                            <li><a href="#">这是子菜单 a> li>
                                            <li><a href="#">这是子菜单 a> li>
                                            <li><a href="#">这是子菜单 a> li>
                                         ul>
                                     li>
                                    <li><a href="#">这是子菜单 a> li>
                                 ul>
                             li>
                         ul>
                     li>
                    <li><a href="#">这是子菜单 a> li>
                 ul>
             li>
            <li>
                这是菜单1
                <ul>
                    <li><a href="#">这是子菜单 a> li>
                    <li><a href="#">这是子菜单 a> li>
                    <li><a href="#">这是子菜单 a> li>
                 ul>
             li>
            <li><a href="#">这是子菜单 a> li>
         ul>
     li>
    <li>
        这是菜单2
        <ul>
            <li><a href="#">这是子菜单 a> li>
            <li><a href="#">这是子菜单 a> li>
            <li><a href="#">这是子菜单 a> li>
         ul>
     li>
    <li>
        这是菜单3
        <ul>
            <li><a href="#">这是子菜单 a> li>
            <li><a href="#">这是子菜单 a> li>
            <li><a href="#">这是子菜单 a> li>
         ul>
     li>
 ul>
 body>
 html>



hejishan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现无限级菜单(jQuery)
08-29
js实现无限级菜单js实现无限级菜单js实现无限级菜单
css+javascript 无限级菜单
sunxboy的专栏
08-19 161
演示： http://www.cssrain.cn/demo/ddlevelsmenu/demo.htm http://www.cssrain.cn/demo/ddlevelsmenu/demo2.htm 下载： http://www.cssrain.cn/demo/ddlevelsmenu/ddlevelsmenu.rar    ...
js无限级菜单树
11-14
javascript ,jquery就够了无需太麻烦的库,简洁美观,只需传入json对象，即可生成无限级菜单
JS无限级（+ - 展开）菜单
01-06
js的( + - 展开形式)菜单，分享
CSS+js无限级折叠导航菜单
10-27
一个无限级分类的折叠导航菜单，大部分是用CSS实现，结合JavaScript技术，使这款菜单更加实用。压缩包内含有两上示例，一个横向菜单、一个竖向菜单，
效果直逼flash的Div+Css+Js菜单
10-30
标题中的“效果直逼flash的Div+Css+Js菜单”是指使用HTML的Div元素、CSS样式和JavaScript脚本来创建一种动态交互的菜单效果，这种效果能够媲美早期流行且视觉效果丰富的Flash技术。在Web开发中，由于Flash不支持所有...
css+js下拉菜单
12-11
本文将详细讲解如何使用CSS和JavaScript来创建一个下拉菜单，以及涉及的相关知识点。 首先，我们从HTML结构开始。下拉菜单通常包含一个主菜单列表，每个列表项（`<li>`）可能有一个或多个子菜单（二级菜单）。例如...
效果直逼flash的Div+Css+Js菜单特效代码
03-20
标题 "效果直逼Flash的Div+Css+Js菜单特效代码" 暗示了这是一个关于创建动态、交互式网页菜单的技术教程，其中使用了HTML、CSS和JavaScript这三种核心技术。这些菜单效果通常用于提升用户体验，使得网站导航更加直观...
html+css+js网页设计源代码.zip
05-31
例如，用`addEventListener`监听用户操作，`document.querySelector`或`document.querySelectorAll`选取DOM元素，`setTimeout`或`setInterval`进行定时任务，还有可能使用了现代JavaScript特性如箭头函数、模板字符...
HTML+CSS+JS 网页设计模板.zip
05-31
在使用这些模板时，开发者可以根据需求修改HTML元素以调整内容，通过调整CSS样式来定制界面，或者使用JavaScript添加或修改交互功能。对于初学者来说，这些模板是学习HTML、CSS和JavaScript实践的好材料；对于经验...
CNL Tree Menu 无限级CSS树形菜单 兼容各浏览器
05-29
CNL Tree Menu 无限级CSS树形菜单 兼容各浏览器! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
JS无限级树形菜单
08-27
JS无限级树形菜单3种
JS左侧无限级菜单导航
11-01
JS左侧无限级菜单导航，兼容各大浏览器，很实用。
纯js+html菜单栏折叠，支持数据无限嵌套
12-19
数据格式支持数组形式 list = [ { id: 1, name: '测试', children: [ { id: 11, name: '测试1', children: [ { id: 112, name: 'cs1' } ] }, { id: 12, name: '测试2' } ] }]
经典css菜单，无限级朝右弹，代码短之极致了
lord_llz的专栏
03-26 2763
本来在经典论坛下的朝右弹的二级菜单，代码极短。我改了一天，改成了无限级的。原来的二级菜单,三个文件，caidan.htm,style2.css,drop_down.jscaidan.htmhttp://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">Horizontal">http://www.w3.org/1999/xhtml"
CSS+JS实现结构化无限级导航菜单列表(直接调用)
gee_56的专栏
03-11 1504
今天跟大家分享一下如何通过HTML的结构化方式实现无限级导航菜单列表的功能！首先让大家看一下两个实例演示—— [无限级竖式菜单列表] [无限级横式菜单列表] 这里详细分析的并非JS的源码部分（封装好的JS源码是从国外网站摘录下来的），而是前台直接调用的关键部分，主要有三点—— 1、直接调用的JS函数 ddlevelsmenu.setup(导航菜单ID, 列表方式); 显然易见，我们要预先
CSS+JS实现兼容性很好的无限级下拉菜单
一叶孤舟
09-20 183
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;&lt;head&gt;&lt;title
js实现左侧无限级菜单
yuxingxing198812的专栏
11-25 5388
以前在网上搜到很多js写的菜单，但是都是在静态页面中写死了。最近写了一个通过json数组来生成的菜单（兼容ie6,7,8；ff）；代码如下： //菜单内容json数组 //数据结构【fatherid：当前节点的父节点】【name：要显示的名字】【link：当前菜单的链接地址】【id：当前节点的id】 var menu_ary = [ {'fatherid':'0','name':'湖南',
使用HTML+CSS+JS构建旅游摄影网站
通常，JavaScript会通过`<script>`标签引入，或者使用现代前端框架（如React、Vue.js或Angular）来管理。 在制作旅游摄影网站时，特别需要注意的是： - 图片展示：使用`<img>`标签插入图片，可以通过CSS调整其尺寸...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值