как сделать так, чтобы подменю css оставалось на месте, когда выбрана подстраница - PullRequest
Новая
       15

как сделать так, чтобы подменю css оставалось на месте, когда выбрана подстраница

2 голосов
/ 14 мая 2010

У меня есть горизонтальное меню css с отображением меню / подменю, работающим при наведении, но я также хотел бы, чтобы параметры подменю оставались на месте, когда я выбрал эту страницу.Приведенный ниже код показывает подменю при наведении, но исчезает при наведении мыши.У меня возникли трудности с поиском, как заставить мой код работать, чтобы пункты подменю оставались на месте?Как я могу это сделать?

Спасибо за вашу помощь.

Вот HTML: 

<ul id="menu_nav">
    <li>
        <a href="#" class="button">Home</a>
        <span>
            <a href="#">Home Link1</a> 
            <a href="#">Home Link2</a> 
            <a href="#">Home Link3</a>
        </span>
    </li>
    <li>
        <a href="#" class="button">About Us</a>
        <span>
            <a href="#">About Link1</a> 
            <a href="#">About Link2</a> 
            <a href="#">About Link3</a>
        </span>
    </li>
</ul>

Вот CSS 

ul#menu_nav
{
    position:relative;
    float:left;
    width:790px;
    padding:0;
    margin:0;
    list-style-type:none;
    background-color:#000099;
}
ul#menu_nav li {float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;}

ul#menu_nav li a.button
{
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000099;
    padding:0.2em 0.6em;
    border-right:1px solid #CCCCCC;

    font-family: Tahoma;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    position: relative;
    height: 21px;
    line-height:1.85em;
}
ul#menu_nav li a:hover {
    background-color:#F7F7F7;
    color:#000099;
    border-top:1px solid #CCCCCC;
}

ul#menu_nav li span{
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:25px;
    display: none; /*--Hide by default--*/
    width: 790px;
    background: #F7F7F7;
    color: #fff;
}
ul#menu_nav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#menu_nav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#menu_nav li span a:hover {text-decoration: underline;}

ВотJQuery: 

$("ul#menu_nav li").hover(function() { //Hover over event on list item
        $(this).css({ 'background' : '#1376c9'}); //Add background color and image on hovered list item
        $(this).find("span").show(); //Show the subnav
    } , function() { //on hover out...
        $(this).css({ 'background' : 'none'}); //Ditch the background
        $(this).find("span").hide(); //Hide the subnav
    });

Ответы [ 2 ]

0 голосов
/ 14 мая 2010

Брайан, спасибо. Я в основном сделал то, что вы предложили. У меня уже был класс с именем «.selected», который использовался для отображения выбранной вкладки для меню. в событии «hover» я поместил оператор if, чтобы проверить, «выделен» ли в нем класс, и если да, я просто отобразил скрытый тег span. "$ (Это) .next () шоу ();" это строка, которая сделала то, что мне нужно, на событии «click», чтобы подменю оставалось на месте. Надеюсь, это кому-нибудь еще поможет.

См. Код: 

$("ul#menu_nav li").hover(function() { //Hover over event on list item
            $(this).css({ 'background' : '#1376c9'}); //Add background color and image on hovered list item
            $(this).find("span").show(); //Show the subnav
        } , function() { //on hover out...
            $(this).css({ 'background' : 'none'}); //Ditch the background

            if( $(this).children("a").is('.selected') ) 
            {
                $(this).children("span").show();
            } 
            else 
            {
                $(this).find("span").hide(); //Hide the subnav
            }
        });

        $(".menu_buttons li>a").click(function(){
            $(this).addClass('selected').removeClass('button')
                    .parents().siblings().children("a").removeClass('selected').addClass('button')
                    .parents().siblings().children("span").hide()
            $(this).next().show();
        });
0 голосов
/ 14 мая 2010

Я не совсем уверен, что вы пытаетесь сделать, но я уверен, что чего бы это ни было, можно добиться, добавив класс к тому, что вы пытаетесь получить, оставаясь на месте, не изменяя его CSS или скрывая Это. Что-то вроде 

$("ul#menu_nav li").hover(function() { //Hover over event on list item
    $(this).css({ 'background' : '#1376c9'}); 
    $(this).find("span").addClass('keep').show(); //Show the subnav
} , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    $(this).find("span:not(keep)").hide(); //Hide the subnav
});
...