今天做了一个下午网页,中午觉都没有睡.发现菜单做得挺难看的 ,很是郁闷....
索性不做了,打开dojo的demo一看发现里面的有点炫的菜单.于是引用了下
引入dojo包为dojojs包(跟以前的文章一样引入,如不清楚就看前篇) ......
<!
DOCTYPE HTML PUBLIC
"
-//W3C//DTD HTML 4.01//EN
"
"
http://www.w3.org/TR/html4/strict.dtd
"
>
< html >
< head >
< title > FisheyeList Widget Demo </ title >
< script type = " text/javascript " >
var djConfig = ... {isDebug: true, debugAtAllCosts: false} ;
</ script >
< script type = " text/javascript " src = " dojojs/dojo.js " ></ script >
< script type = " text/javascript " >
dojo.require( " dojo.widget.* " );
</ script >
< script >
function load_app(url) ... {
location.href=url;
}
</ script >
< style >
.dojoHtmlFisheyeListBar ... {
margin: 0 auto;
text-align: center;
}
.outerbar ... {
text-align: center;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
}
body ... {
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
}
.page ... {
padding: 60px 20px 20px 20px;
}
</ style >
</ head >
< body >
< div class = " outerbar " >
< div dojoType = " FisheyeList "
itemWidth = " 50 " itemHeight = " 50 "
itemMaxWidth = " 200 " itemMaxHeight = " 200 "
orientation = " horizontal "
effectUnits = " 2 "
itemPadding = " 10 "
attachEdge = " top "
labelEdge = " bottom "
enableCrappySvgSupport = " false "
>
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_browser.png " caption = " Web Browser " >
</ div >
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_calendar.png " caption = " 留言板 " >
</ div >
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_email.png " caption = " Email " >
</ div >
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_texteditor.png " caption = " Text Editor " >
</ div >
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_update.png " caption = " Software Update " >
</ div >
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_users.png " caption = " Users " >
</ div >
</ div >
</ BODY >
</ HTML >
< html >
< head >
< title > FisheyeList Widget Demo </ title >
< script type = " text/javascript " >
var djConfig = ... {isDebug: true, debugAtAllCosts: false} ;
</ script >
< script type = " text/javascript " src = " dojojs/dojo.js " ></ script >
< script type = " text/javascript " >
dojo.require( " dojo.widget.* " );
</ script >
< script >
function load_app(url) ... {
location.href=url;
}
</ script >
< style >
.dojoHtmlFisheyeListBar ... {
margin: 0 auto;
text-align: center;
}
.outerbar ... {
text-align: center;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
}
body ... {
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
}
.page ... {
padding: 60px 20px 20px 20px;
}
</ style >
</ head >
< body >
< div class = " outerbar " >
< div dojoType = " FisheyeList "
itemWidth = " 50 " itemHeight = " 50 "
itemMaxWidth = " 200 " itemMaxHeight = " 200 "
orientation = " horizontal "
effectUnits = " 2 "
itemPadding = " 10 "
attachEdge = " top "
labelEdge = " bottom "
enableCrappySvgSupport = " false "
>
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_browser.png " caption = " Web Browser " >
</ div >
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_calendar.png " caption = " 留言板 " >
</ div >
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_email.png " caption = " Email " >
</ div >
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_texteditor.png " caption = " Text Editor " >
</ div >
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_update.png " caption = " Software Update " >
</ div >
< div dojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc = " images/icon_users.png " caption = " Users " >
</ div >
</ div >
</ BODY >
</ HTML >
引入图片 可以看到效果...
鼠标经过之后可以看到