qinyi素材网
当前位置: 首页 > jQuery素材 > 自适应右侧弹出菜单
  时间: 2021-10-22   阅读:946

插件介绍

右侧弹出菜单可以在电脑端和手机端正常显示,并且这是响应式的。

简要教程

右侧弹出菜单可以在电脑端和手机端正常显示,并且这是响应式的。

使用方法

在HTML中引入需要用到的css和js

<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

HTML结构

<main class="cd-main-content">

    <!-- put your content here -->

</main> <!-- cd-main-content -->

<nav id="cd-lateral-nav">
    <ul class="cd-navigation">
        <li class="item-has-children">
            <a href="#0">Services</a>
            <ul class="sub-menu">
                <li><a href="#0">Brand</a></li>
                <li><a href="#0">Web Apps</a></li>
                <li><a href="#0">Mobile Apps</a></li>
            </ul>
        </li> <!-- item-has-children -->

        <li class="item-has-children">
            <a href="#0">Products</a>
            <ul class="sub-menu">
                <li><a href="#0">Product 1</a></li>
                <li><a href="#0">Product 2</a></li>
                <li><a href="#0">Product 3</a></li>
                <li><a href="#0">Product 4</a></li>
                <li><a href="#0">Product 5</a></li>
            </ul>
        </li> <!-- item-has-children -->

        <li class="item-has-children">
            <a href="#0">Stockists</a>
            <ul class="sub-menu">
                <li><a href="#0">London</a></li>
                <li><a href="#0">New York</a></li>
                <li><a href="#0">Milan</a></li>
                <li><a href="#0">Paris</a></li>
            </ul>
        </li> <!-- item-has-children -->
    </ul> <!-- cd-navigation -->

    <ul class="cd-navigation cd-single-item-wrapper">
        <li><a href="#0">Tour</a></li>
        <li><a href="#0">Login</a></li>
        <li><a href="#0">Register</a></li>
        <li><a href="#0">Pricing</a></li>
        <li><a href="#0">Support</a></li>
    </ul> <!-- cd-single-item-wrapper -->

    <ul class="cd-navigation cd-single-item-wrapper">
        <li><a class="current" href="#0">Journal</a></li>
        <li><a href="#0">FAQ</a></li>
        <li><a href="#0">Terms & Conditions</a></li>
        <li><a href="#0">Careers</a></li>
        <li><a href="#0">Students</a></li>
    </ul> <!-- cd-single-item-wrapper -->

    <div class="cd-navigation socials">
        <a class="cd-twitter cd-img-replace" href="#0">Twitter</a>
        <a class="cd-github cd-img-replace" href="#0">Git Hub</a>
        <a class="cd-facebook cd-img-replace" href="#0">Facebook</a>
        <a class="cd-google cd-img-replace" href="#0">Google Plus</a>
    </div> <!-- socials -->
</nav>

具体效果请点击查看演示到演示界面体验。

上一篇: 下一篇: