AD
当前位置:首页 > JS代码 > 菜单导航

jquery带图标的五彩导航菜单代码

所属栏目:菜单导航更新时间:2019-09-21来源:作者:deepdfhy浏览:0
基本信息

这是一款好看的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=""/>


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载(0)
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jQuery仿微信公众号底部导航菜单自定义菜单代码

2JSON无限折叠树形菜单特效代码

3原生js树形下拉菜单插件/可定义伸缩菜单列表/支持写入cookie

4仿京东手机版左右风格TAB滑动商品分类代码

5jQuery导航滚动到一定高底后吸顶,锚点定位自动跟随

6纯HTML5二级折叠菜单代码

7jQuery垂直多级下拉树形菜单代码

8纯CSS下拉菜单导航代码JQ升级版(兼容IE6)

9纯CSS分类菜单弹出式三级菜单代码

10jquery多级/无限级树形菜单代码

最新更新的

1Layui响应式导航菜单

2jQuery仿手机微信公众号底部菜单代码

3jquery弹出式下拉分类菜单代码

4jquery仿天猫商城左侧商品分类导航菜单代码

5原生js树形下拉菜单插件/可定义伸缩菜单列表/支持写入cookie

6《穿越火线》官网JS下拉导航菜单代码

7仿今日头条顶部触屏左右滑动导航菜单代码swiper.js

8js仿新浪游戏频道导航条

9有动画效果的菜单切换

10megamenu.js响应式jQuery大型菜单插件