diff --git a/static/css/base.css b/static/css/base.css
index 06fde9a..d72cf88 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -45,6 +45,7 @@ ul {
background-color: #F8F8F8;
width: 340px;
z-index: 5;
+ display: none;
}
.frame li {
@@ -120,6 +121,21 @@ ul {
}
/* end framework */
+/* start menu */
+.menu > ul > li {
+ float: left;
+}
+
+.menu > ul > li > a,
+.menu > ul > li > span {
+ color: #000;
+ font-size: 12px;
+ line-height: 24px;
+ padding: 5px;
+ text-decoration: none;
+}
+/* end menu */
+
/* start editor */
.edit-panel {
background-color: #D7D7D7;
diff --git a/static/js/menu.js b/static/js/menu.js
new file mode 100644
index 0000000..22e3759
--- /dev/null
+++ b/static/js/menu.js
@@ -0,0 +1,19 @@
+var menu = {
+ init: function() {
+ this.subMenu();
+ },
+ subMenu: function () {
+ $(".menu > ul > li > a, .menu > ul> li > span").click(function() {
+ var $it = $(this);
+ $it.next().show();
+
+ $(".menu > ul > li > a, .menu > ul> li > span").unbind();
+
+ $(".menu > ul > li > a, .menu > ul> li > span").mouseover(function() {
+ $(".frame").hide();
+ var $it = $(this);
+ $it.next().show();
+ });
+ });
+ }
+};
\ No newline at end of file
diff --git a/static/js/wide.js b/static/js/wide.js
index f456175..bc26c66 100644
--- a/static/js/wide.js
+++ b/static/js/wide.js
@@ -83,6 +83,12 @@ var wide = {
if (!(event.target.id === "fileRMenu" || $(event.target).closest("#fileRMenu").length > 0)) {
$("#fileRMenu").hide();
}
+
+ if (!($(event.target).closest(".frame").length > 0 || event.target.className === "frame")) {
+ $(".frame").hide();
+ $(".menu > ul > li > a, .menu > ul> li > span").unbind("mouseover");
+ menu.subMenu();
+ }
});
},
save: function() {
@@ -216,4 +222,5 @@ var wide = {
$(document).ready(function() {
wide.init();
tree.init();
+ menu.init();
});
\ No newline at end of file
diff --git a/view/index.html b/view/index.html
index 27977c0..b952f21 100644
--- a/view/index.html
+++ b/view/index.html
@@ -17,17 +17,64 @@
@@ -37,7 +84,7 @@
-