您的位置:首页 > 其它

强烈推荐:简单但非常灵活实用的一款菜单

2014-05-25 15:39 387 查看
转载:http://www.verydemo.com/demo_c98_i636.html
为庆祝新版QUI的问世,特将之前开发的一款很实用菜单组件拿出来与大家分享。马上步入正题开始介绍:

大家之前都可能看过或用过很多菜单组件,有一些菜单组件可能做得很漂亮或者有很好的动画效果。但这种菜单一般都不通用,只能在特定的环境下使用。

    我的想法是一个通用的菜单组件应该具备以下特点:

1、代码量很少,包括HTML代码。这样方便使用者使用CSS自定义菜单的风格

2、默认的外观很简洁但通过自定义调整可以展示出不同的样式

3、能够准确地响应鼠标移入动作并快速展开

4、能够以任何元素作为触发源

5、能够支持动态生成的元素触发菜单

按照以上思路,我开发了这个菜单。姑且命名为QUI简易菜单

菜单
默认外观如下:

 

 

用颜色和边框绘制的外观,符合默认外观简洁的思想。只要稍花些心思就能做出各种风格出来。

代码量也很少,如下所示:

<div class="simpleMenu">

    <div class="simpleMenu_link">

        <a href="javascript:;">弹出菜单</a>

    </div>

    <div class="simpleMenu_con">

        <a href="javascript:;"><span>状态</span></a>

        <a href="javascript:;"><span>相册</span></a>

        <a href="javascript:;"><span>分享</span></a>

        <a href="javascript:;"><span>日志</span></a>

    </div>

</div>

也就是说,无论在页面任何位置,使用上述的代码就可以创建一个菜单。哈哈,是不是很方便?

菜单项也可以添加小图标,简单调整后效果如下:

 

 

代码:

<div class="simpleMenu" >    <div class="simpleMenu_link arrow border white_bg">

        <a href="javascript:;">全部操作</a><br…………………………………………………………………………
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: