Every month we take a look around and select some of the most interesting web-development-related web-sites. We read articles, check out tools, analyze the advantages of new resources. Below you’ll find useful references, tutorials, services, tools, techniques and articles we’ve found over the last 30 days - an overview of web-sites you shouldn’t have missed in April 2008.

All images can be clicked and lead to the sites from which the screenshots have been taken.

Best designs and Tutorials of April 2008

Technorati Tags: best of, Best of the Month, coding, design, inspiration, programming, typography

Description

ddmenu is a simple MooTools-based script to create you’re own context menus.

Features

• The Menu Appearance is adapted to the System Content Menu behavior.
• Crtl-Switch: Press the Crtl-key and right click to switch between ddmenu and browser default context menu.
• Shift-Switch: Press the Shift-key and right click to open ddmenu beside the browser default context menu.
• Fully customizable: Menu styling can be easily defined in external stylesheet.
• Cross-browser: Full A-Graded browsers support (Opera is supported through Ctrl + Left Click)
• Fade-in (settable)
• Two tricky functions to enable/disable menu items

Specification

• Requires: < mootools 1.2 beta 2
• Tested browsers: Firefox 2, Safari 3, Internet Explorer 6/7, Opera 9 under Windows. Firefox 2, Safari 3 under Mac OS X
• Last modified on: 1/1/08
• Latest version: 0.2
• Author: janlee

Demos

• Right click anywhere on a page to bring up a menu. Use “Ctrl + Left Click” if you’re Browser doesn’t understand right clicks.
• mooeDit - A This experimental HTML-Editor uses the ddmenu in a Textarea

How to use it

1. Download moo.ddmenu.0.21.js and ddmenu.css. Include them in your page

   <link rel="stylesheet" href="css/ddmenu.css" type="text/css" media="screen" />
   <script type="text/javascript" src="js/mootools-beta-1.2b1.js"></script>
   <script type="text/javascript" src="js/moo.ddmenu.0.2.js"></script>

2. Create the menu-HTML width the items and they’re IDs

   <div class="ddmenu def" id="ddmenu2" style="display:none">
   <ul>
   <li class="title">Menu Title</li>
   <li class="item" id="menu_item1"><a href="#">My item 1</a></li>
   <li class="item" id="menu_item2"><a href="#">My item 2</a></li>
   <li class="item" id="menu_big_item"><a href="#">This is a oversized item...</a></li>
   <li class="sepline"></li>
   <li class="item" id="menu_item_with_icon1"><a class="objects" href="#">Another item</a></li>
   <li class="item" id="menu_item_with_icon2"><a class="letter" href="#">Disabled item</a></li>
   <li class="item" id="menu_item_with_icon3"><a class="umbrella" href="#">With icon</a></li>
   <li class="sepline"></li>
   <li class="item" id="menu_spec_links"><a href="#">Enable on Links</a></li>
   <li class="item" id="menu_spec_texts"><a href="#">Enable on Texts</a></li>
   <li class="item" id="menu_spec_images"><a href="#">Enable on Images</a></li>
   </ul>
   </div>

3. Initialize ddmenu class passing the options. This example calls console.info when a menu item is clicked. (Take a look in the JS-Source for more informations)
   

   function iniz () {
   pagemenu = new DDMenu ('ddmenu2', document, { //document can be the whole page,
   //an element or a parent of elements
   onOpen: function (e) {
   this.enableItems(true); //enable all
   this.enableItems('menu_item_with_icon2',false); //disable menu_item_with_icon2
   },
   
   onItemSelect: function (act_id, act_el, menu_bindon) {
   console.info("menu action -> item id: \"%s\" from: %o in %o", act_id, act_el, menu_bindon)
   }
   });
   }

Version history

• v.0.21 [2/08]
  • Fixes for MooTools 1.2 Beta 2
• v.0.2 [1/08]
  • Correct positioning
  • Scroll-save
  • Ctrl and Shift Switches
  • Fade In
  • CSS-Styles reworked and adapted
• v.0.1 [11/07]
  • Initial Version with a basic menu script structure
  • Event-calls and enableItems() functions
  • Ajusted the when-menu-is-opened events on the system context menu behavoir

7walls

- yellow
- orange
- blue
- cold blue
- steel
- black
- magenta

1280×1024

Downlaod from devianART

Technorati Tags: Applications, Art, Community Art, Contemporary Art, Digital Art, Modern Art, Online Art, Photography, Poetry, Prose, Skins, Themes, Traditional Art, Wallpapers

Due to the popularity of my dualscreen nano wallpaper, I’ve created a pack that contains resolutions in: 1280×1024, 1600×1200, 2560×1024, and 2560×1600. If your monitor resolution isn’t in here, feel free to resize the appropriate image. If you’re going to change anything other than the size/resolution, ask for permission first. Download it if you want the full resolution pack.

Download from deviantART

Technorati Tags: Applications, Art, Community Art, Contemporary Art, Digital Art, Modern Art, Online Art, Photography, Poetry, Prose, Skins, Themes, Traditional Art, Wallpapers

All wallpapers are 1920 x 1200 resolution.

Download from deviantART

Technorati Tags: Applications, Art, Community Art, Contemporary Art, Digital Art, Modern Art, Online Art, Photography, Poetry, Prose, Skins, Themes, Traditional Art, Wallpapers