자바스크립트로 만든 3D 큐브 메뉴 - CubeMenu

3D 큐브 메뉴는 MooTools 자바스크립트 라이브러리를 이용하여 만들어진 색다른 3차원 메뉴입니다. 그러나 실제로 사용해 보면 비주얼은 뛰어난 반면 사용성이 떨어지는 것을 경험할 수 있습니다. 마우스 휠로 확대/축소하는 기능 보다는 WordPress의 Cumulus 플러그인처럼 마우스 위치에 반응하게 하여 원하는 위치로 이동하는 기능과 큐브 뿐만아니라 다른 형태로도 변하게 하는 옵션을 추가로 제공하면 더욱 다양한 시도들을 기대할 수도 있었을텐데 말예요.

var myCubeMenu = new CubeMenu({   items: [     ['Charts', 'data/0.png', function(){ Message.show('Chars clicked..'); }],     ['Games', 'data/1.png', function(){ Message.show('Games clicked..'); }],     ['Sounds', 'data/2.png', function(){ Message.show('Sounds clicked..'); }],     ['Internet', 'data/3.png', function(){ Message.show('Internet clicked..'); }],     ['Calendar', 'data/4.png', function(){ Message.show('Calendar clicked..'); }],     ['Users', 'data/5.png', function(){ Message.show('Users clicked..'); }],     ['Palette', 'data/6.png', function(){ Message.show('Palette clicked..'); }],     ['Monitor', 'data/7.png', function(){ Message.show('Monitor clicked..'); }],     ['Mail', 'data/8.png', function(){ Message.show('Mail clicked..'); }],     ['Acrobat', 'data/9.png', function(){ Message.show('Acrobat clicked..'); }],     ['Flash', 'data/10.png', function(){ Message.show('Flash clicked..'); }],     ['RecycleBin', 'data/11.png', function(){ Message.show('RecycleBin clicked..'); }],     ['Connections', 'data/12.png', function(){ Message.show('RecycleBin clicked..'); }],     ['', 'data/13.png', $empty ],     ['Blocks', 'data/14.png', function(){ Message.show('Blocks clicked..'); }],     ['Chess', 'data/15.png', function(){ Message.show('Chess clicked..'); }],     ['Languages', 'data/16.png', function(){ Message.show('Languages clicked..'); }],     ['Board', 'data/17.png', function(){ Message.show('Board clicked..'); }],     ['Battery', 'data/18.png', function(){ Message.show('Battery clicked..'); }],     ['Newspaper', 'data/19.png', function(){ Message.show('Newspaper clicked..'); }],     ['Clock', 'data/20.png', function(){ Message.show('Clock clicked..'); }],     ['MSN', 'data/21.png', function(){ Message.show('MSN clicked..'); }],     ['Printer', 'data/22.png', function(){ Message.show('Printer clicked..'); }],     ['Database', 'data/23.png', function(){ Message.show('Database clicked..'); }],     ['Shutdown', 'data/24.png', function(){ Message.show('Shutdown clicked..'); }],     ['Reload', 'data/25.png', function(){ Message.show('Reload clicked..'); }],     ['Camcorder', 'data/26.png', function(){ Message.show('Camcorder clicked..'); }]   ] });

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

• 태그 :
• 자바스크립트 ,
• MooTools ,
• 3D ,
• 메뉴 ,
• CubeMenu

파이어준 | 카테고리 : 자료 - 웹개발 | 조회(1336) | 엮인글 | 댓글 | △