右边菜单侧拉框

zoukankan html css js c++ java

右边菜单侧拉框

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/Reset.css">
<link rel="stylesheet" type="text/css" href="css/home_right.css">
</head>

<body>
<div class="rightBar">
<div class="nav">
<div class="right_cont">
<div class="right_cont_nav">
<dl class="rightBar1 mouseleave">
<a href="#"><dt></dt>
<dd></dd>
</a>
</dl>
<dl class="rightBar2 mouseevent">
<a href="#"><dt></dt>
<dd>我的</dd>
</a>
</dl>
</div>

<div class="right_cont_nav">
<dl class="rightBar3 mouseleave">
<a href="#"><dt></dt>
<dd></dd>
</a>
</dl>
<dl class="rightBar4 mouseevent">
<a href="#"><dt></dt>
<dd>清单</dd>
</a>
</dl>
</div>

<div class="right_cont_nav">
<dl class="rightBar5 mouseleave">
<a href="#"><dt></dt>
<dd></dd>
</a>
</dl>
<dl class="rightBar6 mouseevent">
<a href="#"><dt></dt>
<dd>消息</dd>
</a>
</dl>
</div>

<div class="right_cont_nav">
<dl class="rightBar7 mouseleave">
<a href="#"><dt></dt>
<dd></dd>
</a>
</dl>
<dl class="rightBar8 mouseevent">
<a href="#"><dt></dt>
<dd>客服</dd><span style="position: relative;top: -35px;;left:-80px;color:#ff7700;display: inline-block; 80px;font-weight: 800;">010-7801022</span></a>
</dl>
</div>

</div>

<div class="right_foot">
<div class="right_cont_nav">
<dl class="rightBar9 mouseleave">
<a href="#"><dt></dt>
<dd></dd>
</a>
</dl>
<dl class="rightBar10 mouseevent">
<a href="#"><dt></dt>
<dd class="code"><img src="images/code_phone.gif"></dd>
</a>
</dl>

</div>
<div class="right_cont_nav gotop">
<dl class="rightBar11 mouseleave">
<a href="#"><dt></dt>
<dd></dd>
</a>
</dl>
<dl class="rightBar12 mouseevent">
<a href="#"><dt></dt>
<dd></dd>
</a>
</dl>
</div>
</div>
</div>
<div class="shoppingcar">
<div class="shoppingcar_title">
</div>
<div class="shoppingcar_cont">
<div>
<dl>
</dl>
</div>
</div>
</div>
</div>
<div class="toggle-content">

<div style="display: none;" class="toggle-content1">
<div class="toggle-content-title">我的</div>
<button onclick="pack()" class="toggle-content-button" style="position:absolute;top:10px;right:20px;72px;height:45px;font-size:18px;border:none;border-radius:5px;background:#ff7700;color:#fff;display:block;">收起</button>
<div style="display:flex;flex-direction:column;padding:10px;justify-content:space-between;height:400px;">
<div style="margin:20px 0;" class="toggle-content-href">
<a href="../center_web/buyer_supply.html" target="_blank"> 供应信息</a>：</div>
<div style="margin:20px 0;" class="toggle-content-href">
<a href="../center_web/buyer_procurement.html" target="_blank">采购信息</a>：</div>
<div style="margin:20px 0;" class="toggle-content-href">
<a href="../center_web/buyer_supplier.html" target="_blank">供应商</a>：</div>
</div>
</div>

<div style="display: none;" class="toggle-content1">
<div class="toggle-content-title">清单</div><button onclick="pack()" class="toggle-content-button" style="position:absolute;top:10px;right:20px;72px;height:45px;font-size:18px;border:none;border-radius:5px;background:#ff7700;color:#fff;display:block;">收起</button>
<div class="toggle-content-login">你还没有登陆，请
<a href="Sign_in.html">登陆</a>
</div>
<div class="toggle-content-content"><span>购物车空空的，赶紧去挑选心仪的商品吧~</span><span>去首页看看</span></div>
<div class="toggle-content-table">
<table>
<tr>
<td>商品名</td>
<td>价格</td>
<td>数量</td>
</tr>
<tr class="thing" onclick="skip()">
<td>HMn55-3-1 锰黄铜（铜棒铜线模锻）高强度高耐磨</td>
<td>46元</td>
<td>1kg</td>
</tr>
<tr class="thing" onclick="skip()">
<td>HMn55-3-1 锰黄铜（铜棒铜线模锻）高强度高耐磨</td>
<td>46元</td>
<td>1kg</td>
</tr>
<tr class="thing" onclick="skip()">
<td>HMn55-3-1 锰黄铜（铜棒铜线模锻）高强度高耐磨</td>
<td>46元</td>
<td>1kg</td>
</tr>
</table>
</div>
<div class="toggle-content-button">
<div><span>0件商品</span><span>共计：￥0.00元</span></div>
<a href="shopcar.html"><button>去购物车结算</button></a>
</div>
</div>

