jquery menubar - 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

这是工作的小提琴

请检查这的教程，它将帮助您使用纯css制作导航条。

<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/

本教程似乎涵盖了您所需要的一切。