Nav Overflow

by parkji

HTML

<div id="wrapper">
    <div id="nav">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
</div>

CSS

#wrapper {
    background-color:black;
    height:500px;
}
#nav {
    background-color:white;
    width:200px;
    position:relative;
}
#nav ul {
    background-color:white;
    position:absolute;
    overflow: hidden;
    height: 20px;
}
#nav ul li {
    display:inline;
}

JavaScript

var $navList = $('#nav ul')[0];
if($navList.clientHeight < $navList.scrollHeight) {
    $('#nav').after('<p style="color:red;background:white;left:200px;position:absolute;">Hidden elements to be found</p>');
}


var $hideTimeout;
$('#nav ul').hover(
    function() {
        clearTimeout($hideTimeout);
        $(this).height('auto');
    },
    function() {
        var $this = $(this);
        $hideTimeout = setTimeout(
            function() {
                $this.height('20px');
            },
            1000
        );
    }
);