Adobe Edge Animate –使用css制作菜单

版权声明:

本文版权属于 北京联友天下科技发展有限公司。

转载的时候请注明版权和原文地址。

效果图:

下拉菜单:

使用css制作菜单与用Edge作图工具制作菜单是两个思路两种方法,css的方法纯粹使用代码控制菜单的艺术效果。

一、制作菜单容器

使用矩形工具,创建一个菜单显示区域,命名为menucontainer,转换为原件,命名为menu,完成菜单容器的制作,接下来菜单将显示在这个原件中。

二、制作点击菜单后显示内容的容器

同样使用矩形工具,创建内容显示区域,转换为原件,并且命名为content,完成内容显示容器的制作,点击菜单之后,加载的相关内容将显示在这个原件中。

三、制作菜单的css文件

菜单的css文件可自己design,也可以用已有的css文件,制作完成后,将之命名为menu.css,保存在工程目录下的style文件夹中,以便在Edge中yepnope。

四、加载css文件和Edge commons,定义菜单项目

在stage添加Actions:compositionReady

yepnope({load: "style/menu.css"});          //加载css文件

yepnope({

load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js",   //也可以下载到本地加载,加载速度更快

complete: function(){

EC.centerStage(sym);

EC.loadComposition("composition/home/home.html",sym.getSymbol("content"));

//loadPage函数用于加载工程文件或者网页,url参数用于传递地址

var loadPage = function(url){

console.log("loadPage: ",url);

EC.loadComposition(url, sym.getSymbol("content"));

};

// "dataProvider" 定义了菜单项,可根据需要增删项目和修改项目名称及链接地址

var config = {

dataProvider: [

{label: "Home", onClick: function(){loadPage("composition/home/home.html")}},

{label: "Development", onClick: function(){loadPage("composition/development/android.html")},items:[

{label: "Android", onClick: function(){loadPage("composition/development/android.html")}},

{label: "iOS", onClick: function(){loadPage("composition/development/ios.html")}},

]},

{label: "About", onClick: function(){loadPage("composition/about/about.html")},items:[

{label: "Author", onClick: function(){sym.play()}}

]},

]

};

//开始设置菜单,对象即为自定义的容器menu

sym.getSymbol("menu").getVariable("setup")(config);

}

});

五、在menu容器内,添加creationComplete函数

try{

//先将菜单透明度降低,加载菜单时间较长

sym.getSymbolElement().css("opacity","0.3");

//开始设置菜单

sym.setVariable("setup", function(config){

var menuContainer = sym.$("menucontainer");

var tplOuterMenu = ''

+'<div id = "nestedmenu">'

+'   <ul></ul>'

+'</div>';

var tplLevel1_withoutSubItems = '<li><a><div style="padding: 0 20px;">#LABEL#</div></a></li>';

var tplLevel1_withSubItems = ''

+'<li class="has-sub ">'

+'   <a><div style="padding: 0 20px;">#LABEL#</div></a>'

+'   <ul></ul>'

+'</li>';

var tplLevel2 = '<li class="has-sub "><a><div style="padding: 0 20px;">#LABEL#</div></a></li>';

var outerMenu = menuContainer.html(tplOuterMenu);

var ul = $(outerMenu).find("ul");

var level1 = "";

$.each(config.dataProvider, function(index1, item1){

if($.isArray(item1.items)){

//修改菜单中的项目

ul.append(tplLevel1_withSubItems.replace("#LABEL#", item1.label).replace("#URL#", item1.url));

var ul2 = ul.find("li").last().find("ul").first();

$.each(item1.items, function(index2, item2){

ul2.append(tplLevel2.replace("#LABEL#", item2.label).replace("#URL#", item2.url));

if(item2.onClick){

var li2 = ul2.find("li").last();

li2.click(item2.onClick);

li2.css("cursor", "pointer");

}

});

if(item1.onClick){

var li = ul.find("> li").last().find("> a");

li.click(item1.onClick);

li.css("cursor", "pointer");

}

}

else{

//一级菜单项

ul.append(tplLevel1_withoutSubItems.replace("#LABEL#", item1.label).replace("#URL#", item1.url));

if(item1.onClick){

var li = ul.find("li").last();

li.click(item1.onClick);

li.css("cursor", "pointer");

}

}

});

//将菜单的index值调到最大,显示在最顶端,并且将透明度调至1

sym.getSymbolElement().css("z-index", "999");

sym.getSymbolElement().css("opacity", "1");

});

}

catch(err){

console.error(err.toString());

}

六、制作链接工程

可简单制作几个工程文件,当点击不同的菜单项时,链接到不同的页面,我们也可以直接将链接修改为网络页面,如新浪,网易,百度,谷歌等。

效果图:

附:menu.css

#nestedmenu ul,

#nestedmenu li,

#nestedmenu span,

#nestedmenu a {

margin: 0;

padding: 0;

position: relative;

cursor:pointer;}

#nestedmenu {

height: 49px;

background: #141414;

background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));

background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);

background: -o-linear-gradient(top, #32323a 0%, #141414 100%);

background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);

background: linear-gradient(to bottom, #32323a 0%, #141414 100%);

border-bottom: 4px solid #e00f16;}

#nestedmenu:after,

#nestedmenu ul:after {

content: '';

display: block;

clear: both;}

#nestedmenu a {

background: #141414;

background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));

background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);

background: -o-linear-gradient(top, #32323a 0%, #141414 100%);

background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);

background: linear-gradient(to bottom, #32323a 0%, #141414 100%);

color: #ffffff;

display: inline-block;

font-family: Helvetica, Arial, Verdana, sans-serif;

font-size: 12px;

line-height: 49px;

padding: 0;

text-decoration: none;}

