要在个人网站中实现一个左侧抽屉式分享浮动导航，你可以使用HTML、CSS和JavaScript来创建这个交互效果

Bol5261

已于 2024-02-24 18:26:06 修改

阅读量1.9k

点赞数

分类专栏： HTML5(HyperText Markup) Bootstrap(Twitter Mark Jacob) JQuery(AJAX、HTML、CSS) 文章标签： css html js html5 css3

于 2020-07-08 15:49:28 首次发布

本文链接：https://blog.csdn.net/blog_programb/article/details/107207668

版权

HTML5(HyperText Markup) 同时被 3 个专栏收录

302 篇文章 14 订阅

订阅专栏

Bootstrap(Twitter Mark Jacob)

103 篇文章 1 订阅

订阅专栏

JQuery(AJAX、HTML、CSS)

102 篇文章 0 订阅

订阅专栏

要在个人网站中实现一个左侧抽屉式分享浮动导航，你可以使用HTML、CSS和JavaScript来创建这个交互效果。下面是一个基本的实现示例：

HTML部分 (index.html):

html

左侧抽屉式分享浮动导航

<button id="toggleDrawer">打开/关闭导航</button>  

<script src="script.js"></script>

CSS部分 (styles.css):

css
.drawer-container {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100%;
background-color: #f9f9f9;
transition: left 0.3s ease;
overflow-y: auto;
}

.drawer {
padding: 20px;
}

.drawer h3 {
margin-top: 0;
}

.drawer ul {
list-style-type: none;
padding: 0;
}

.drawer li {
margin-bottom: 10px;
}

.drawer li a {
text-decoration: none;
color: #333;
}

#toggleDrawer {
position: fixed;
top: 10px;
left: 10px;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

.drawer-container.active {
left: 0;
}
JavaScript部分 (script.js):

javascript
document.getElementById(‘toggleDrawer’).addEventListener(‘click’, function() {
var drawer = document.getElementById(‘drawer’);
drawer.classList.toggle(‘active’);
});
在这个示例中，我们创建了一个名为.drawer-container的固定位置容器，它默认位于屏幕左侧之外（left: -300px）。这个容器包含了我们想要的导航内容（例如分享链接）。一个按钮（#toggleDrawer）用于触发导航的打开和关闭。

CSS中的.active类用于改变.drawer-container的left属性，使其从左侧滑出。

在JavaScript中，我们给按钮添加了一个点击事件监听器，当点击按钮时，会切换.drawer元素的.active类，从而实现导航的打开和关闭效果。

你可以根据需要调整CSS样式和JavaScript逻辑，以适应你的个人网站设计和功能需求。例如，你可以添加过渡效果、改变导航的宽度和高度、添加更多的分享选项等。
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="programb" />
<meta name="description" content="programb" />
<title>网站左侧抽屉式分享浮动导航</title>
<link href="css/share.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div id="appgame-leftside-share">
	<div class="appgame-leftside-share rwt_share" id="rwt_share">
        <a class="appgame-leftside-weixin" data-cmd="weixin" title="分享到微信">微信</a>
		<a class="appgame-leftside-qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
		<a class="appgame-leftside-sqq" data-cmd="sqq" title="分享到QQ好友">QQ好友</a>
		<a class="appgame-leftside-tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
		<a class="appgame-leftside-fbook" data-cmd="fbook" title="分享到Facebook">Facebook</a>
		<a class="appgame-leftside-twi" data-cmd="twi" title="分享到Twitter">Twitter</a>
	</div>
		<a class="appgame-leftside-top" onclick=""></a>
</div>
<script type="text/javascript" src="js/lrtk.js"></script>
<script type="text/javascript" src="js/share.min.js"></script>
<!-- 代码 结束 -->

