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>

请在下面找到垂直显示菜单栏的图片。 enter image description here

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/

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

jquery菜单栏 - jquery，javascript，css

2 个答案: