js实现侧边栏效果

最新推荐文章于 2024-07-31 17:45:09 发布

charlene程程

最新推荐文章于 2024-07-31 17:45:09 发布

阅读量9.1k

点赞数 2

分类专栏： javascript 文章标签： js 侧边栏

本文链接：https://blog.csdn.net/charlene0824/article/details/50497187

版权

本文介绍如何模仿淘宝的侧边栏效果，包括HTML和CSS的构建，以及利用JavaScript实现动画效果。侧边栏的HTML结构中，图标借助Bootstrap完成，菜单项ID与对应的div ID遵循特定命名规则，便于JS操作。通过创建私有作用域和构造函数，定义了侧边栏对象及其打开、关闭方法，实现了动画过渡。

摘要由CSDN通过智能技术生成

模仿淘宝的侧边栏效果最终实现的效果图如下所示

该侧边栏对应的html代码如下需要说明的是该实例中的图标都是通过引用bootstrape中的图标实现的。另外，菜单项中的li的id和菜单项所对应的div的id是根据一定规律命名的，都是li的id后加“-content"命名的，方便以后的js操作

<div id="sideBar">
		<!-- 无序列表实现菜单项 -->
		<ul>
			<li id="prof" class="item">
				<span>
					<i class="glyphicon glyphicon-user"></i>
				</span>
				<div>我</div>
			</li>
			<li id="asset" class="item">
				<span>
                    <i class="glyphicon glyphicon-usd"></i>
                </span>
                <div>
                    资产
                </div>
			</li>
			<li id="brand" class="item">
				<span>
                    <i class="glyphicon glyphicon-heart"></i>
                </span>
                <div>
                    品牌
                </div>
			</li>
			<li id="broadcast" class="item">
				<span>
                    <i class="glyphicon glyphicon-bell"></i>
                </span>
                <div>
                    直播
                </div>
			</li>
			<li id="foot" class="item">
				<span>
                    <i class="glyphicon glyphicon-eye-open"></i>
                </span>
                <div>
                    看过
                </div>
			</li>
			<li id="calendar" class="item">
				<span>
                    <i class="glyphicon glyphicon-time"></i>
                </span>
                <div>
                    日历
                </div>
			</li>
		</ul>
		<div id='closeBar'>
			<span class="glyphicon glyphicon-remove"></span>
		</div>
	</div>
		<div id="prof-content" class="nav-content">
        <div class="nav-con-close">
            &