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

  • PanToshi
    Reply to Seeking critique for some of my artworks
    PanToshi
    Neat stuff, but not graphic design per se, more digital art which is more subjective and thus hard to critique. I like your line work pieces much more than the vector polygon one - the Japanese-esque...
    Yesterday, 11:40 PM
  • B
    Reply to Adobe ─░llustrator Please Advice
    B
    There is a quick way to roughly reproduce the artwork in Illustrator, but there will still be lots of clean-up and reassigning the colors to be three separate spot colors.

    I'm using Illustrator...
    Yesterday, 11:18 PM
  • itouch
    Reply to Adobe ─░llustrator Please Advice
    itouch
    I dont need to learn all program.I just need to learn this process.I will repeat always.Thats all what they want.Other designs are same like this one.So i will learn step by step from your video and i...
    Yesterday, 11:07 PM
  • B
    Reply to Adobe ─░llustrator Please Advice
    B
    I'm sorry itouch, but there's really no way to teach you how to use Illustrator that quickly. Illustrator is a moderately difficult program to learn. It takes time, and there are no shortcuts.
    ...
    Yesterday, 10:45 PM
  • PrintDriver
    Reply to LOGO FEEDBACK
    PrintDriver
    I think this is one of the nicer logos seen here in a while. The typography is nice.
    I don't think it looks at all like the Swiss logo KK noted, other than being in a circle.
    And I echo B's...
    Yesterday, 09:38 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