jquery菜單欄 - jquery，javascript，css

Question

我想在菜單欄上顯示菜單名稱的圖標。請致電http://jsfiddle.net/7Bvap/。 對於主要菜單項目（即Item1，Item2，Item3 ..）我想要顯示圖像，並且當用戶單擊該圖像時，我想顯示子菜單項名稱，如小提琴中Item3菜單項所示。

下面是我用jQuery創建菜單欄的示例代碼。

<ul id="nav"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a> 
     <ul> 
      <li><a href="#">Item 3-1</a> 
      <ul> 
       <li><a href="#">Item 3-11</a></li> 
       <li><a href="#">Item 3-12</a></li> 
       <li><a href="#">Item 3-13</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Item 3-2</a></li> 
      <li><a href="#">Item 3-3</a></li> 
      <li><a href="#">Item 3-4</a></li> 
      <li><a href="#">Item 3-5</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Item 4</a></li> 
    <li><a href="#">Item 5</a></li> 
</ul> 

請建議如何顯示圖標來代替菜單名稱。謝謝。

- 編輯 -

下面是我使用的是進口的在我的本地應用程序。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 

請在下面的圖像垂直顯示菜單欄。

Answer 1

這裏是工作fiddle

檢查this本教程將幫助您使用純CSS製作的導航欄。

HTML

<ul id="nav"> 
    <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li> 
    <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li> 
    <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a> 
     <ul> 
      <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a> 
      <ul> 
       <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li> 
       <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li> 
       <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li> 
      </ul> 
      </li> 
      <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li> 
      <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li> 
      <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li> 
      <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li> 
     </ul> 
    </li> 
    <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li> 
    <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li> 
</ul> 

jQuery的

$("#nav").menu({position: {at: "left bottom"}}); 

CSS

.ui-menu { 
    overflow: hidden; 
} 
.ui-menu .ui-menu { 
    overflow: visible !important; 
} 
.ui-menu > li { 
    float: left; 
    display: block; 
    width: auto !important; 
} 
.ui-menu ul li { 
    display:block; 
    float:none; 
    background-image: url(); 
} 
.ui-menu ul li ul { 
    left:120px !important; 
    width:100%; 
} 
.ui-menu ul li ul li { 
    width:auto; 
} 
.ui-menu ul li ul li a { 
    float:left; 
} 
.ui-menu > li { 
    margin: 5px 5px !important; 
    padding: 0 0 !important; 
} 
.ui-menu > li > a { 
    float: left; 
    display: block; 
    clear: both; 
    overflow: hidden; 
} 
.ui-menu .ui-menu-icon { 
    margin-top: 0.3em !important; 
} 
.ui-menu .ui-menu .ui-menu li { 
    float: left; 
    display: block; 
} 

Answer 2

我假設你已經簽出了jQuery的菜單控件：http://api.jqueryui.com/menu/

菜單使用圖標，但它是除了文本。

我覺得你最好的選擇將是檢查了這一點 - http://tympanus.net/codrops/2009/11/23/css-tutorial-image-with-toolbar-navigation-overlay/

教程似乎涵蓋你所需要的一切。