Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › keeping the width of the parent in a lava lamp menu

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 30, 2010 at 2:32 pm #29801
    limenet
    Participant

    Hi,

    At the moment I’m working on a design, which should use as most css3 as possible (and if not, jQuery). While building the navigation, I decided to make it support three levels (multilevel solution by webdesignerwall) and use the nettuts lava lamp menu. When I added the multilevel stuff, I noticed, that the "blob" (the sliding thing) gets the width of the sub-level. This is logic, when you look at the code. But how could I prevent it, by e.g. keeping the width of the parent li-element?
    The HTML (without the blob – see demo at nettuts)

    Code:

    and the (litte modified) jQuery

    Code:
    (function($) {

    $.fn.spasticNav = function(options) {

    options = $.extend( {
    overlap : 0,
    speed : 500,
    reset : 500,
    color : ‘#0b2b61’,
    easing : ‘easeOutExpo’,
    blobId : ‘blob-noId’
    }, options);

    return this
    .each(function() {

    var nav = $(this), currentPageItem = $(‘#active’, nav), blob, reset;
    $(‘

  • ‘).css(
    {
    width : currentPageItem.outerWidth(),
    height : currentPageItem.outerHeight()
    + options.overlap,
    left : currentPageItem.position().left,
    top : currentPageItem.position().top
    – options.overlap / 2,
    backgroundColor : options.color
    }).appendTo(this);

    blob = $(‘#’+options.blobId+”, nav);

    $(‘li:not(#’+options.blobId+’)’, nav).hover(function() {
    // mouse over
    clearTimeout(reset);
    blob.animate( {
    left : $(this).position().left,
    width : $(this).width()
    }, {
    duration : options.speed,
    easing : options.easing,
    queue : false
    });
    }, function() {
    // mouse out
    reset = setTimeout(function() {
    blob.animate( {
    width : currentPageItem.outerWidth(),
    left : currentPageItem.position().left
    }, options.speed)
    }, options.reset);

    });

    }); // end each

    };

    })(jQuery);

If anyone needs the css as well, just have a look at my related topic on this forum.

Thank you very much for your help!, :)
Linus

July 31, 2010 at 1:28 pm #80779
limenet
Participant

UPDATE
I added a class (first-level) to all direct childs of #nav and modified the js a bit, so istead of

Code:
$(‘li:not(#’+options.blobId+’)’, nav).hover(function() {

it’s now

Code:
$(‘li.first-level:not(#’+options.blobId+’)’, nav).hover(function() {

this works, but I want to get rid of this .first-level thing, because it’s not dynamic. When I try something like

Code:
$(‘#nav > li:not(#’+options.blobId+’)’, nav).hover(function() {

it doesn’t do anything. Why that? (or how can I only select the first level of the navigation?)
Oh and just for reference, the html

Code:
<div id="navigation">
<ul id="nav">
<li id="active" class="first-level">
<a href="#">Home</a>
</li>
<li class="first-level">
<a href="#">Portfolio</a>
<ul>
<li>
<a href="#">Webdesign</a>
</li>
<li>
<a href="#">Webdevelopment</a>
</li>
<li>
<a href="#">Photography</a>
</li>
<li>
<a href="#">Other</a>
<ul>
<li>
<a href="#">Print</a>
</li>
<li>
<a href="#">Logo</a>
</li>
<li>
<a href="#">Copywriting</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="first-level">
<a href="#">Contact</a>
<ul>
<li>
<a href="#">Hire Me!</a>
</li>
</ul>
</li>
<li class="first-level">
<a href="#">About</a>
</li>
</ul>
</div>

UPDATE
I made a reduced test case, whicht just does the following

Code:
alert($(‘#nav > li’).text());

– and it works as expected – why that? (and why the other one not?)

Any help for this (probably greenhorn-like) problem is highly appreciated!,
Linus

July 31, 2010 at 3:32 pm #80781
limenet
Participant

So finally I fixed it! :D
I added the class .first-level before creating the lava lamp stuff

Code:
$(‘#nav > li’).addClass(‘first-level’);

So this is solved!
But if someone knows why the other solution didn’t work – thanks for explaining! :)

  • Author
    Posts
    • Viewing 3 posts - 1 through 3 (of 3 total)