0

I can't think of how this thing is called and so I can't find any example on google, I'll try to explain my vision best I can.
I want to have a list of square divs, each has contant (but that's not the point), so the divs are standing in a line from right to left and the one on the center of the screen is the biggest of all, and I have a way of moving this list of divs to the left or to the right, and so the divs are either getting bigger (if they are near the center) or getting smaller (or not visable at all as they move to the side).

it loos something like RocketDock menu if u know it -
http://prameg.ucoz.com/_fr/0/8939033.jpg

can anyone tell me how is this thing called?! and if u have a link to a code or example please share!
thank you!

2
Contributors
3
Replies
5
Views
5 Years
Discussion Span
Last Post by blinkey
0

I have only used a basic horizontal menu but it is well documented on the jqdock site.

You need to add this in the head.

<script type='text/javascript' src='PATH TO/jquery.jqDock.js'></script>

For the html in my usage was easy.

<div id='page'>
  <div id='menu'>
      <?php if ($page_id != 1) { ?>
    <a href='?page=home' title=''>
      <img src="<?php echo $theme_menu ?>homebird_150_1.png" alt='home' />
    </a>
      <?php } ?>
       <?php if ($page_id != 2) { ?>
    <a href='?page=joe' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_1_130_cam.png" alt='joe' />
    </a>
      <?php } ?>
      <?php if ($page_id != 3) { ?>
    <a href='?page=dave' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_2_130_sue.png" alt='dave' />
    </a>
      <?php } ?>
      <?php if ($page_id != 4) { ?>
      <a href='?page=gallery' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_7_130_gal.png" alt='gallery' />
    </a>
      <?php } ?>
      <?php if ($page_id != 5) { ?>
      <a href='?page=shop' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_3_130_sho.png" alt='shop' />
    </a>
      <?php } ?>
      <?php if ($page_id != 6) { ?>
      <a href='?page=events' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_6_130_eve.png" alt='events' />
    </a>
      <?php } ?>
      <?php if ($page_id != 7) { ?>
      <a href='?page=contact_us' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_10_130_con.png" alt='contact' />
    </a>
      <?php } ?>
      <?php if ($page_id != 8) { ?>
      <a href='?page=links' title=''>
      <img src="<?php echo $theme_menu_new ?>fbird_11_130_lin.png" alt='contact' />
    </a>
      <?php } ?>
  </div>
</div>

Then in my scripts file I used this to configure it.

/*
* This function sets the parameters for the jqdock menu effect on the front page.
*/
jQuery(document).ready(function($){
                      // set up the options to be used for jqDock...
                      var dockOptions =
                        { align: 'bottom' // horizontal menu, with expansion UP/DOWN from the middle
                        , labels: 'tr' // add labels (override the 'tl' default)
                        , size: 95  // set the maximum minor axis (horizontal) image dimension to 36px
                        , distance: 100 // extend distance to compensate for padding
                        };
                      // ...and apply...
                      $('#menu').jqDock(dockOptions);
                    });

There are more configuration options on the site I believe.

Have fun with it :)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.