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

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 */

效果图：

侧边导航效果图

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

猜你喜欢