#nestedmenu ul {

list-style: none;}

#nestedmenu > ul {

float: left;}

#nestedmenu > ul > li {

float: left;}

#nestedmenu > ul > li:hover:after {

content: '';

display: block;

width: 0;

height: 0;

position: absolute;

left: 50%;

bottom: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid #e00f16;

margin-left: -10px;}

#nestedmenu > ul > li.active > a {

box-shadow: inset 0 0 3px #000000;

-moz-box-shadow: inset 0 0 3px #000000;

-webkit-box-shadow: inset 0 0 3px #000000;

background: #070707;

background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));

background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);

background: -o-linear-gradient(top, #26262c 0%, #070707 100%);

background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);

background: linear-gradient(to bottom, #26262c 0%, #070707 100%);}

#nestedmenu > ul > li:hover > a {

background: #070707;

background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));

background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);

background: -o-linear-gradient(top, #26262c 0%, #070707 100%);

background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);

background: linear-gradient(to bottom, #26262c 0%, #070707 100%);

box-shadow: inset 0 0 3px #000000;

-moz-box-shadow: inset 0 0 3px #000000;

-webkit-box-shadow: inset 0 0 3px #000000;}

#nestedmenu .has-sub {

z-index: 1}

#nestedmenu .has-sub:hover > ul {

display: block;}

#nestedmenu .has-sub ul {

display: none;

position: absolute;

width: 200px;

top: 100%;

left: 0;}

#nestedmenu .has-sub ul li {

*margin-bottom: -1px;}

#nestedmenu .has-sub ul li a {

background: #e00f16;

border-bottom: 1px dotted #ec6f73;

font-size: 11px;

display: block;

line-height: 120%;

padding: 10px;}

#nestedmenu .has-sub ul li:hover a {

background: #b00c11;}

#nestedmenu .has-sub .has-sub:hover > ul {

display: block;}

#nestedmenu .has-sub .has-sub ul {

display: none;

position: absolute;

left: 100%;

top: 0;}

#nestedmenu .has-sub .has-sub ul li a {

background: #b00c11;

border-bottom: 1px dotted #d06d70;}

#nestedmenu .has-sub .has-sub ul li a:hover {

background: #80090d;}

原文地址:http://www.cnblogs.com/adobeedge/p/Adobe_Edge_NestedMenu.html

Adobe Edge Animate –使用css制作菜单的更多相关文章

  1. Adobe Edge Animate –可重复使用的个性化按钮制作

    Adobe Edge Animate –可重复使用的个性化按钮制作 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图: 工程文件中:

  2. Adobe edge animate制作HTML5动画可视化工具(一)

    Edge Animate for mac是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro.在之后的文章中,我会逐一的介绍这款新的HTML5动画神 ...

  3. Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换

    Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 上一篇我们说到了使用jquer ...

  4. Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频

    Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权 ...

  5. Adobe Edge Animate –Edge Commons强势来袭,Edge团队开发成为现实

    Adobe Edge Animate –Edge Commons强势来袭,Edge团队开发成为现实 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. Edge ...

  6. adobe edge animate 和 adobe animate cc 有啥区别?

    经常有人问这两款软件的区别,每次都要打字好烦,特此总结发帖如下: 一.首先各自软件介绍 ①adobe edge animate 是adobe公司早期推出的一款网页互动工具.通过HTML+CSS+Jav ...

  7. Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片

    Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...

  8. Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

    Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...

  9. Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果

    Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 此前有Edge爱好者提出一 ...

随机推荐

  1. notepad++汉字突然横过来了

    修改notepad++,汉字突然横过来了,如图, 百度了一下,原来是因为选择的字体"@微软雅黑"前面的@符号惹的祸,改成"微软雅黑"就没事了.

  2. Struts2 文件上传

    一:表单准备 ① 要想使用HTML 表单上传一个或多个文件     –须把 HTML表单的 enctype属性设置为multipart/form-data     –须把HTML 表单的method ...

  3. hdu 1429 胜利大逃亡(续)(bfs+位压缩)

    胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  4. 新网注册域名如何转向其他(如花生壳)DNS(不会报错,已经转入成功)

    最近在玩域名,发现相比较来说,新网的域名注册费用相对廉价好多. 但是我以前是用花生壳的,用惯了花生壳,就觉得新网的域名管理界面很不适应,并不是新网的不好,而是习惯了花生壳. 那么如何将新网注册的域名D ...

  5. DllImport属性详解

    API函数是构筑Windows的基石, 是Windows编程的必备利器.每一种Windows应用程序开发工具都提供间接或者直接的方式调用Win32API,C#也不例外.使用Win32API的一个好处就 ...

  6. Long与long的比较

    Java中如果使用 == 双等于比较对象,等于比较的是两个对象的内存地址,也就是比较两个对象是否是同一个对象如果比较两个Long对象值是否相等,则不可以使用双等号进行比较,可以采用如下方式:1. 使用 ...

  7. 进程控制块PCB学习

    参考这篇文章:http://blog.csdn.net/shuizhilan/article/details/6642040 PCB(process control block),进程控制块,是我们学 ...

  8. ags注册

    在电脑里找到2个 ESRIRegAsm.exe C:\Program Files (x86)\Common Files\ArcGIS\bin C:\Program Files\Common Files ...

  9. jquery 绑定省份和城市

    前台代码: <asp:DropDownList runat="server" ID="ddlProvince"></asp:DropDownL ...

  10. socket.io+angular.js+express.js做个聊天应用(一)

    node,express开发环境等安装如果已经搞好了. justhacker@justhacker-ThinkPad-Edge-E440:~/projects/nodejs$ express -e c ...