The Dock could be called as one of the vital features of graphical user interface (GUI) of Mac operating system. It is also used in several Linux distributions and now you could even use them with a couple of windows operating systems as well. These are used to launch different apps and switch between several running applications including the taskbar over the windows. If you happen to be the fan of Mac, you would certainly love to create dock menu with the help of jQuery and CSS.
You have different options in Jquery library wherein you could find fisheye component from the myicons and interface, which is found in two dock position- bottom and top. Let’s check out some of the tips to create dock menu options using jQuery and CSS.
euDock Menu
It is basically a new and cross platform open source (LGPL) javascript emulation found for the Mac based operating system – MacOsX dock bar. This dock menu is a popular option for Mac lovers owing to the presence of several added features found in it. It is known to have a number of pages align options, which include -screening borders, to fixed position found inside the screen and the feature of -to HTML object. Also, you could get to see Png alpha and support for fading over the browser – internet explorer. The other features include object oriented icons, which could be programmed along with the customizable Venus hill function. Lastly, you have other options for Mouse Click, Mouse Up, Mouse Move, Mouse Down events, etc.
CSS Dock Menu jQuery Fisheye
This dock menu design layout uses fisheye component and jQuery library from the interface while several other from My icons, which is found in two different dock positions – both bottom and top. It is compatible over all the latest web browsers including IE 7, IE 6, Firefox 2, Safari 2 and Opera 9. Though with Safari you may encounter some minimal rendering issues, yet looking at the overall picture, things really could be called as a good deal to crack. You could easily download the source files from internet, where you get the readymade codes, which you simply have to copy and paste to see the results. This will follow inserting the codes along with configuring it as directed to you. You also have the option of adding different things over the CSS Dock Menu jQuery Fisheye.
MacStyleDock Menu
Another dock menu for you that is seen employing jQuery and CSS is MacStyleDock Menu. Though to achieve your desired effects using JavaScript could be called as a difficult affair, however, with the MacStyleDock function you help this feature to be executed without much hassle. It is seen compatible to different web browsers including Firefox, IE, Opera, Safari and Konqueror 3.5 on Ubuntu Linux. Once you download the codes from web and then upload it over your site make sure you link it with your web page with a right code. The code for your dock could be added to your document tree under the current node. Make sure you build up an element that can contain the doc with the code of div id.
You can then create a dock with a new JavaScript object, make sure the dock’s document tree node should already exist there when you see the constructor being called. This could be carried out either by incorporating the JavaScript code below the node over the document source or simply with the help of the constructor while document is being loaded. The other way to work out is simply by using the OnloadScheduler. The constructor has five different parameters. These include node, image Details (name, extension, sizes, on click), maximum Size, minimum Size and range.
JQ Dock Menu
The jQuery plugin simply helps in converting the photos in a Mac based Dock menu with different icons, which expand over the rollover. It works with different images or images within the anchors and carries a wide range of configuration options. The jQ Dock Menu renders a number of things like horizontal/vertical alignment, positioned labels, menu fade in, initial expansion and instant freezing, inactivity timeouts and wake up calls, image expansion from mid point and edge. There are several custom events and callback hooks, which could be employed to control the way the Dock works and create a couple of interesting effects. Owing to the rich features and options the jQ Dock Menu has emerged out as a popular dock menu among the Mac lovers.
Final word
Playing with different dock menu as discussed above using jQuery and CSS is really a fun thing. All you need to do is to explore the ways of doing so. There are ready made codes available over the web, which you could use and embark with the dock menu using the jQuery and CSS.
