菜单

澳门太阳娱乐手机登录菜单成效

2020年3月13日 - 澳门太阳娱乐手机登录
澳门太阳娱乐手机登录菜单成效

1.概述

菜单是web开发中常见的功能模块,它能够直观的展示给用户本站中有哪些功能。一般在页面中看到的菜单类型分为两种:横向菜单和纵向菜单。
今天分别来完成纵向菜单和横向菜单的功能。先来看看纵向菜单,首先导航栏有四个菜单项,分别是古典名著《红楼梦》、《水浒传》、《三国演义》、《西游记》,而每个菜单栏下面分别对应着自己的二级菜单。对应的html是一个无序列表ul下面的四个li,每个li包括了每个一级菜单和一级菜单下的二级菜单。对应的html如下:

采用弹出式悬浮菜单,不但可以使网站的导航内容更加清晰,而且不影响页面的整体效果。运行本实例,如图1所示,当鼠标移动到一级导航菜单的标题上时,将弹出悬浮菜单显示该菜单对应的子菜单,鼠标移出时,将隐藏悬浮菜单。

<body>
    <ul>
        <li class="main">
            红楼梦
            <ul>
                <li>第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</li>
                <li>第二回 贾夫人仙逝扬州城 冷子兴演说荣国府</li>
                <li>第三回 金陵城起复贾雨村 荣国府收养林黛玉</li>
                <li>第四回 薄命女偏逢薄命郎 葫芦僧乱判葫芦案</li>
                <li>第五回 开生面梦演红楼梦 立新场情传幻境情</li>
            </ul>
        </li>
        <li class="main">
            水浒传
            <ul>
                <li>第一回 张天师祈禳瘟疫 洪太尉误走妖魔</li>
                <li>第二回 王教头私走延安府 九纹龙大闹史家村</li>
                <li>第三回 史大郎夜走华阴县 鲁提辖拳打镇关西</li>
                <li>第四回 赵员外重修文殊院 鲁智深大闹五台山</li>
                <li>第五回 小霸王醉入销金帐 花和尚大闹桃花村</li>
            </ul>
        </li>
        <li class="main">
            三国演义
            <ul>
                <li>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</li>
                <li>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</li>
                <li>第三回 议温明董卓叱丁原 馈金珠李肃说吕布</li>
                <li>第四回 废汉帝陈留践位 谋董贼孟德献刀</li>
                <li>第五回 发矫诏诸镇应曹公 破关兵三英战吕布</li>
            </ul>
        </li>
        <li class="main">
            西游记
            <ul>
                <li>第一回 靈根育孕源流出 心性修持大道生</li>
                <li>第二回 悟徹菩提真妙理 斷魔歸本合元神</li>
                <li>第三回 四海千山皆拱伏 九幽十類盡除名</li>
                <li>第四回 官封弼馬心何足 名注齊天意未寧</li>
                <li>第五回 亂蟠桃大聖偷丹 反天宮諸神捉怪</li>
            </ul>
        </li>
    </ul>
</body>

澳门太阳娱乐手机登录,2.技术要点

我们是用列表嵌套列表的方式来做二级菜单的,如果再有三级菜单,只需要在二级菜单的li中再添加一层ul。上诉html代码的页面效果如下:
澳门太阳娱乐手机登录 1
显然离想要的效果相去甚远。这时候可以用menu.css来控制想要的效果。浏览器中ul和li元素默认情况下文字前都有圆点标识符,li元素会有缩进。去掉ul和li的前面的圆点可以用如下的样式:

本实例主要是在JavaScript中,动态改变

ul, li {
    list-style: none;
}

标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单。其实,每一个一级菜单下的二级菜单内容是已经添加在网页的

清除子菜单的缩进值

标签中,只是此时设置了

ul {
    padding: 0;
    margin: 0;
}

不显示。所以,在JavaScript中,当鼠标经过某个导航的标题时,只需要调用指定的

要想把一级菜单的导航栏背景颜色设置为黑色,使用background-image来完成这一需求。如果背景图片比元素的实际大小要小,那么背景图就会自动在横向和纵向上重复显示,直到充满整个区域。这时候需要用background-repeat来控制背景图的重复填充方式。

