CSS, jQuery и навигационное управление - требуется небольшая настройка - PullRequest
Новая
       10

CSS, jQuery и навигационное управление - требуется небольшая настройка

0 голосов
/ 25 февраля 2010

У меня есть навигация, которая использует jQuery и CSS для управления позиционированием при наведении мыши на изображение и выпадающими меню. Все работает как надо. У меня есть запрос от клиента, чтобы сделать одну модификацию.

Вы можете увидеть пример здесь: http://www.rouviere.com/jr/index.html (лучше всего просматривать в Firefox или Safari прямо сейчас)

При наведении курсора на ссылки золото становится зеленым, однако при наведении курсора на элементы раскрывающегося меню родительская ссылка снова становится золотой. Мой клиент хотел бы, чтобы родительская ссылка оставалась зеленой. Поэтому мой вопрос: как мне этого добиться?

Вот CSS для родительской ссылки, наведенной на: 

ul.dropdown li a.home:hover,
ul.dropdown li a.about:hover,
ul.dropdown li a.portfolio:hover,
ul.dropdown li a.maintenance:hover,
ul.dropdown li a.testimonials:hover,
ul.dropdown li a.contact:hover    { background-position: center center; }

Вот код навигации: 

        <ul class="dropdown">
    <li><a class="home" href="#">Home</a></li>
        <li><a class="about" href="#">About Us</a>
            <ul class="sub_menu">
                 <li><a href="#">Our History</a></li>
                <li><a href="#">Our Process</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Financing</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Subcontractors</a></li>
            </ul>
        </li>
        <li><a class="portfolio" href="#">Portfolio</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="maintenance" href="#">Maintenance</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="testimonials" href="#">Testimonials</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="contact" href="#">Contact Us</a></li>
    </ul>

И последнее, но не менее важное, это jQuery: 

$(function(){

$("ul.dropdown li").hover(function(){

    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');

}, function(){

    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');

});

$("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

});

Заранее спасибо за помощь!

Ответы [ 4 ]

1 голос
/ 25 февраля 2010

Почему вы используете jQuery, чтобы делать то, что позволяет делать CSS? Я думаю, что если вы используете следующие селекторы: 

ul.dropdown li a.home:hover,
ul.dropdown li:hover { /* this targets the parent li's default hover state set it to the green colour */ }

ul.dropdown li ul li:hover,
ul.dropdown li ul li a:hover { /* this targets the dropdown li's default state set this to gold */ }

Это должно работать.

<ч /> Отредактировано в ответ на комментарий

Демонстрационный сайт выглядит стабильным, в Chrome, Firefox и Opera, который находится по адресу: http://davidrhysthomas.co.uk/so/parentLiStyles.html, пожалуйста, извините, уродливый. Это функционально, а не красиво ... = /

<ч /> Отредактировано, чтобы ввести принятый код в строку В какой-то момент я полагаю, что могу привести в порядок свой сайт, и код в любом случае мог бы быть более полезным здесь. Итак, вот оно, во всей полноте: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>list styling demo-page for Stackoverflow.com question 1517220</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <style type="text/css" media="all">

    ul.dropdown     {width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    }

    ul.dropdown li      {display: inline-block;
                    position: relative;
                    padding: 0 1em;
                    color: #fff;
                    background-color: #a18524;
                    }

    ul.dropdown li.hover    {background-color: #a18524;
                    }

    ul.dropdown li a    {text-decoration: none;
                    display: block;
                    color: #fff;
                    background-color: transparent;
                    }

    ul.dropdown li:hover,
    ul.dropdown li a:hover  {color: #fff;
                    background-color: #41602a;
                    }

    ul.dropdown li ul   {display: none;
                    position: absolute;
                    top: 1em;
                    left: 0;
                    }

    ul.dropdown li:hover ul
                    {display: block;
                    }

    ul.dropdown li ul li    {display: block;
                    border-bottom: 1px solid #fff;
                    line-height: 1.4em;
                    }

    ul.dropdown li ul li a  {width: 10em;
                    border
                    }

    #code           {white-space: pre-wrap;
                    width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    line-height: 1.2em;
                    font-family: consolas, mono;
                    }

    </style>

    <script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>

       <ul class="dropdown">
    <li><a class="home" href="#">Home</a></li>
        <li><a class="about" href="#">About Us</a>
            <ul class="sub_menu">
                 <li><a href="#">Our History</a></li>
                <li><a href="#">Our Process</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Financing</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Subcontractors</a></li>
            </ul>
        </li>
        <li><a class="portfolio" href="#">Portfolio</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="maintenance" href="#">Maintenance</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="testimonials" href="#">Testimonials</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="contact" href="#">Contact Us</a></li>
    </ul>


<div id="code">
    ul.dropdown     {width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    }

    ul.dropdown li      {display: inline-block;
                    position: relative;
                    padding: 0 1em;
                    color: #fff;
                    background-color: #a18524;
                    }

    ul.dropdown li.hover
                    {background-color: #a18524;
                    }

    ul.dropdown li a    {text-decoration: none;
                    display: block;
                    color: #fff;
                    background-color: transparent;
                    }

    ul.dropdown li:hover,
    ul.dropdown li a:hover
                    {color: #fff;
                    background-color: #41602a;
                    }

    ul.dropdown li ul   {display: none;
                    position: absolute;
                    top: 1em;
                    left: 0;
                    }

    ul.dropdown li:hover ul
                    {display: block;
                    }

    ul.dropdown li ul li    {display: block;
                    border-bottom: 1px solid #fff;
                    line-height: 1.4em;
                    }

    ul.dropdown li ul li a
                    {width: 10em;
                    border
                    }
</div>

</body>

</html>
0 голосов
/ 25 февраля 2010

Вы можете добавить обработчик событий наведения jQuery для «sub_menu» и вручную изменить цвет выпадающего меню.

0 голосов
/ 25 февраля 2010 
$(this).parents('li').addClass('hover');

Это должно получить родительский li и дать ему класс наведения. Сделайте обратное (removeClass()) во второй функции, чтобы избавиться от цвета.

Если у this есть несколько li родителей, это также должно дать им класс зависания. Если вам нужен только первый li, используйте li:first в качестве селектора.

http://jeffrupert.com/test/ Есть рабочий пример. Я использовал bind('mouseover' и bind('mouseout' просто потому, что я привык к этому. Я использовал ваш точный HTML, так что, надеюсь, это поможет ... Весь код встроен в страницу, поэтому его легко просматривать.

0 голосов
/ 25 февраля 2010

Попробуйте что-то вроде этого: 

$('ul.dropdown li').hover(function() {
    $(this).parents('ul').addClass('hover');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...