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

  • SandraGenJobs
    Reply to Filling your portfolio.
    SandraGenJobs
    You can always work for a small amount of money on sites like Freelancer or Odesk or Elance. Or you can always do some pro bono work for local charities. Take a look at this article, I think it might...
    Today, 03:02 AM
  • PanToshi
    Reply to Heyo! Looking for a portfolio crit.
    PanToshi
    Hi jc 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...
    Today, 02:59 AM
  • PanToshi
    Reply to Hi everybody
    PanToshi
    Hi daniel 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...
    Today, 02:58 AM
  • PanToshi
    Reply to Need software recommendation
    PanToshi
    Peebs: It really depends what you want to do. Are you looking to "draw" freestyle illustrations? Create brochures and posters? Design billboards or vehicle wraps? Print 3D forms? Code websites?...
    Today, 02:57 AM
  • jcshalo
    Heyo! Looking for a portfolio crit.
    jcshalo
    Hey guys, I'm new to GDF and was wondering if I could get feedback on my work. My work is at http://jcshalo.prosite.com/. Glad to be a part of the community now and look forward to growing as a designer....
    Today, 02:28 AM

Powered by mediabistro.com
Mediabistro Creative Sites Mediabistro Creative Sites 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 © 2015 Mediabistro Inc.
      Working...
      X