Announcement Announcement Module
Collapse
No announcement yet.
jQuery Lavalamp Effect Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • Roth
    Reply to What do you think of my video game cover art?
    Roth
    This is inferior to the original in every way. PD made some very good points already to do with hierarchy, and energy. There are basically three elements, the figure, the name, and the background, so...
    Today, 12:14 AM
  • Roth
    Reply to Logo for a supplement company
    Roth
    This is a bit of a stretch. It's like you saw the H in the weights, ran with it, hit a creative wall and tried really hard to make the rest fit. The logo and name are out of proportion to one another...
    Yesterday, 11:50 PM
  • extraordenary
    Reply to What do you think of my video game cover art?
    extraordenary
    Professional designers either create the images themselves, or get it from someone else with respects to the copyrights. Designers often make sure that the image they have is royalty-free so they don't...
    Yesterday, 11:14 PM
  • graphic91
    Reply to What do you think of my video game cover art?
    graphic91
    Umm...really? I know about the design rules, but where to look first? There's not that much information or "look-at-mes" on it and it's just the cover of a video game. Most people who want to...
    Yesterday, 10:34 PM
  • Lucifer
    Reply to Your thoughts on this logo?
    Lucifer
    I like it. I like the way you've done the spacing.
    Yesterday, 10:32 PM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • jQuery Lavalamp Effect

    Right, after several fruitless hours I figured I would trouble the kind people of GDF for their thoughts - I basically want a coloured border on the left of the currently active page <LI>, and I want this to smoothly follow the mouse up and down the <UL>. Trouble comes when I want to embed a <UL> in an <LI> element for a sub menu... turns out, things break

    I have tried simply using a class to denote the submenu items, rather than another <UL>, but then I cannot specify a different rollover effect for those <LI>s.

    Oh, and the current page/subpage should kinda be highlighted too lol.

    My HTML/CSS at the moment is:
    Code:
    div#menubox { padding:34px 0px; background:#2d2d2d; }
    div#menubox ul#menu { list-style:none; position:relative; }
    div#menubox ul#menu li { font-size:10px; padding:0px 0px 0px 30px; width:190px; }
    div#menubox ul#menu li a { position:relative; z-index:10; color:#878787; display:block; height:16px; padding:1px 0px; }
    div#menubox ul#menu li ul#submenu { list-style:none; position:relative; margin-left:-30px; }
    div#menubox ul#menu li ul#submenu li { font-size:10px; padding:0px 0px 0px 45px; width:170px; }
    div#menubox ul#menu li ul#submenu li a { position:relative; z-index:20; color:#6daee1; display:block; height:16px; padding:1px 0px; }
    
    div#menubox ul#menu a.current { margin:0px 0px 0px -30px; padding:1px 0px 1px 6px; width:214px; border-left:25px solid #000000; background:url('sh/im/page_arrow.png') center right no-repeat; }
    div#menubox ul#menu ul#submenu a.current { margin:0px 0px 0px -45px; padding:1px 0px 1px 6px; width:199px; border-left:40px solid #6daee1; }
    div#menubox ul#menu div.ahover { position:absolute; z-index:5; border-left:25px solid #000000; background:url('sh/im/page_arrow.png') center right no-repeat; margin-left:12px; }
    div#menubox ul#menu ul#submenu div.ahover { position:absolute; z-index:15; border-left:40px solid #6daee1; }
    
    ***********************************
    
    <div id="menubox">
        <ul id="menu">
            <li><a href="#">Welcome</a></li>
            <li><a href="#">Customers &amp; Projects</a></li>
            <li><a href="#">Product Range</a></li>
            <li><a href="#">How We Work</a></li>
            <li><a href="#" class="current">Company Information</a>
                <ul id="submenu">
                    <li><a href="#">Company History</a></li>
                    <li><a href="#" class="current">Company Structure</a></li>
                    <li><a href="#">Mission, Vision &amp; Values</a></li>
                    <li><a href="#">Financials</a></li>
                    <li><a href="#">Careers &amp; Vacancies</a></li>
                    <li><a href="#">Location</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">News</a></li>
        </ul>
    </div>
    I have tried both lavalamp and ahover plugins, are there any others available? Or any ideas for how to achieve this? Other than a plain-jane CSS rollover of course; that's no fun

  • #2
    The only way your going to be able to achieve that effect is using javascript or flash. I would recommend looking into JQuery or YUI. You might even get lucky and find a similar effect that has already been developed using those libraries. Otherwise your going to need to get your hands a little dirty in the wonderful world of javascript programming. I haven't developed anything similar although if I had I would gladly share the code. YUI has very powerful animation library that would be perfect for this type of thing.
    Last edited by tZ; 05-08-2009, 06:42 PM.

    Comment


    • #3
      http://apycom.com/ seem to have figured it out. Would love to know exactly how they didnt without having to pay them.... At quick glance it seems to be in the CSS by using compound selectors.

      Comment

      Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc.
      Working...
      X