The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

Reply to this topicStart new topic
> how to implement vertical jqDock menu?
post Jan 29 2009, 12:59 AM
Post #1


Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171


ive come across this neat mac style dock menu system at

i have no idea how to implement it though as im not familiar with referencing script sad.gif

there are 'basic usage' instructions there but i still cant figure out how to do it.

cld someone with knowledge pls paste the exact html, css and script reference for one of the vertical menus on the demo page?

i figure once i see the code that makes it work i can deconstruct it and figure out how it works!

thank you!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
post Jan 29 2009, 04:18 AM
Post #2


Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171

ive replicated the file structure of the demo page, and trying to only keep the vertical menu on the left.

when i remove all the other menu's, the vertical menu on the left becomes horizontal sad.gif

if anyone knows how to keep it vertical, pls let me know!

my html:


  <!-- menu5 can use png32 images that have a black background -->
  <div id='menu5' class='demo'>
    <a href='index.php?dt=1' title='Chat'>
        <img src='images/m5/128_ChatFolder.png' alt='' />
    <img src='images/m5/128_DownloadsFolder.png' alt='Downloads' title='Downloads' />

    <a href='index.php?dt=2' title='Favourites'>
      <img src='images/m5/128_FavouritesFolder.png' alt='' />
    <img src='images/m5/128_MyMusicFolder.png' alt='My Music' title='My Music' />
    <a href='index.php?dt=3' title='My Videos'>
      <img src='images/m5/128_MyVideosFolder.png' alt='' />
    <a href='index.php?dt=4' title='System'>
      <img src='images/m5/128_SystemFolder.png' alt='' />

    <img src='images/m5/128_WebFolder.png' alt='Web' title='Web' />

and css (relating to menu5):

  html, body {width:100%, height:100%;}
/*give menu5 a black background...*/
  body {padding:0px; margin:0px; font-family:arial; font-size:14px; background:#ffffff url(images/black.gif) repeat-y;}
  a, a:link, a:visited, a:hover, a:active {color:#0000ff; text-decoration:none;}
  #page {height:100%;}
  #eop {position:absolute; top:610px; left:0px; font-size: 11px;}
  #pagetitle {clear:left; padding-top:20px; margin-top:0px;}

/*place the various demo menus around the screen (note: 1, 3, 4 and 7 are horizontal; 2, 5 and 6 are vertical)...*/
  #menu1 {position:relative; top:100px; padding-left:131px;}
  /*...menu2 needs enough width to show the shrunken images + border, because it's positioned fully to the right...*/
  #menu2 {position:absolute; top:0px; right:0px; width:50px;}
  #menu3 {position:relative; top:152px; padding-left:131px;}
  #menu4 {position:absolute; top:510px; left:131px;}
  /*if you want to space the images out you can pad them, BUT...
    (a) be aware that for any coefficient other than 1 (linear) this can (will) throw out calculation of the leading edge of the menu
    (b) use a DOCTYPE, otherwise IE will get the spacing wrong
     (c) Opera v9.5 sometimes has problems with the main axis dimension that I haven't managed to solve yet
    for example...*/
  #menu4 img {padding:0px 4px;}
  #menu5 {position:absolute; top:40px; left:0px;}
  /*...menu6 has zero width, so it's actually the left-hand side of the dock that is 200px from the right-hand edge of the viewport...*/
  #menu6 {position:absolute; top:30px; right:200px; width:0px;}
  #menu7 {display:none; position:absolute; top:150px; left:580px;}

/*dock styling...*/
/*docks (div.jqDock) get absolute position, zero padding and margin, and visible overflow; width and height are calculated*/
  /*...set a default dock background colour...*/
  div.jqDock {background-color:transparent;}
  /*...override background colour and/or border for specific demo docks...*/
  #menu2 div.jqDock {border:2px solid #999999; border-right:0px none;}
  #menu3 div.jqDock {border:2px solid #ff9900;}
  #menu4 div.jqDock {background-color:#cccccc; border:1px solid #000000;}
  #menu5 div.jqDock {background-color:#000000;}
  #menu6 div.jqDock {background-color:#e0e0ff; border:3px solid #0000ff;}
  #menu7 div.jqDock {border:1px solid #0000cc;}

/*label styling...*/
/*labels (div.jqDockLabel) only get absolute position and zero margin (with top and left being calculated); the rest is up to you*/
  /*...let's set some defaults...*/
  div.jqDockLabel {border:0px none; padding:0px 4px; font-weight:bold; font-size:14px; font-style:italic; white-space:nowrap; color:#000000; background-color:transparent;}
  div.jqDockLabelLink {cursor:pointer;}
  div.jqDockLabelImage {cursor:default;}
  /*...and some overrides...*/
  /*...give the right-hand vertical a smaller, non-bold, deep red label, on a white background...*/
  #menu2 div.jqDockLabel {color:#cc0000; background-color:#ffffff; padding:1px; font-size:12px; font-weight:normal;}
  /*...and the left-hand vertical (with the black background) a white, smaller, label...*/
  #menu5 div.jqDockLabel {color:#ffffff; padding:0px;}

This post has been edited by rw1: Jan 29 2009, 04:20 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
post Jan 29 2009, 04:22 AM
Post #3

Don't like donuts. Don't do MySpace.

Group: WDG Moderators
Posts: 18,416
Joined: 9-August 06
Member No.: 6

Can you link to your test page?

I don't see 'var opts' this in the code you posted. => Options
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 13th November 2019 - 08:01 PM