dojo实现一个菜单

  今天做了一个下午网页,中午觉都没有睡.发现菜单做得挺难看的 ,很是郁闷....

索性不做了,打开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 >

 

引入图片 可以看到效果...

 

鼠标经过之后可以看到