CODEWITHSUNDEEP
jquerydrop-down-menu
TH1981
TH1981

Reputation: 3193

How to create a dropmenu with dynamic width

I have a dropdown menu that looks like this:

<ul class="menu"> 
<li id="home"><a href="index.php" title="Home" class="menu-item">Home</a></li> 
<li class="list"><a href="#" title="About Us" class="menu-item">About</a> 
    <ul class="sub home">
        <li><a href="#" title="Page">Page</a></li>
        <li><a href="#" title="Page">Page</a></li>
        <li><a href="#" title="Page">Page</a></li>
    </ul>
</li> 
<li class="list"><a href="#" title="Support" class="menu-item">Support</a> 
    <ul class="sub home">
        <li><a href="#" title="Page">Page</a></li>
        <li><a href="#" title="Page">Page</a></li>
        <li><a href="#" title="Page">Page</a></li>
    </ul>
</li> 
<li class="list"><a href="#" title="Donate" class="menu-item">Donate</a></li> 
<li class="list"><a href="#" title="Grants" class="menu-item">Grants</a> 
    <ul class="sub home">
        <li><a href="#" title="Page">Page</a></li>
        <li><a href="#" title="Page">Page</a></li>
        <li><a href="#" title="Page">Page</a></li>
    </ul>
</li> 
<li class="list"><a href="#" title="Contact Us" class="menu-item">Contact</a></li>

I'm using JQuery to create the dropdown effect as follows:

$('.menu .sub').css('display', 'none');

$('.menu li').hover(function() {
    $(this).find('.sub').hide().stop(true, true).animate({
        height: 'toggle'
    }, {
        duration: 200
    });
}, function() {
    $(this).find('.sub').show().stop(true, true).animate({
        height: 'toggle'
    }, {
        duration: 200
    });
});

And the CSS is:

.menu {
    font-size: 19px;
    color: #3d393a;
    position: relative;
    z-index: 999;
}

.menu li.list{
    position: relative;
}
.menu ul.sub{
    text-transform: none;
    position: absolute;
    left: 0;
    top: 25px;
    list-style-type: none;
    padding: 8px 10px;
    margin: 0px;
    margin-left: 10px;
    font-size: 11px;
    background-color: #fafaf8;
    border-right:1px solid #e4e0d5; 
    border-left:1px solid #e4e0d5;  
    border-bottom:1px solid #e4e0d5;    
    color: #7e7a7a;
    z-index: 99;
    display: none;
}
.menu ul.sub li:hover{  
}
.menu ul.sub li{
    border-top: 1px dashed #7E7A7A;
    display: block;
    line-height: 140%;
    padding: 8px 0;
}
.menu ul.sub>:first-child{
    border-top: none;
}

I need the width of the sub items to be dynamic and change to the correct width for the text so that it doesn't scroll to two lines on longer page titles. I tried using innerWidth but I can't get it to work.

Upvotes: 1

Views: 584

Answers (1)

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

You could use the white-space=nowrap css, it forces text to be only in 1 line.

.nowrap{ white-space: nowrap }

And then apply class="nowrap".

Take a look at this: http://www.icelab.eu/en/blog/css-4/css-nowrap-equivalent-8.htm

Hope this helps. Cheers

Upvotes: 1

Related Questions