CODEWITHSUNDEEP
jqueryhtmlcsssuckerfish
aendra
aendra

Reputation: 5346

Setting child width to that of first parent element when similar?

I'm working on a suckerfish-style dropdown menu that has first-level items of varying sizes (No explicit width specified, i.e., width: auto;), which then have drop-downs that are text-align: center;.

For this to not look awful, the width of the drop-down children elements should be the same width as the parent li item. Alas, my jQuery-fu is apparently lacking and I just cannot seem to get it to work. Alternately, if somebody knows how to do this with just CSS I'll be even more impressed.

Menu HTML:

<nav id="access" role="navigation">
    <div class="menu-main-container">
        <ul id="menu-main" class="menu">
            <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#">Portfolio</a>
                <ul class="sub-menu" style="">
                    <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a href="#">Travel</a></li>
                    <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="#">Commercial</a></li>
                </ul>
            </li>
            <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">Info</a>
                <ul class="sub-menu" style="">
                    <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="#">About us</a></li>
                    <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a href="#">FAQ</a></li>
                </ul>
            </li>
            <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#">Contact</a></li>
            <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="#">Recent Work</a>
                <ul class="sub-menu" style="">
                     <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#">Travel</a></li>
                     <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="#">Commercial</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

And here's my jQuery:

jQuery(document).ready( function() {
    jQuery('#access ul ul li a').width( function() {
        jQuery(this).parent('li.menu-item').width() 
    });
});

I think part of my problem is that I'm selecting the nearest parent li.menu-item, when I'm needing the most senior .menu-item (I.e., "ul li", not "ul li ul li"). Any idea how I'd do that?

Many thanks!

Upvotes: 0

Views: 2263

Answers (2)

ClarkeyBoy
ClarkeyBoy

Reputation: 5010

Try something like the following:

$(document).ready(function() {
    $(".menu-main-container > ul > li").each(function() { //select all top level li tags
        $width = $(this).width(); //get the width
        $(this).find("ul > li > a").width($width); //set the width of all links within submenus
    });
});

Upvotes: 1

adeneo
adeneo

Reputation: 318302

$("#access ul > li > ul > li > a").each(function() {                                          
    var elmWidth = $(this).parent('li').width();
    $(this).width(elmWidth);
});

Or if they are all the same width

$("#access ul > li > ul > li > a").width($(this).parent('li').width());

Upvotes: 0

Related Questions