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