<div style="text-align:center;margin:0 auto;padding:50px 0;background:#DDD;width:1180px;height:5000px;">
<h1>向下滚动页面，查看效果</h1>
<br /><br />
<h1> ↓</h1>
<br /><br />
<h1> ↓↓</h1>
<br /><br />
<h1> ↓↓↓</h1>
<br /><br /><br />
<p>programb：<a href="http://www.programb.com" target="_blank">programb</a>programb<a href="http://www.programb.com/" target="_blank">programb</a>　programb：<a href="http://programb.com/" target="_blank">programb</a></p>
<p>programb</p>
<p></p>
<p><p>programb</p><p>programb</p><p>programb</p><p>programb</p><p>programb</p><p>programb</p></p>
<p style="margin:20px 0"></p>
</div>
</body>
</html>

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button { margin: 0; padding: 0; }
body{ font-family: "Microsoft YaHei", "programb"; }
a { text-decoration: none; }
a:active, a:hover { text-decoration: none; }

#appgame-leftside-share{width:44px; height:302px; position:fixed; left:50%; margin-left:-664px; top:50%; margin-top:-151px; z-index:9999; display:none;}
.appgame-leftside-share{width:44px; height:259px;}
#appgame-leftside-share a{display:block; width:44px; height:44px; background-color:#fff; z-index:1; position:absolute; left:0; box-sizing:border-box; -moz-box-sizing:border-box; border:1px #cccccc solid; background-image:url(../images/share-icons.png); background-repeat:no-repeat; margin:0;  transition:0.4s; -webkit-transition:0.4s; -moz-transition:0.4s;}
#appgame-leftside-share a:hover{background-color:#bf1313; border:1px #bf1313 solid; z-index:2;}
.appgame-leftside-weixin{top:0; background-position:-88px 0;}
.appgame-leftside-weixin:hover{background-position:-44px 0;}
.appgame-leftside-qzone{top:43px; background-position:-88px -44px;}
.appgame-leftside-qzone:hover{background-position:-44px -44px;}
.appgame-leftside-sqq{top:86px; background-position:-88px -88px;}
.appgame-leftside-sqq:hover{background-position:-44px -88px;}
.appgame-leftside-tsina{top:129px; background-position:-88px -132px;}
.appgame-leftside-tsina:hover{background-position:-44px -132px;}
.appgame-leftside-fbook{top:172px; background-position:-88px -176px;}
.appgame-leftside-fbook:hover{background-position:-44px -176px;}
.appgame-leftside-twi{top:215px; background-position:-88px -220px;}
.appgame-leftside-twi:hover{background-position:-44px -220px;}
#appgame-leftside-share .appgame-leftside-top{background-image:url(../images/leftnav-off.png); background-position:-1px -395px; top:258px; cursor:pointer;}

.rwt_share {
	overflow:hidden;
	float:left;
	position:relative;
}
.rwt_share a {
	display:inline-block;
	margin-right:10px;
	text-indent:-9999px;
	margin-bottom:10px;
	width:24px;
	height:24px;
	overflow:hidden;
	cursor:pointer;
	float:left;
	font-size:12px;
}
.rwts_weixin {
	background-position:0 -1612px;
}
.rwts_tsina {
	background-position:0 -104px;
}
.rwts_tqq {
	background-position:0 -260px;
}
.rwts_qzone {
	background-position:0 -52px;
}
.rwts_sqq {
	background-position:0 -2652px;
}
.rwts_tieba {
	background-position:0 -728px;
}
.rwts_renren {
	background-position:0 -208px;
}
.rwts_kaixin001 {
	background-position:0 -312px;
}
.rwts_tqf {
	background-position:0 -364px;
}
.rwts_douban {
	background-position:0 -468px;
}
.rwts_twi {
	background-position:0 -1404px;
}
.rwts_fbook {
	background-position:0 -1352px;
}
.rwts_ty {
	background-position:0 -1196px;
}
.rwts_mogujie {
	background-position:0 -1768px;
}
.rwts_meilishuo {
	background-position:0 -1716px;
}
.rwts_huaban {
	background-position:0 -1872px;
}
.rwts_hi {
	background-position:0 -416px;
}
.rwts_tsohu {
	background-position:0 -520px;
}
.rwts_more {
	background-position:0 0;
}
.rwt_share_wxShow_code>img {
	width:100%;
}