【模板】jQuery实现简单侧边导航条

最新推荐文章于 2023-12-23 23:46:51 发布

TAO_GIS

最新推荐文章于 2023-12-23 23:46:51 发布

阅读量1.6k

点赞数 1

分类专栏：前端 Javascript 文章标签： jquery 前端 html css 导航条

本文链接：https://blog.csdn.net/TAO_GIS/article/details/81288639

版权

前端同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

Javascript

10 篇文章 0 订阅

订阅专栏

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/test.css" />
    <title>test1</title>
</head>

<body>
    <div class="caidan">
        <ul class="caidan-ul">
            <li>
                <div class="caidan-item active"><a class="caidan-a">一级菜单</a></div>
                <div class="zicaidan">
                    <dl>
                        <dd><a class="caidan-a">二级菜单</a></dd>
                        <dd><a class="caidan-a">二级菜单</a></dd>
                        <dd><a class="caidan-a">二级菜单</a></dd>
                        <dd><a class="caidan-a">二级菜单</a></dd>
                    </dl>
                </div>
            </li>
            <li><a class="caidan-a">一级菜单</a></li>
            <li><a class="caidan-a">一级菜单</a></li>
            <li><a class="caidan-a">一级菜单</a></li>
            <li><a class="caidan-a">一级菜单</a></li>
        </ul>
    </div>
    <div class="main-content"></div>
    <script src="bootstrap/js/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('.caidan-item').click(function () {
                $(this).toggleClass('active')
                $(this).next().slideToggle()
                
            })
        })
    </script>
</body>

</html>

css:

body {
  height: 800px;
  width: 100%;
  margin: 0; }

.caidan {
  width: 200px;
  height: 100%;
  border: 1px solid #000000;
  float: left; }
  .caidan .caidan-ul {
    list-style: none;
    padding: 0; }
    .caidan .caidan-ul .caidan-item {
      height: 50px; }
    .caidan .caidan-ul .active {
      background-color: red; }

.caidan-a {
  padding-left: 40px; }

.main-content {
  overflow: hidden;
  height: 100%;
  display: inline-block;
  margin-left: 202px; }

/*# sourceMappingURL=test.css.map */

效果图：

侧边导航效果图

TAO_GIS

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【模板】jQuery实现简单侧边导航条

html:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp
复制链接

扫一扫

专栏目录