当前位置:主页 > jquery插件 > 导航菜单 >

带图标的五彩的动画菜单

栏目分类:导航菜单   模板编号:JQ00017    发布日期:2017-03-21   来源:网络   浏览次数:次     在线预览
今天我要给大家推荐一款好看的 jquery+css3菜单插件-Colorful CSS3 Animated Navigation Menu。每个菜单插件都设置了一个图标,而我们可以通过设置样式值来选择自己喜欢的图标,很方便。

使用步骤

1、引入以下的js和css文件

<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.tutorialzine.com/misc/adPacks/v1.js" async=""></script>

2、在body标签中加入以下格式的html代码,每一个菜单就是一个 li 标签,子菜单则是包含在里面的 li 标签。设置不同的样式就有不同的图标。

<nav id="colorNav">
<ul>   
    <li class="green">
        <a href="#" class="icon-home"></a>
        <ul>   
            <li>
                <a href="http://tutorialzine.com/2012/10/css3-dropdown-menu/">Back to the tutorial</a>
            </li>
            <li>
                <a href="http://tutorialzine.com/2012/10/css3-dropdown-menu/#comments">Get help</a>
            </li>
            <li>
                <a href="http://tutorialzine.com/2012/10/css3-dropdown-menu/">Download this example</a>
            </li>
        </ul>
    </li>
//更多菜单项
</ul>
</nav>

自定义菜单

在实际的使用过程中,我们肯定是有自己的菜单,不同的文字,不同的图标,不同的颜色,那么该如何设置呢?
我们来看每个菜单的html代码如下。菜单的外部容器是一个 li 标签,设置成不同的样式就显示出不同的背景颜色。
比如这里的class值设置成了 green,背景颜色就是绿色了。

<li class="green">
    <a href="#" class="icon-home"></a>
    <ul>   
        <li>
            <a href="http://tutorialzine.com/2012/10/css3-dropdown-menu/">Back to the tutorial</a>
        </li>
        <li>
            <a href="http://tutorialzine.com/2012/10/css3-dropdown-menu/#comments">Get help</a>
        </li>
        <li>
            <a href="http://tutorialzine.com/2012/10/css3-dropdown-menu/">Download this example</a>
        </li>
    </ul>
</li>

li 里面包含了一个 a 标签,不同的图标就设置不同的样式值,那么该如何设置成自己的图标呢?
打开网站:http://fortawesome.github.com/Font-Awesome/#all-icons
里面有所有的图标和每个图标对应的样式名。我们只需要取相应的样式名即可显示成相应的图标。

alt=""/>


在线演示 立即下载
打赏本站
云盘密码:8u1h

标签: 菜单插件 图标

上一篇:没有了
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载