对象,动态修改它的display属性即可,display属性包含两个用于显示和隐藏的属性值,分别为none。

.main {
    background-image: url("../image/title.gif");
    background-repeat: repeat-x;
    width: 360px;
}

例如:在网页中有一个id为mydiv的

需要指出的是,背景图片的url内容是图片的相对位置,background-repeat和width配合起来是让图片在360个像素长度的区域横向重复。如果一个元素上同时定义了背景图和背景色,那么有背景图的地方是不会显示背景色的。
接下来给菜单栏的内容加上a标签。同时为了能够显示其手指图标,样式如下:

标签,并设置了此

a {
    /*取消所有的下划线*/
    text-decoration: none;
    padding-left: 20px;
    display: block;
    display: inline-block;
    width: 340px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.main a {
    color: white;
    background-image: url(../image/collapsed.gif);
    background-repeat: no-repeat;
    background-position: 2px center;
}
.main li a {
    color: black;
    background: none;
}
li {
    background-color: #EEEEEE;
}

为隐藏。在JavaScript中,控制此

text-decoration属性值为none时,可以取消文字上的下划线,background-position可以控制背景图的位置,属性值既可以用数值,也可以用center,left,top这些值来控制横向和纵向的位置。这个属性的两个值,第一个对应横向,第二个对应纵向。background-image的值为none表示没有背景图片。.main
a中的color为白色,.main li
a中的color为黑色目的是为了让一级菜单黑底白字,而二级菜单是白底黑字。页面效果如图:
澳门太阳娱乐手机登录 2

显示的写法如下:

页面渲染的差不多了,接下来是做隐藏二级菜单的功能。首先在前面的css中默认所有控制二级菜单的为none,也就是不显示的。

document.getElementById.style.display="block"; 
.main ul {
    display: none;
}

3.具体实现

然后用jquery的选择器选出所有的一级菜单标题来控制对应二级菜单的显示和隐藏。

编写用于显示和隐藏的JavaScript方法,当鼠标经过一级菜单标题时会显示二级菜单,当鼠标移出时会隐藏二级菜单。关键代码如下:

$(document).ready(function() {
    $(".main > a").click(function() {
        var ulNode = $(this).next("ul");

        //让二级菜单显示和隐藏
        if(ulNode.css("display") == "block") {
            ulNode.css("display", "none");
        } else {
            ulNode.css("display", "block");
        }
        changeIcon($(this));        
    });
});
function change(img,subMenu,path,type){img.src="images/"+path+".GIF";if{if{subMenu.style.display="none";}else{subMenu.style.display="block";}}} 

.main
a和.main>a的不同之处,前者选择了用.main的这个class的元素内部所有的a节点,候着只选择.main的子节点中的a节点。隐藏和显示效果,在jQuery中的实现方式比较多,这里介绍几种。

在页面中,预先在

  1. 本例子中的给节点css属性display赋值为block和none来达到效果。
  2. 使用show()和hide()方法。
  3. 使用slideDown()和slideUp()方法。这种方法比show()和hide()不同的是,可以淡入谈出,里面的参数:slow,normal,fast可以控制滑动的快慢。
  4. 使用toggle()方法。toggle()方法可以自动判断是显示还是隐藏。

标签中为每个一级导航菜单添加二级菜单的内容,并设置二级菜单的

在一级菜单的左边有一个白色的按钮。当二级菜单展开的时候按钮指向右,当二级菜单收缩的时候按钮指向下。实现这样的效果需要障眼法,当出发点击事件时,不停的切换向右箭头和向下箭头的图片。

标签为隐藏。关键代码如下:

function changeIcon(menuNode) {
    if(-1 != menuNode.css("background-image").indexOf("collapsed.gif")) {
        menuNode.css("background-image", "url('../image/expanded.gif')");
    } else {
        menuNode.css("background-image", "url('../image/collapsed.gif')");
    }
}
浏览员工信息添加新员工

这里用到js的函数indexOf()的用法

…//此处省略了其他二级菜单的

定义和用法

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

语法
stringObject.indexOf(searchvalue,fromindex)

参数 描述

searchvalue 必需。规定需检索的字符串值。

fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是
0 到 stringObject.length –
1。如省略该参数,则将从字>符串的首字符开始检索。

说明

该方法将从头到尾地检索字符串 stringObject,看它是否含有子串
searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头
(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回
searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0
>开始的。

内容

该函数的处理过程是jQuery拿到一级菜单的节点,然后判断背景图片的url地址是否包含字符串“collapsed.gif”,如果包含则切换到expaned.gif,如果不包含则切换到collapsed.gif。
调用方式是:

在一级菜单的的表格的

$(".main > a").click(function() {
    changeIcon($(this));        
});

中设置onMouseOver和onMouseOut事件,调用步骤中定义的JavaScript的change()方法,动态改变二级菜单

到此,纵向菜单功能已经基本实现,横向菜单的做法也是差不多的,最关键的地方是让ul的四个li横向展示。css中的关键代码是”float:
left;”。html代码与纵向菜单相同

的显示和隐藏。关键代码如下:

    <ul>
        <li class="hmain">
            <a href="#">红楼梦</a>
            <ul>
                <li><a href="#">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a></li>
                <li><a href="#">第二回 贾夫人仙逝扬州城 冷子兴演说荣国府</a></li>
                <li><a href="#">第三回 金陵城起复贾雨村 荣国府收养林黛玉</a></li>
                <li><a href="#">第四回 薄命女偏逢薄命郎 葫芦僧乱判葫芦案</a></li>
                <li><a href="#">第五回 开生面梦演红楼梦 立新场情传幻境情</a></li>
            </ul>
        </li>
        <li class="hmain">
            <a href="#">水浒传</a>
            <ul>
                <li><a href="#">第一回 张天师祈禳瘟疫 洪太尉误走妖魔</a></li>
                <li><a href="#">第二回 王教头私走延安府 九纹龙大闹史家村</a></li>
                <li><a href="#">第三回 史大郎夜走华阴县 鲁提辖拳打镇关西</a></li>
                <li><a href="#">第四回 赵员外重修文殊院 鲁智深大闹五台山</a></li>
                <li><a href="#">第五回 小霸王醉入销金帐 花和尚大闹桃花村</a></li>
            </ul>
        </li>
        <li class="hmain">
            <a href="#">三国演义</a>
            <ul>
                <li><a href="#">第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</a></li>
                <li><a href="#">第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</a></li>
                <li><a href="#">第三回 议温明董卓叱丁原 馈金珠李肃说吕布</a></li>
                <li><a href="#">第四回 废汉帝陈留践位 谋董贼孟德献刀</a></li>
                <li><a href="#">第五回 发矫诏诸镇应曹公 破关兵三英战吕布</a></li>
            </ul>
        </li>
    </ul>
...//省略了二级菜单的代码

在menu.css中,控制.main的样式统统用来控制.hmain,除此之外还应该添加横向飘逸的这一句:

以上所述是小编给大家介绍的导航条弹出式悬浮菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

.hmain {
    float: left;
    margin-left: 1px;
}

而横向菜单的二级菜单的展开与收缩与纵向不同,横向菜单当鼠标进入区域时展开内容,当鼠标离开时内容收缩。这里用到jQuery的hover()方法。

.hover( handlerIn, handlerOut )
Description: Bind two handlers to the matched elements, to be executed
when the mouse pointer enters and leaves the elements.

.hover(handlerIn, handlerOut)

描述:

将两个处理程序绑定到匹配的元素,当鼠标指针进入并离开元素时执行。

实现的代码如下:

    $(".hmain").hover(function(){
        $(this).children("ul").toggle("slow");
//      $(this).children("ul").slideDown("3000");
        changeIcon($(this).children("a"));
    },function(){
        $(this).children("ul").toggle("slow");
//      $(this).children("ul").slideUp("3000");
        changeIcon($(this).children("a"));
    });

当鼠标进入横向菜单一级菜单时,代码执行进入hover()函数里面的第一个函数,触发toggle()函数,然后调用之前写好的改变箭头状态的changeIcon函数。当鼠标离开的时候代码执行进入hover()函数里面的第二个函数,触发toggle()函数,然后调用changeIcon函数。

代码参考地址:

参考资料:

  1. 王兴奎《jQuery实战》
  2. w3school

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图