<div style="display: none;" class="toggle-content1">
<div class="toggle-content-title">消息</div>
<button onclick="pack()" class="toggle-content-button" style="position:absolute;top:10px;right:20px;72px;height:45px;font-size:18px;border:none;border-radius:5px;background:#ff7700;color:#fff;display:block;">收起</button>
<div class="toggle-content-login">你还没有登陆，请
<a href="Sign_in.html">登陆</a>
</div>
<div class="toggle-content-login"><span class="message message2">系统消息</span><span class="message">客户咨询</span><span class="message">我的咨询</span></div>
<div class="toggle-content-content clearfloat"><span>店家小二</span><span style="float:right;">2018-3-20</span>
<div style="margin-top:5px;" onclick="getMessage()">      中虽集团杭州公司赣州地铁3好险打算单数据库钢管一批中虽集团杭州公司赣州地铁3好险打算单数据库钢管一批</div>
<div style="display:flex;flex-direction:row-reverse">
<a href="mall_stockdet.html" target="_blank">查看更多</a>
</div>
</div>
<div class="toggle-content-content clearfloat"><span>店家小二</span><span style="float:right;">2018-3-20</span>
<div style="margin-top:5px;" onclick="getMessage()">      中虽集团杭州公司赣州地铁3好险打算单数据库钢管一批中虽集团杭州公司赣州地铁3好险打算单数据库钢管一批</div>
<div style="display:flex;flex-direction:row-reverse">
<a href="mall_stockdet.html" target="_blank">查看更多</a>
</div>
</div>
<div class="toggle-content-content clearfloat"><span>店家小二</span><span style="float:right;">2018-3-20</span>
<div style="margin-top:5px;" onclick="getMessage()">      中虽集团杭州公司赣州地铁3好险打算单数据库钢管一批中虽集团杭州公司赣州地铁3好险打算单数据库钢管一批</div>
<div style="display:flex;flex-direction:row-reverse">
<a href="mall_stockdet.html" target="_blank">查看更多</a>
</div>
</div>
</div>

</div>
</body>
<script type="text/javascript" src="js/jquery-1.10.2.min_65682a2.js"></script>
<script type="text/javascript">
$(".right_cont_nav").mouseenter(function() {
$(this).find(".mouseevent").show();
$(this).find(".mouseleave").hide();
})

$(".right_cont_nav").mouseleave(function() {
$(this).find(".mouseevent").hide();
$(this).find(".mouseleave").show();
})

$(".gotop").click(function() {
$('body,html').animate({
scrollTop: '0'
}, 500);
})
$(window).scroll(function() {
if($(window).scrollTop() > 500) {
$(".gotop").show();
} else {
$(".gotop").hide();
}
})
</script>

<script type="text/javascript">
$(".rightBar2").click(function() {
if($(".toggle-content").css("display") == "none") {
$(".toggle-content").animate({
right: 'toggle'
}, 200);
}
$(".toggle-content1").hide();
$(".toggle-content1").eq(0).show();
})

$(".rightBar4").click(function() {
if($(".toggle-content").css("display") == "none") {
$(".toggle-content").animate({
right: 'toggle'
}, 200);
}
$(".toggle-content1").hide();
$(".toggle-content1").eq(1).show();
})

$(".rightBar6").click(function() {
if($(".toggle-content").css("display") == "none") {
$(".toggle-content").animate({
right: 'toggle'
}, 200);
}
$(".toggle-content1").hide();
$(".toggle-content1").eq(2).show();
$(".message").click(function() {
$(".message").removeClass("message2");
$(this).addClass("message2");
})
})
</script>
<script type="text/javascript">
function pack() {
$(".toggle-content").animate({
right: 'toggle'
}, 200);
}
$(".rightBar,.toggle-content").click(function(event) {
event.stopPropagation();
})
$(document).click(function() {
$(".toggle-content").hide();
})

function skip() {
location.href = "#";
}

function getMessage() {
window.open("#")
}
</script>

</html>

//css和图标部分就懒得上传了

查看全文

相关阅读:
pytorch 文本输入处理
 理解 on-policy 和 off-policy
Monte Carlo与TD算法
 Monte Calro Tree Search (MCTS)
强化学习概览
 linux 服务器 keras 深度学习环境搭建
 sed和awk学习整理
 linux shell编程进阶学习(转)
gdb调试：
MySQL C API 访问 MySQL 示例

原文地址：https://www.cnblogs.com/wangxiaoer5200/p/8694660.html