WordPress.org

Ready to get started?Download WordPress

Forums

Problem with JS menu drop down length (4 posts)

  1. Chateaupoulet
    Member
    Posted 6 months ago #

    Hi there,

    I'm having a problem setting the length of a js drop down menu. I have adjusted it before successfully using a menu.css but cannot seem to make it work now. The site is http://www.hottotrotracingclub.com and the menu in question is Horses.

    This is the code in menu.css:

    'ul.sdt_menu li div.sdt_box_horses {
    width:210px;
    }ul.sdt_menu li div.sdt_box_horses {
    height:1800px;}
    ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#ebdc9d;'

    Setting the length at 1800 causes the menu to drop down to 1800 but then "bounce back up" to a height that leaves the last horse out of the list.

    Is there anything else I need to provide?

    Hope this makes sense and thank you for any help you can give.

  2. wpismypuppet
    Member
    Posted 6 months ago #

    Yes... it is a JavaScript menu, so you'll probably need to adjust the JavaScript as well to reflect the new height. Once JavaScript start to play with an element's styles, the CSS file controlling those styles are overridden because JavaScript will then make inline styles. It works on the first drop down, but JS takes over from there.

    However I strongly advise you to find a better menu system. If JavaScript is disabled (which a lot of people do for security) your website is rendered completely useless. Not to mention SEO will suffer as crawlers have a harder time with JS menus. Many of your pages might not get registered with Google and the likes.

    JavaScript is nice to enhance certain aspects of a website, but it should never be used as the only means of functionality.

  3. Chateaupoulet
    Member
    Posted 6 months ago #

    Thank you very much for that. I'll look at the JS again and explore alternative menu systems for the future.

  4. Chateaupoulet
    Member
    Posted 6 months ago #

    Playing around with the JS but it seems to have no effect. I'm not at all experienced with it so I must be missing something.

    The Trainer menu is working correctly so I copied the JS for that for the Horses menu, but no change. Menu.js code:

    ' $(function() {
    /**
    * for each menu element, on mouseenter,
    * we enlarge the image, and show both sdt_active span and
    * sdt_wrap span. If the element has a sub menu (sdt_box),
    * then we slide it - if the element is the last one in the menu
    * we slide it to the left, otherwise to the right
    */
    $('#sdt_menu > li').bind('mouseenter',function(){
    var $elem = $(this);
    $elem.find('img')
    .stop(true)
    .animate({
    'width':'133px',
    'height':'133px',
    'left':'0px'
    },400,'easeOutBack')
    .andSelf()
    .find('.sdt_wrap')
    .stop(true)
    .animate({'top':'60px'},1000,'easeOutBack')
    .andSelf()
    .find('.sdt_active')
    .stop(true)
    .animate({'height':'60px'},300,function(){
    var $sub_menu = $elem.find('.sdt_box');
    var $sub_menu_trainer = $elem.find('.sdt_box_trainer');
    var $sub_menu_membership = $elem.find('.sdt_box_membership');
    var $sub_menu_about = $elem.find('.std_box_about');
    var $sub_menu_horses = $elem.find('.std_box_horses');
    var $sub_menu_gallery = $elem.find('.std_box_gallery');

    if($sub_menu_membership.length)
    {
    $sub_menu_membership.show().animate({'top':'80px','height':'200px','width':'185px'},200);
    }
    else if($sub_menu_trainer.length)
    {
    $sub_menu_trainer.show().animate({'top':'80px','height':'275px','width':'160px'},200);
    }
    else if($sub_menu_about.length)
    {
    $sub_menu_about.show().animate({'top':'80px','height':'80px','width':'150px'},200);
    }
    else if($sub_menu_horses.length)
    {
    $sub_menu_horses.show().animate({'top':'80px','height':'600px','width':'150px'},200);
    }
    else if($sub_menu_gallery.length)
    {
    $sub_menu_gallery.show().animate({'top':'80px','height':'80px','width':'150px'},200);
    }
    else if($sub_menu.length)
    {
    var left = '133px';
    if($elem.parent().children().length == $elem.index()+1)
    left = '-133px';
    $sub_menu.show().animate({'top':'80px','height':'225px'},200);
    }
    });
    }).bind('mouseleave',function(){
    var $elem = $(this);

    var $sub_menu = $elem.find('.sdt_box');
    var $sub_menu_trainer = $elem.find('.sdt_box_trainer');
    if($sub_menu_trainer.length)
    {
    $sub_menu_trainer.hide().animate({'top':'0','height':'0'},200);
    }
    else if($sub_menu.length)
    {
    $sub_menu.hide().animate({'top':'0','height':'0'},200);
    }
    var $sub_menu_horses = $elem.find('.sdt_box_horses');
    if($sub_menu_horses.length)
    {
    $sub_menu_horses.hide().animate({'top':'0','height':'0'},200);
    }
    else if($sub_menu.length)
    {
    $sub_menu.hide().animate({'top':'0','height':'0'},200);
    }

    $elem.find('.sdt_active')
    .stop(true)
    .animate({'height':'0px'},300)
    .andSelf().find('img')
    .stop(true)
    .animate({
    'width':'0px',
    'height':'0px',
    'left':'85px'},400)
    .andSelf()
    .find('.sdt_wrap')
    .stop(true)
    .animate({'top':'10px'},500);
    });
    });'

Reply

You must log in to post.

About this Topic