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

Advertisement Advertisement Module
Collapse

Latest Topics Latest Topics Module
Collapse

  • PrintDriver
    Reply to free print templates resources for commercial use
    PrintDriver
    The print templates I use are free. They are provided by the printers I use and are simply outlines showing trim, bleed and safety. The rest of it gets designed. If I pay a designer to design, I don't...
    Today, 01:02 AM
  • PrintDriver
    Reply to Stroke for weight control?
    PrintDriver
    Rich black is not an option for text that small and in that quantity (I'm assuming there are other pages.) I'm assuming you are plate printing, but even with digital you want to be careful. With digital,...
    Today, 12:56 AM
  • mcbennet
    Adobe Typekit Subscription--worth it?
    mcbennet
    I'm a fledgling designer working towards building a portfolio, but I desperately need solid, reliable fonts to work with. My budget is really tight and I'm struggling to find free and useful fonts on...
    Today, 12:10 AM
  • KitchWitch
    Reply to older_brother saying hi from London, UK
    KitchWitch
    Hi Older and welcome to GDF.

    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done anything...
    Yesterday, 11:46 PM
  • B
    Reply to what should I call myself in masthead?
    B
    Whether you supervise anyone or not, if you're coordinating and directing the design, photography and graphics for a magazine that makes you that magazine's art director.
    Yesterday, 10:22 PM

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, 05: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 © 2015 Mediabistro Inc.
      Working...
      X