Lavalamp for jQuery：無法獲得一級菜單可點擊

Question

我正在使用this版本的lavalamp jquery插件，我希望旅行鏈接有一個子菜單，如選項（TRAVEL - > DOMESTIC | INTERNATIONAL | SPACE | DARK AGES | GOLDEN ERA），並且能夠導航到頂層travel.html頁面。

旅行應鏈接到travel.html和國內，國際，空間，黑暗時代，黃金時代應該都鏈接到其各自的頁面。

我覺得好像不應該是這個困難，但不知何故，我無法完成它。

非常感謝。

編輯：添加代碼

HTML

<ul class="lavaLampWithImage" id="1"> 
    <li><a href="#">Home</a></li> 
    <li><a href="products.html" >Travel</a> 
     <div> 
      <ul>      
       <li><a href="domestic.html">Domestic</a></li> 
       <li><a href="international.html">International</a></li> 
       <li><a href="space.html">Space</a></li> 
       <li><a href="dark-ages.html">Dark Ages</a></li> 
       <li><a href="golden-era.html">Golden Era</a></li> 
      </ul> 
     </div> 
    </li> 
    <li><a href="#">Travel</a></li> 
    <li><a href="#">Ride an elephant</a></li> 
</ul> 
<script type="text/javascript"> 
    $(function() { 
     $("#1").lavaLamp({ 
      speed: 700, 
      click: function(event, menuItem) { 
       return true; 
      } 
     }); 
    }); 
</script> 

JAVASCRIPT

(function($) { 
$.fn.lavaLamp = function(o) { 
    o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {}); 

    return this.each(function() { 
     var me = $(this), noop = function(){}, 
      $back = $('<li class="back"><div class="left"></div></li>').appendTo(me), 
      $li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0]; 

     $li.not(".back").hover(function() { 
      move(this); 
     }, noop); 

     $(this).hover(noop, function() { 
      move(curr); 
     }); 

     $li.click(function(e) { 
      setCurr(this); 
      return o.click.apply(this, [e, this]); 
     }); 

     setCurr(curr); 

     function setCurr(el) { 
      $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" }); 
      curr = el; 
     }; 

     function move(el) { 
      $back.each(function() { 
       $.dequeue(this, "fx"); } 
      ).animate({ 
       width: el.offsetWidth, 
       left: el.offsetLeft 
      }, o.speed, o.fx); 
     }; 

    }); 
}; 
})(jQuery); 

CSS

.lavaLampWithImage { 
    position: relative; 
    height: 29px; 
    width: 421px; 
    background: url("bg.gif") no-repeat top; 
    padding: 15px; 
    margin: 10px 0; 
    overflow: hidden; 
} 

.lavaLampWithImage li { 
    float: left; 
    list-style: none; 
} 

.lavaLampWithImage li.back { 
    background: url("lava.gif") no-repeat right -30px; 
    width: 9px; height: 30px; 
    z-index: 8; 
    position: absolute; 
} 

.lavaLampWithImage li.back .left { 
    background: url("lava.gif") no-repeat top left; 
    height: 30px; 
    margin-right: 9px; /* 7px is the width of the rounded shape */ 
} 

.lavaLampWithImage li a { 
    font: bold 14px arial; 
    text-decoration: none; 
    color: #fff; 
    outline: none; 
    text-align: center; 
    top: 7px; 
    text-transform: uppercase; 
    letter-spacing: 0; 
    z-index: 10; 
    display: block; 
    float: left; 
    height: 30px; 
    position: relative; 
    overflow: hidden; 
    margin: auto 10px;  
} 

.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited { 
    border: none; 
} 

我基本上試圖實現是有旅遊一級菜單選項卡掛travel.html，並能夠有甚至travel.html的LavaLamp的效果。

Answer 1

一個典型的HTML小部件在實現插件時由3個不同的組件組成，包括CSS，HTML佈局和需要屬性的jQuery插件腳本。

開始與HTML佈局：

<ul class="lavaLamp"> 
     <li><a href="#">Home</a> 

     </li> 
     <li><a href="#">Plant a tree</a></li> 
     <li><a href="#">Travel</a> 
      <ul> <!-- submenus of travel parent menu --> 
       <li><a href="#">Domestic</a></li> 
       <li><a href="#">International</a></li> 
       <li><a href="#">Space</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Ride an elephant</a></li> 
</ul> 

注*的LavaLamp的插件自動添加的那場運動懸停事件背景的背景列表項標籤

現在讓我們做與一些基本造型CSS：：

.lavaLamp { 
    position: relative; 
    height: 29px; width: 421px; 
    background: url("../image/bg.gif") no-repeat top; 
    padding: 15px; margin: 10px 0; 
    overflow: hidden; 
} 
/* Force the list to flow horizontally */ 
.lavaLamp li { 
    float: left; 
    list-style: none; 
} 
/* Represents the background of the highlighted menu-item. */ 
.lavaLamp li.back { 
    background: url("../image/lava.gif") no-repeat right -30px; 
    width: 9px; height: 30px; 
    z-index: 8; 
    position: absolute; 
} 

.lavaLamp li.back .left { 
    background: url("../image/lava.gif") no-repeat top left; 
    height: 30px; 
    margin-right: 9px; 
     } 
    /* Styles for each menu-item. */ 
    .lavaLamp li a { 
    position: relative; overflow: hidden; 
    text-decoration: none; 
    text-transform: uppercase; 
    font: bold 14px arial; 
    color: #fff; outline: none; 
    text-align: center; 
    height: 30px; top: 7px; 
    z-index: 10; letter-spacing: 0; 
    float: left; display: block; 
    margin: auto 10px; 
    } 

上面的CSS應該根據你的樣式進行編輯。其他CSS選擇可以通過jQuery $（'SELECTOR'）。addClass（'className'）;

現在爲插件。大部分JavaScript工作都由Lava Lamp插件自己處理，所以你只需要添加。js文件到您的項目中引用它們在你在使用它們的Web表單，或母版頁，並添加腳本標籤放置在觸發的事件：

<script type="text/javascript" src="path/to/jquery.js"></script> 
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script> 
<!-- Optional --> 
<script type="text/javascript" src="path/to/jquery.easing.js"></script> 

<!-- Place this section in your webform using the lava lamp menu--> 
<script type="text/javascript"> 
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })}); 
</script> 

結帳的lava lamp site最新代碼更新如不同設置的對象屬性。

編輯1：要修復子菜單錯誤，請訪問this網站以更改插件文件中的代碼。

有任何問題，隨時問！