This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Dock Menu

OSX inspired web menus

Local: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
7
<!-- DC Dock Menu CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/menus/dock/css/dc_dock_menu.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Dock Menu JS -->
<script type="text/javascript" src="dcodes/menus/dock/js/fisheye-iutil.min.js"></script>
<script type="text/javascript" src="dcodes/menus/dock/js/dc_dock_menu.js"></script>

Hosted: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
7
<!-- DC Dock Menu CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/menus/dock/css/dc_dock_menu.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Dock Menu JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/menus/dock/js/fisheye-iutil.min.js"></script>
<script type="text/javascript" src="http://cdn.dcodes.net/2/menus/dock/js/dc_dock_menu.js"></script>

Horizontal style

HomeHome ContactContact TerminalTerminal" MusicMusic VideoVideo ProfileProfile CalendarCalendar LinksLinks RSSRSS DownloadsDownloads

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- DC Menu Dock Settings: horizontal style -->
<script type="text/javascript">
    $(function () {
    // Dock initialize
    $('#dock').Fisheye({
        maxWidth: 30,
        items: 'a',
        itemsText: 'span',
        container: '.dock-container',
        itemWidth: 45,
        proximity: 60,
        alignment: 'left',
        valign: 'bottom',
        halign: 'center'
    });
});
</script>
<!-- DC Menu Dock Start -->
<div id="dock" class="dc_dockmenu">
  <div class="dock-container">
    <a class="dock-item" href="#"><span>Home</span><img src="dcodes/menus/dock/images/home.png" alt="Home" /></a>
    <a class="dock-item" href="#"><span>Contact</span><img src="dcodes/menus/dock/images/email.png" alt="Contact" /></a>
    <a class="dock-item" href="#"><span>Terminal</span><img src="dcodes/menus/dock/images/terminal.png" alt=Terminal" /></a>
    <a class="dock-item" href="#"><span>Music</span><img src="dcodes/menus/dock/images/music.png" alt="Music" /></a>
    <a class="dock-item" href="#"><span>Video</span><img src="dcodes/menus/dock/images/video.png" alt="Video" /></a>
    <a class="dock-item" href="#"><span>Profile</span><img src="dcodes/menus/dock/images/profile.png" alt="Profile" /></a>
    <a class="dock-item" href="#"><span>Calendar</span><img src="dcodes/menus/dock/images/calendar.png" alt="Calendar" /></a>
    <a class="dock-item" href="#"><span>Links</span><img src="dcodes/menus/dock/images/link.png" alt="Links" /></a>
    <a class="dock-item" href="#"><span>RSS</span><img src="dcodes/menus/dock/images/rss.png" alt="RSS" /></a>
    <a class="dock-item" href="#"><span>Downloads</span><img src="dcodes/menus/dock/images/downloads.png" alt="Downloads" /></a>
  </div>
</div>
<!-- DC Menu Dock End -->

Vertical style (<<< glued on the top left)

HomeContactTerminalMusicVideoProfileCalendarLinksRSSDownloads

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- DC Menu Dock Settings: vertical style -->
<script type="text/javascript">
    $(function () {
    var jqDockOpts = {
        align: 'left',
        duration: 200,
        labels: 'tc',
        size: 42,
        distance: 120,
        maxWidth: 30
    };
    $('#jqDock').jqDock(jqDockOpts);
});
</script>
<!-- DC Menu Dock Start -->
<div id="dockContainer" class="dc_dockmenu">
  <ul id="jqDock">
    <li><a class="dockItem" href="#"><img src="dcodes/menus/dock/images/home.png" alt="Home" title="Home" /></a></li>
    <li><a class="dockItem" href="#"><img src="dcodes/menus/dock/images/email.png" alt="Contact" title="Contact" /></a></li>
    <li><a class="dockItem" href="#"><img src="dcodes/menus/dock/images/terminal.png" alt="Terminal" title="Terminal" /></a></li>
    <li><a class="dockItem" href="#"><img src="dcodes/menus/dock/images/music.png" alt="Music" title="Music" /></a></li>
    <li><a class="dockItem" href="#"><img src="dcodes/menus/dock/images/video.png" alt="Video" title="Video" /></a></li>
    <li><a class="dockItem" href="#"><img src="dcodes/menus/dock/images/profile.png" alt="Profile" title="Profile" /></a></li>
    <li><a class="dockItem" href="#"><img src="dcodes/menus/dock/images/calendar.png" alt="Calendar" title="Calendar" /></a></li>
    <li><a class="dockItem" href="#"><img src="dcodes/menus/dock/images/link.png" alt="Links" title="Links" /></a></li>
    <li><a class="dockItem" href="#"><img src="dcodes/menus/dock/images/rss.png" alt="RSS" title="RSS" /></a></li>
    <li><a class="dockItem" href="#"><img src="dcodes/menus/dock/images/downloads.png" alt="Downloads" title="Downloads" /></a></li>
  </ul>
</div>
<!-- DC Menu Dock End -->


© TemplateAccess