think-node
/
popup.html

<html>
	<head>
		<title></title>
	</head>
	<body>
<style>
	*{margin: 0;padding: 0;}
	body{width:700px;height: auto; background-color:#CCC;overflow: hidden;height:auto;font-family: "微软雅黑";box-sizing: border-box;}
	.node{width: 100%;height:auto;overflow: hidden;}
	.menu{width: 6%;height:550px;float: left;background-color: #A0A0A0;transition: all 1s ease;position: relative;overflow: hidden;}
	.menu.active{width: 20%;}
	.node-box{width: 94%;height: 550px;overflow: hidden;float: right;transition: all 1s ease;}
	.node-box.active{width: 80%;}
	.title{width: 100%;height: 40px;background-color: #D9E2E0;color: #202126; line-height: 40px;padding: 0 10px;font-size: 16px;letter-spacing: 1px;font-family: "微软雅黑";}
	.content{width:100%;height: 510px;}
	.content textarea {width: 101%;height:100%;padding: 5px 10px;font-size: 14px;font-family: "微软雅黑";}
	.menu-list {width: 100%;height: auto;overflow-y: auto;padding: 5px 3px;box-sizing: border-box;}
	.menu-list li {cursor:hand; padding: 0 5px; margin-bottom: 2px; text-align: center;font-size: 14px;background-color: #D5D5D5;height: 30px;overflow: hidden;line-height: 30px;border-radius: 5px;background-color: #CCC}
	.menu-list li.hover{color: #3782C2;}
	.menu-list li.active{color: #FFF;background-color: #029191;}
	.menu-add{position: absolute;bottom: 35px;left: 0;z-index: 2;width:90%; margin: 0 3px; cursor:hand; padding: 0 5px; margin-bottom: 2px; text-align: center;font-size: 14px;background-color: #D5D5D5;height: 30px;overflow: hidden;line-height: 30px;border-radius: 5px;background-color: #CCC}
	.menu-add.del{bottom: 0;z-index: 1;}
	.menu-add.hover{color: #3782C2;}
	.title input{width: 150px;float: right; border: none;padding: 0 10px;height: 30px;margin: 5px 20px 5px 0;border-radius: 5px;font-family: "微软雅黑";font-size: 14px;transition: all 1s;}
	.title input.active{width:250px;}
	.title span{margin-left: 20px; float: left;}
</style>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
<div class="node">
	<div class="menu">
		<ul class="menu-list">
		</ul>
		<div class="menu-add del" id="add">新增</div>
		<div class="menu-add " id="del">删除</div>
	</div>
	<div class="node-box">
		<div class="title"><input type="text" name="title" id="title" value="" placeholder="标题"/><span>Think-Node--发现一个想法</span></div>
		<div class="content">
			<textarea name="" rows="" cols="" placeholder="请选择或创建一个列表			[Form Witt]"></textarea>

		</div>
	</div>
</div>
</body>
</html>