javascript - jquery 菜单栏 - jquery,javascript,css

Question

我想在菜单栏上显示图标来代替菜单名称。

请找到 fiddle http://jsfiddle.net/7Bvap/ .对于主菜单项(即 Item1、Item2、Item3..)，我想显示图像，当用户单击该图像时，我想显示子菜单项名称，如 fiddle 中的 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;
}