jQuery FlyOut菜单

Question

经过大量的谷歌搜索，我一直找不到一个干净的/简单的插件，处理飞出菜单。

正在执行的菜单中，单击一个图标，并下垂菜单项列表。大多数飞出菜单似乎都以DIV的形式在单击时生成菜单项。

有什么解决办法吗？

谢谢

Answer 1

您是在谈论这样的事情吗:单击“更多的产品”选项卡：网站实例

如果是这样，则使用以下html、css和jquery完成此操作：

<div class="mainHeaderNav">
    <ul>
        <li>
            <a href="" class="LeftHand">Tab1</a>
        </li>
        <li>
            <a href="/decreasingcover" class="Middle">Tab2</a>
        </li>
        <li>
            <a href="/increasingcover" class="RightHand">Tab3</a>
        </li>
         <li class="moreProductsTab"><a href="#" class="tab" onclick="ToggleMoreProductsMenu();">
                        <span class="tabTitle">More</span>
                        <span class="tabSubTitle">Products</span>
                        <!--[if gt IE 7]><!-->
                    </a>
                        <!--<![endif]-->
                        <!--[if lte IE 7]><table><tr><td><![endif]-->
                        <ul id="productsMenu">
                            <li><a href="http://www.ecarinsurance.co.uk" target="_blank"><span class="linkText">Car Insurance</span><span class="arrow">&nbsp;</span></a></li>
                            <li><a href="http://www.ehomeinsurance.co.uk" target="_blank"><span class="linkText">Home Insurance</span><span class="arrow">&nbsp;</span></a></li>
                            <li><a href="http://www.ebikeinsurance.co.uk" target="_blank"><span class="linkText">Bike Insurance</span><span class="arrow">&nbsp;</span></a></li>
                            <li><a href="http://www.evaninsurance.co.uk" target="_blank"><span class="linkText">Van Insurance</span><span class="arrow">&nbsp;</span></a></li>
                            <li><a href="http://www.etravellerinsurance.co.uk" target="_blank"><span class="linkText">Travel Insurance</span><span class="arrow">&nbsp;</span></a></li>
                            <li><a href="http://www.etradesmaninsurance.co.uk" target="_blank"><span class="linkText">Business Insurance</span><span class="arrow">&nbsp;</span></a></li>
                        </ul>
                        <!--[if lte IE 7]></td></tr></table></a><![endif]-->
                    </li>
    </ul>
</div>

CSS /Overall菜单样式开始/

.mainHeaderNav
{
    position:relative;
    height:50px;
    top:91px;
    z-index:99;
    padding:0px 0px 0px 58px;
    font-family:Arial;
}


.mainHeaderNav ul
{
    list-style:none;
    padding:0px;
    margin:0px 0px 0px 50px;
    height:50px;
}

.mainHeaderNav ul li a.tab
{
    background-image:url('/Content/images/elife/backgrounds/elifenavbar.png');
    background-repeat:no-repeat;
    float:left;
    height:50px;
}

.mainHeaderNav ul li.moreProductsTab
{
    float:right;  
    margin-right:10px;
}


.mainHeaderNav ul li.moreProductsTab a.tab
{
    background-position:-730px top;
    width:83px;

    height:33px;
}

.mainHeaderNav ul li.moreTab a:hover
{
    background-position:-730px -51px;
}

.mainHeaderNav ul li a
{
    text-align:center;
    display:-moz-inline-stack;
    display:block;
    float:left;
    height:50px;
    line-height:50px;
    text-transform:uppercase;
    color:#09207B;
    letter-spacing:-0.06em;
    font-weight:bold;
    text-decoration:none;
    text-shadow:#EBFAFF 0px 1px 1px;
}

.mainHeaderNav ul li a:hover
{
    color:#09207B; 
}

.mainHeaderNav ul li.moreProductsTab a
{
    padding:17px 0px 0px 10px;
    height:33px;
    line-height:20px;
    text-align:left;
    text-shadow:none;
}


/*Overall Menu Styling Start*/

.mainHeaderNav ul 
{
    padding:0px;
    margin:0px;
    list-style-type:none;
}

.mainHeaderNav li 
{
    float:left;
    position:relative;  
}

.noscript .mainHeaderNav ul li.moreProductsTab ul
{
    margin-top:-1px;
}

.mainHeaderNav ul li.moreProductsTab ul
{
    padding-bottom:20px;
}

.mainHeaderNav ul li.moreProductsTab ul li 
{
    padding:0px 0px 0px 10px;
    margin:0px 0px 0px 0px;
}


.mainHeaderNav li.selected ul a
{
    background-image:none;
}

.mainHeaderNav :hover > a
{
    background-color:Transparent;
    background-repeat:no-repeat;
    color:#000000;
}

/*Overall Menu Styling End*/

/*Second level Menu Styling Start*/
.mainHeaderNav ul li.moreProductsTab ul 
{
    width:200px;
    height:auto;
    position:absolute;
    display:none;
    top:51px;
    left:-108px;
    background-image:url('/Content/images/elife/backgrounds/bkg_dropdown.png');
    background-repeat:no-repeat;
    background-position:left bottom;
}

.noscript .mainHeaderNav ul li.moreProductsTab ul
{
    display:block;
    visibility:hidden;
    -moz-box-shadow:0 0 10px #555555;
}

.mainHeaderNav ul li.moreProductsTab ul a, 
.mainHeaderNav ul li.moreProductsTab ul a:visited 
{
    color:#09207B;
    font-size: 1.3em !important;
    font-family:Arial,Helvetica,sans-serif;
    font-weight:normal;
    height:22px;
    line-height:24px;
    width:155px;
    text-align:left;
    text-transform:none;

    background-color:transparent; 
    padding:3px 0px 3px 20px; 
}

.noscript .mainHeaderNav ul li.moreProductsTab ul a:hover
{
    padding:3px 0px 3px 25px;
}

.mainHeaderNav ul li.moreProductsTab ul a:hover
{
    font-weight:bold;
}

.mainHeaderNav ul li.moreProductsTab ul a span.arrow
{
    display:-moz-inline-stack;
    display:inline-block;
    height:24px;
    width:14px;
    background-image:url('/Content/images/site/backgrounds/bkg_arrow2.png');
    background-repeat:no-repeat;
    background-position:right center;
}

.mainHeaderNav ul li.moreProductsTab ul :hover > a 
{
    background-color:#FFF46E;
}

/*Second level Menu Styling End*/



/*Show and hide menus when hovering start*/
.noscript .mainHeaderNav ul li:hover ul,
.noscript .mainHeaderNav ul a:hover ul
{
    visibility:visible; 
}

/*Show and hide menus when hovering end*/

.mainHeaderNav ul li.moreProductsTab a.tab:hover
{
    background-position:-730px -51px;
}

jQuery

$(document).ready(function () {

    $('#productsMenu').bind('click', ToggleMoreProductsMenu);
    $('#productsMenu').bind('mouseleave', CloseMenu);

    $('#productsMenu li a').bind('mouseenter', AnimateProductsMenuRight);
    $('#productsMenu li a').bind('mouseleave', AnimateProductsMenuLeft);

    $('.mainHeaderNav > ul > li > a').bind('mousedown', MenuMouseDown);
    $('.mainHeaderNav > ul > li > a').bind('mouseup mouseleave', MenuMouseUp);
});

var allowMenuAnimation = true;

function ToggleMoreProductsMenu() {

    if (allowMenuAnimation) {
        allowMenuAnimation = false;
        $('#productsMenu').slideToggle('slow', function () {
            EnableMenu();
        });
    }

}

function EnableMenu() {
    allowMenuAnimation = true;
}


function CloseMenu() {

    if (!$('#productsMenu').is(':hidden')) {
        ToggleMoreProductsMenu();
    }
}



function AnimateProductsMenuRight() {    

        $(this).animate(
        {
            paddingLeft: '25px',
            width:'155px'
        },
        slideTime,
        function () {
        });
}


function AnimateProductsMenuLeft() {

    $(this).animate(
    {
        paddingLeft: '20px',
        width: '160px'
    },
    slideTime,
    function () {
    });
}


function MenuMouseDown() {
    $(this).addClass("MouseDown");
}

function MenuMouseUp() {
    $(this).removeClass("MouseDown");
}