Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #13045

    Hi,

    I have set a new width of 180px for this CSS:

    #top .catnav li .sub-menu a {

    width: 180px;

    }

    to make the dropdrow submenu items wider for more text:

    http://i45.tinypic.com/vp8c1u.jpg

    So far, so good – but where can I change the corresponding jquery (?) effect, when the dropdowns are smoothly opening – there is obviously still set the 150px standard width?

    Thanks in advance!

    #77587

    Hi!

    Try to adjust the width value of following code in style.css too:

    #top .catnav li ul a {
    float: left;
    height: auto;
    padding: 0 10px;
    text-align: left;
    width: 150px;
    }

    Best regards,

    Peter

    #77588

    thanks, but this has no effect. As far as I see it, it has something to do with jQuery/javascript.

    I found this in custom.js:

    //smooth drop downs

    jQuery(".nav li, .catnav li").each(function()

    {

    var $sublist = jQuery(this).find('ul:first');

    jQuery(this).hover(function()

    {

    $sublist.stop().css({overflow:"hidden", height:"auto", display:"none"}).slideDown(400, function()

    {

    jQuery(this).css({overflow:"visible", height:"auto"});

    });

    },

    function()

    {

    $sublist.stop().slideUp(400, function()

    {

    jQuery(this).css({overflow:"hidden", display:"none"});

    });

    });

    });

    }

    but this says just nothing to me ;-)

    But what I mean is, that – when hovering over the main navigation items – the drop downs unfold themselves from a certain width (150px) now to my via CSS set 180px width.

    Due to my site is still in maintenance mode and cannot go online now, I have shown this phenomenon in a small video here:

    http://youtu.be/_211Yd40zKo

    Look at the dropdowns – especially at 0:19 -, they have first a width of 150px and then unfold themselves to 180px.

    They should drop down with 180px from the beginning of the hovering.

    I guess, there is a wrong width of 150px in this “smoothing” effect of the drop downs or something like that …

    #77589

    uff, really hard work for someone who is not so familiar with CSS & Co. ;-)

    I have now looked at all styles, which sounds like belonging to navigation and changed there the different widths. With such try and error I found out that this

    #top .catnav ul {

    display:none;

    position:absolute;

    top:74px;

    width:172px;

    left:-2px;

    }

    needs to be changed, too:

    you need to add these 30px, which I used to make the dropdowns wider, to the width of this (172px original):

    #top .catnav ul {

    display:none;

    position:absolute;

    top:74px;

    width:202px;

    left:-2px;

    }

    and now the dropdowns are 180px in every way :-)

    #77590

    Hey!

    Glad that you solved the problem.

    Regards,

    Peter

    #77591

    Hello,

    Good thing you found the solution. :)

    Regards,

    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Changing width of dropdown submenu items and its jQuery effect?’ is closed to new replies.