SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Dynamic width on drop-down sub-menu

    OK I spent way too long writing a buggy and bloated jQuery script that is supposed to allow the sub-menus of a drop-down menu be a dynamic width (i.e. the submenu assumes the width of the widest list item). I am probably missing some base CSS property, surely it cant be this hard? My script I wrote is:

    // drop down menu
    var setWidth = 2;
    var nextSetWidth = 0;

    $jQ('.nav li').hover(function(){

    var thisList = $jQ(this).parent('ul');
    if (thisList.parent('li').length > 0) {
    thisList.children('li').each(function(){
    var thisSpan = $jQ(this).find('span');
    var spanWidth = thisSpan.width();
    if (spanWidth > setWidth) {
    setWidth = spanWidth;
    }
    });
    setWidth = setWidth + 16;
    thisList.css('width', setWidth);
    }

    var nextList = $jQ(this).find('.nav:eq(0)');
    if (nextList.parent('li').parent('ul').parent('li').length == 0){
    nextList.css('left', '2px');
    }

    nextList.children('li').each(function(){
    var nextThisSpan = $jQ(this).find('span');
    var nextSpanWidth = nextThisSpan.width();
    if (nextSpanWidth > nextSetWidth) {
    nextSetWidth = nextSpanWidth;
    }
    });

    nextSetWidth = nextSetWidth + 16;
    nextList.css('width', nextSetWidth);
    if (nextList.parent('li').parent('ul').parent('li').length > 0){
    nextList.css('left', setWidth);
    }

    }, function(){
    $jQ(this).find('.nav:eq(0)').css('left','9999em');
    setWidth = 2;
    nextSetWidth = 0;
    });

    //End of Drop down menu


    The HTML looks something like:

    <ul class="nav">
    <li><a><span></span></a></li>
    <li><a><span></span></a></li>
    <li><a><span></span></a>
    <ul class="nav">
    <li><a><span></span></a></li>
    </ul>
    </li>
    </ul>

  2. #2
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all i would suggest you to find some jquery menu plugins so that you don't have to bother yourself with such small stuffs since they are already well tested with examples.

    Secondly, why do you need to have such dynamic width? If you want to make the width in such a flexible way then why don't you just make the width fixed to maximum with your available space?
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi rajug,

    Thanks for pointing out the plugins. I guess the importance of what I was asking is that clients have a habit of breaking fixed width designs, ecspecially in narrow areas of a webpage - i.e. side columns etc etc.

    I think having a drop down menu with a full-width would be painfully unneccessary - it would take up way too much real estate on a website and look quite ugly. I dont think I can recall anyone ever implementing a full-width drop-down. Would almost start to appear as a modal box then I would imagine.

  4. #4
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are making the width flexible as per the clients enters the name (of the menu) in a menu item then I don't think that it will be good to always calculate and have the width according to the size of the menu container. Better have a fixed width then make overflow hidden from CSS if the space is really narrow. You must be strict at some end since you cannot allow a bigger width due to your page width fixed.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have a same problem for fixing a dynamic width for a menu column.
    Please reply.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •