導航jQuery插件將不會按預期的那樣行動

我試圖讓我的jQuery導航工作，但它不會像我想要的那樣工作。這是一個名爲kwicks的插件。當導航滑出時，我希望有文字。導航jQuery插件將不會按預期的那樣行動

我會把我的HTML and CSS in a jsFiddle，我會給鏈接的test page of the site，這樣你可以看看編碼。

在此先感謝

HTML

<ul id="kwickslist" class='kwicks kwicks-horizontal'> 
    <li id='panel-1'> 
     <div class="kwicks_inner_inner"> 
      <div class="navimage"><a id="index2" href="index.html">test</a></div> 
      <div class="smallText"> <p>Cyberia Design.</p></div> 
     </div> 
    </li> 
    <li id='panel-2'> 
     <div class="kwicks_inner"> 
      <div class="navimage"><a id="about2" href="about.html">test</a></div> 
      <div class="smallText">About.</div> 
     </div> 
    </li> 
    <li id='panel-3'> 
     <div class="kwicks_inner"> 
      <div class="navimage"><a id="work2" href="work.html">test</a></div> 
      <div class="smallText">Work.</div> 
     </div> 
    </li> 
    <li id='panel-4'> 
     <div class="kwicks_inner"> 
      <div class="navimage"><a id="contact2" href="contact.html">test</a></div> 
      <div class="smallText">Contact.</div> 
     </div> 
    </li> 
</ul>

CSS

.kwicks { 
    display: block; 
    list-style-type: none; 
    list-style: none; 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 
.kwicks > * { 
    display: block; 
    overflow: hidden; 
    padding: 0; 
    margin: 0; 
} 
.kwicks.kwicks-processed > * { 
    margin: 0; 
    position: absolute; 
} 
.kwicks-horizontal > * { 
    float: left; 
} 
.kwicks-horizontal > :first-child { 
    margin-left: 0; 
} 
.kwicks-vertical > :first-child { 
    margin-top: 0; 
} 
.kwicks { 
    width: 515px; 
    height: 100px; 
} 
.kwicks > li { 
    width: 50px; 
    height: 50px; 
    /* overridden by kwicks but good for when JavaScript is disabled */ 
    margin-left: 5px; 
    float: left; 
} 

#panel-1 { 
    background-color: #141414; 
} 

#panel-2 { 
    background-color: #141414; 
} 
#panel-3 { background-color: #141414; } 
#panel-4 { background-color: #141414; } 

#kwickslist li { 
    float: left; 
    width: 75px; 
    height: 50px; 
} 
#kwickslist .kwicks_inner { 
    width: 200px; 
} 
#kwickslist .navimage { 
    height: 50px; 
    float: left; 
} 
#kwickslist .smallText { 
    display: none; 
    text-align: center; 
    width: 50px; 
    color: white; 
    font-size: 10px; 
    margin-top: 5px; 
    float: right; 
} 
#kwickslist li.active.smallText { 
    display: block; 
}

來源

2012-12-20 Joren Polfliet

請再次設置上的 'a' 標籤的text-indent屬性爲 '0' 時，他們上空盤旋因爲目前它們在懸停時仍然設置爲'-9999px'。

可能需要將它們上的顏色設置爲像白色一樣。

也添加到您的CSS：

ul#kwickslist li:hover .kwicks_inner_inner .smallText { 
    display:block; 
}

來源

2012-12-20 11:35:16

試了一下，我剛剛得到的鏈接文本，而不是文本時的菜單項滾動了。 –

我已經修改了上面的答案 - 也是這樣，它也應該顯示其他文本。 –

不錯，謝謝！：D修正了它。 –

導航jQuery插件將不會按預期的那樣行動

回答

相關問題