Adobe Edge Animate –使用css制作菜单

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

posted @ 2013-07-12 18:17 Adobe Edge 阅读(...) 评论(...) 编辑 收藏