HTML5代码实现网站侧边抽屉式分享浮动导航

PetitQ WordPress教程 2020-9-18 1.47K 0 0

设想你需要设计一个含有许多页面和模块，不能在一屏内显示完全的应用。你一定会首先想到去设计一个底部或顶部的 Tab 导航。等一下，多出来的一排导航看上去有点碍眼？我们尝试下把他们收到侧边栏里，或者叫安卓团队给它的名字“侧边抽屉导航”。

HTML 代码：

<!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.yoursite.com" target="_blank" rel="noopener noreferrer">yoursite</a>yoursite<a href="http://www.yoursite.com/" target="_blank" rel="noopener noreferrer">yoursite</a>　yoursite：<a href="http://yoursite.com/" target="_blank" rel="noopener noreferrer">yoursite</a></p>

```
<p>yoursite</p>
```
```
<p></p>
```

<p><p>yoursite</p><p>yoursite</p><p>yoursite</p><p>yoursite</p><p>yoursite</p><p>yoursite</p></p>

```
<p style="margin:20px 0"></p>
```
```
</div>
```
```
</body>
```
```
</html>
```

也想出现在这里？联系我们吧

css 代码：

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", "微软雅黑"; }

```
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;}