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

  • Juniberry
    Reply to Wordpress theme and plugin help for print company.
    Juniberry
    I should also mention that a theme that supports the visual composer would be excellent....
    Today, 05:54 AM
  • Juniberry
    Wordpress theme and plugin help for print company.
    Juniberry
    Howdy-doody fellas and bellas, I'm just after some quick advice from those of you out there with plenty of experience choosing and working with WP themes.

    Attached is a template/guide to...
    Today, 05:53 AM
  • arielr190
    Reply to Opinions on My Logo?
    arielr190
    the business is online. print-wise, the smallest it will ever get is a business card.
    Today, 03:53 AM
  • lowfatgraphics
    Reply to UX tips
    lowfatgraphics
    Hmm This isn't UX, it is UI... Its common to get the two mixed up but having worked in UX and now UI, there is a pretty big difference.

    Now from a UI stand point, there isn't much here...aside...
    Today, 03:52 AM
  • lowfatgraphics
    Reply to Candy Shop Logo
    lowfatgraphics
    "S" is tough to read-- looks interesting. the glossy highlights seem to have multiple light sources tho...might want to double check.
    Today, 03:43 AM
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, 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 © 2014 Mediabistro Inc. call (212) 389-2000 or email us
      Working...
      X