jQuery响应式垂直侧边栏插件rvnm

简介: jQuery响应式垂直侧边栏插件rvnm

rvnm是一款jQuery响应式垂直侧边栏插件。该插件可以非常方便的生成响应式的侧边栏,并内置了多种颜色主题,以及搜索框。

tx000153.png

在线预览 下载

使用方法

安装

npm i rvnm
AI 代码解读

HTML结构

<nav id="navbar" class="">
    <ul>
        <li>
            <span class="spliter">
                <i class="fa fa-cart-plus"></i>
                Aliquam dictum
            </span>
        </li>
        <li>
            <a href="#">  
                <i class="fa fa-plus-square"></i>
                Nunc eleifend molestie velit. Morbi lobortis quam eu velit
            </a>
            <ul>
                <li>
                    <a href="#">
                        semper leo
                    </a>
                </li>
                <li>
                    <a>
                        habitasse platea
                    </a>
                    <ul>
                        <li>
                            <a href="#">
                               dictumst
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Vivamus facilisis
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                In hac habitasse
                            </a>
                            <ul>
                                <li><a href="#"> platea dictumst </a></li>
                                <li><a href="#">Nunc sed lacus</a></li>
                                <li><a href="#">euismod gravida </a></li>

                            </ul>

                        </li>

                    </ul>

                </li>
                <li>
                    <a href="#">
                        sed placerat ipsum
                    </a>
                </li>

            </ul>

        </li>
        <li>
            <a href="#">  
                <i class="fa fa-address-book"></i>
                ipsum urna sed risus
            </a>
        </li>
        <li>
            <span class="spliter">
                <i class="fa fa-cut"></i>
                Maecenas fermentum
            </span>
        </li>
    </ul>
</nav>
AI 代码解读

初始化插件

$(function () {
   
    var rvnMenu = $("#navbar").rvnm({
   
        searchable: true,
        theme: 'dark-lesb'
    });
    rvnMenu.setTheme('dark-doder');
});
AI 代码解读

主题

  • dark
  • dark-lesb dark & pink
  • dark-doder dark & blue
  • dark-beryl dark & green
  • dark-ruby dark & red
目录
打赏
0
6
6
0
53
分享
相关文章
|
21天前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
35 14
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
65 21
|
1月前
|
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
49 9
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
31 2
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
31 2
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
78 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等