NavDock jQuery Plugin 1.2

Demo 01

Without ActiveMenu, tips desactived and ajax set to false.

Demo 02

With ActiveMenu, tips and simple Ajax Request (see main.js)

Ajax Content

Click on an icon to display his content (Demo NavDock)

Download

licence : http://creativecommons.org/licenses/by-sa/2.0/be/


How to ?

HTML

1) Menu structure

Show Plain Text
  1.  
  2. <!-- HTML FILE -->
  3.  
  4. <ul id="targetMenu">
  5. <!-- use <li class="navActive"> to set active icon menu -->
  6.   <li>
  7.     <a href="#">
  8.       <!-- alt attribute will be catch as tips for the navDock menu -->
  9.       <img src="my_icon.png" alt="tipsName" />
  10.     </a>
  11.   <li>
  12.   <!-- ...etc..for each icon -->
  13. </ul>
  14.  

2) Link Plugin Files

Show Plain Text
  1. <!-- Head of your html file -->
  3.  
  4. <!-- Add Scripts -->
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  6. <script src="path_to_navDock.js" type="text/javascript"></script>
  7.  
  8. <!-- Add Css -->
  9. <link href="path_to_navDock.css" rel="stylesheet" type="text/css" />
  10.  
  11. </head>

3) Activation

Show Plain Text
  1. <!-- Activate navDock -->
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.  
  5.   $('#targetMenu').navDocks({
  6.     fromSize:64, // Icon Size "normal" : Interger
  7.     toSize:128, // Icon Size "over" : Integer
  8.     speed:300, // Speed : Integer or 'slow' / 'fast'
  9.     tips:true, // Tips : TRUE / FALSE
  10.     activeMenu:false, // ActiveMenu : TRUE / FALSE
  11.     ajax:true // Using Ajax : TRUE / FALSE
  12.   });
  13.  
  14. });
  15. </script>

CSS

Show Plain Text
  1. /*START*/
  2.  
  3. /*Style for menuContainer*/
  4. #targetMenu{
  5. width:448px;
  6. height:128px; /*max height depend of max size icon (mouseOver) and size of navActive Background.
  7.                 Here no activeNav => ex: 128px+0px = 128px */
  8. margin:0 auto;
  9. background-image:url(../img/bgMenu.png);
  10. background-repeat:repeat-x;
  11. background-position:0 bottom;
  12. }
  13.  
  14. /*Style Hack IE7*/
  15. #targetMenu li{
  16. *float:left; /*IE 7 Hack with Float + Margin-Top */
  17. }
  18.  
  19. /*Style for link Active icon*/
  20. #targetMenu li.navActive a{
  21. background-image:url(../img/navActive.png);
  22. background-repeat:no-repeat;
  23. background-position:center bottom;
  24. }
  25.  
  26. /*Style for link icon*/
  27. #targetMenu li a{
  28. position:relative;
  29. display:block;
  30. float:left;
  31. width:64px; /* size of the icon when mouse is out */
  32. height:64px; /* size of the icon when mouse is out */
  33. margin-top:64px; /*result of (iconSize_Over - iconSize_Out) => ex : 128px - 64px = 64px*/
  34. text-decoration:none;
  35. }
  36.  
  37. /*Style for icon*/
  38. #targetMenu li a img{ width:100%;}
  39.  
  40. /*Style for tips*/
  41. #targetMenu li span.tips{
  42. position: absolute;
  43. display:block;
  44. top:10px; left:70px;
  45. padding:5px;
  46. background-color:#F0F0F0;
  47. color:#448ab0;
  48. text-decoration:none;
  49. font-weight:bold;
  50. }
  51.  
  52. /*END*/

Added by Denis P. at Sat, Mar 5th 2011, 14:34

| More

Comments (9)

hostcrz said :

awesome share dude nice . i realy love it



www.hostcrz.com

Wed, May 9th 2012, 04:56

Denis said :

@Killer ajax call is handle by yourself. In the demo02 I use main.js to handle the ajax.

The ajax parameter determines if you handle the click with an ajax request or not.

You have to write an handler for the ajax call.
bind a function on the click event and handle your ajax request using your jsp file or whatever.

in main.js I use this :
$menu1.find('li a').bind('click', ajaxCategorie);




Tue, Mar 22nd 2011, 19:47

commune_killer said :

Hi
Really appreciate the work. Quick question you are making an ajax call and passing the inded. What if i want to pass the jsp file name and not the index

Sun, Mar 20th 2011, 09:43

Cyber said :

@Denis:
Yes, I mean without the ajax. I will try the version 1.1 now. Thank you for the good work and the quick response.

Tue, Sep 14th 2010, 15:12

Denis said :

@Cyber : use the 1.1 version and take a look at the demo_01.html

It works now with regular link. But still you don't have the last animation icon.

Thanks to notice me this minor bug ;)

Tue, Sep 14th 2010, 11:35

Denis said :

and of course, you have to deal with the active class ourself. Add class="navActive" on our "active" <li> (only if you use activeMenu)

Mon, Sep 13th 2010, 22:28

Denis said :

hi Cyber,

I presume "a regular link" mean with no ajax request. Is'nt it ?

It works without ajax but you don't have the last animation (icon moves up and down)

Mon, Sep 13th 2010, 22:20

Cyber said :

This is awesome. I just have one question. Can I use the demo01 to open regular <a href> links? I tried but did not work!

Mon, Sep 13th 2010, 22:10

Trebur said :

Great thanks

Wed, Sep 8th 2010, 08:14