jQuery lavaLamp, плохо себя ведущий с ребенком <ul> - PullRequest
Новая
       6

jQuery lavaLamp, плохо себя ведущий с ребенком <ul>

0 голосов
/ 30 июля 2010

Я поигрался с http://nixboxdesigns.com/projects/jquery-lavalamp/ для меню навигации на новом сайте, который я строю, и оно прекрасно работает с минимальной суетой, потом я начал задаваться вопросом, могу ли я добавить некоторые опции суб-навигации кменю и приступить к его созданию. Проблема в том, что я заставляю плагин lavaLamp игнорировать вложенные / child ul / li's.

Вы можете увидеть живой пример проблемы здесь: http://www.weleasewodewick.com/redesign2- наведите курсор мыши на «Блог», затем на подменю, которое появляется.

Я не буду публиковать полный исходный код для плагинов, так как он довольно длинный, но вы сможете просмотреть их прямо здесь:

lavaLamp jQuery Plugin

http://www.weleasewodewick.com/redesign2/includes/jquery.lavalamp.js

Разметка меню 

<nav> 
 <article> 
  <ul> 
   <li><a href="#Home" alt="#">Root</a></li> 
   <li><a href="#About" alt="#">Who?</a></li> 
   <li><a href="#Projects" alt="#">Projects</a></li> 
   <li><a href="#Resume" alt="#">Blog</a> 
     <ul class='children'> 
      <li class="page_item page-item-18"><a href="http://localhost/wordpress/?page_id=18" title="History">History</a></li> 
      <li class="page_item page-item-13"><a href="http://localhost/wordpress/?page_id=13" title="Our Company">Our Company</a></li> 
      <li class="page_item page-item-15"><a href="http://localhost/wordpress/?page_id=15" title="Our Staff">Our Staff</a></li> 
     </ul> 
</li> 
    <li><a href="#Resume" alt="#">Contact</a></li> 
   </ul> 
  </article> 
 </nav>

Активация lavaLamp

$(function() { $('nav>article>ul').lavaLamp(); });

Буду очень признателен за ваш вклад по этому вопросу:)

** Цель ** Последним местом отдыха этого макета является шаблон WordPress, поэтому вложенная структураменю в основном должно оставаться прежним.

Многое примернолисичка

Ответы [ 3 ]

2 голосов
/ 30 июля 2010

да, наконец-то я понял, что это работает :) вот Демо : http://jsbin.com/uyali3

Трудно решить эту задачу, используя <ul> в качестве дочернего узла, поэтомуЯ изменил его на <div>

иди проверьте код себя =)

ПРИМЕЧАНИЕ : В следующий раз, когда вы отправите вопрос, пожалуйста,конечно, чтобы предоставить правильный код / ​​HTML.Я взял меня за 45 min, чтобы понять весь твой код.Наконец я нашел решение вашей проблемы =)

Код : 

    <!DOCTYPE html>
    <html>
    <head>
    <title> cssFix </title>
    <meta charset=utf-8 />
    <style type="text/css">

        body { background : #2f2f2f; }

         ul  li {
        display:inline;
        float:left;
        list-style-type:none;
        margin-right:10px;
        position:relative;
        z-index:5;
        }
         ul  li.backLava {
        -moz-border-radius :6px;
        background:none repeat scroll 0 0 #009912;
        }
         ul  li a {
        color:#B9B9B9;
        display:block;
        font: bold 14px Arial;
        padding:17px 10px 6px;
        position:relative;
        text-decoration:none;
        text-shadow:0 1px 0 #38302F;
        }
         ul  li  a:hover {
        color:#ff0;
        font-size:14px;

        }
        ul  li a:active {
        color:#FFFFFF;
        }
        .children {
        background-color:#333333;
        left:-999em;
        list-style:none outside none;
        min-width:100px;
        position:absolute;
        }

        li:hover .children {
        -moz-border-radius:6px 6px 6px 6px;
        background:none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
        left:auto;
        margin:0;
        padding:10px;
        }
    </style>
    </head>
    <body>
        <ul style="position: relative;" class="ulclass">
            <li class="selectedLava"><a alt="#" href="#Home">Root</a></li>
            <li><a alt="#" href="#About">Who?</a></li>
            <li><a alt="#" href="#Projects">Projects</a></li>
            <li>
                <a alt="#" href="#Resume">Blog</a>
                <div class="children"> 
                    <span><a href="#">History</a></span> 
                    <span><a href="#">Our Company</a></span> 
                    <span><a href="#">Our Staff</a></span> 
                </div> 
            </li>
            <li><a alt="#" href="#Resume">Contact</a></li>
        </ul>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
   <script type="text/javascript" src="http://www.weleasewodewick.com/redesign2/includes/jquery.lavalamp.js" ></script>
   <script type="text/javascript" >
        $(function() {
            $('ul').lavaLamp();
        });
    </script>
    </body>
    </html>
1 голос
/ 17 сентября 2010

У меня тоже был такой же вопрос, но я не хотел изменять шаблоны WordPress:

Сначала я подумал о добавлении класса "noLava" к каждому <li> с глубиной> 1, поэтому я попытался расширить класс Walker с помощью пользовательского - безуспешно.

Затем я начал модифицировать плагин jquery lavalamp, и, попробовав весь день, нашел решение здесь , поэтому я изменил его, как показано ниже, и он работает как шарм:) 

{find `var $li = jQuery('li[class!=noLava]', this);` and replace with:}

    //var $li = jQuery('li[class!=noLava]', this); //default one

    //by Paolo Bergantino, via /709278/kakoi-selektor-jquery-isklychaet-elementy-s-roditelem-kotoryi-sootvetstvuet-dannomu-selektoru#709288
    jQuery.expr[':'].parents = function(a,i,m){
        return jQuery(a).parents(m[3]).length < 1;
    }; 

    var $li = jQuery('li', this).filter(':parents(.children, .sub-menu)'); //for worpress :) by lelebart

Может быть, лучшее решение - сохранить исходное поведение и добавить это.

Редактировать: [онлайн демо]

0 голосов
/ 14 апреля 2014

Я разветвил плагин LavaLamp и добавил опцию «hoverTarget». Он использует элемент внутри "target" элемента для обнаружения наведения. (по умолчанию: «а»)

Это исправляет проблемы с дочерними списками.

получите это здесь: GitHub

...