Grow your CSS skills. Land your dream job.

Magicline troubles

  • # February 28, 2010 at 1:51 pm

    Hi! I’m having some trouble getting the Magicline: http://css-tricks.com/jquery-magicline-navigation/ working in my wordpress-theme. I’ve basically added all the code as given in the demo. I’ve accomplished everything except the magicline itself.
    Here’s my blog (under construction) http://blog.bashingdesigns.com
    The code looks like this:
    CSS:

    Code:
    /*navigation*/
    .nav-wrap { float:right; width:515px; margin-top:90px; border-bottom: 5px solid #474545;}

    .group:after { visibility: hidden; display: block; font-size: 0; content: ” “; clear: both; height: 0; }
    *:first-child+html .group { zoom: 1; } /* IE7 */

    #example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; }
    #example-one li { display: inline; }
    #example-one li a { color: #474545; font-size: 12pt; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
    #example-one li a:hover { color:#777777; }
    #magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }
    .current_page_item a, .current_page_item_two a { color: white !important; }

    /*end navigation*/

    Link to scripts (Yes they’re in a map under the template called "js"):

    Code:


    and finally the markup:

    Code:

    Would really appreciate some help with this since I’m kinda new to WP and JS-implementation.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".