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/

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