Made more improvements to main menu

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1204 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/svg-editor.css

@@ -236,6 +236,9 @@
 	position: absolute;
 	top: 4px;
 	left: 4px;
+}
+
+#svg_editor #main_icon {
 	padding: 0px;
 	width: 44px;
 	height: 30px;
@@ -244,9 +247,11 @@
 	-webkit-border-radius: 8px;
 }
 
-#svg_editor #main_button:hover {
+#svg_editor #main_icon:hover,
-	top: 2px;
+#svg_editor #main_icon.down {
-	left: 2px;
+	top: -2px;
+	left: -2px;
+	position: relative;
 	padding: 1px 0 2px 1px;
 	border-left: 1px #fcd9ba solid;
 	border-top: 1px #fcd9ba solid;
@@ -255,8 +260,23 @@
 	background-color: #FFC;
 }
 
+#svg_editor #main_icon.down { 
+	background-color: #f4e284;
+	border-top: 1px solid #630;
+	border-left: 1px solid #630;
+	top: -1px;
+	left: -1px;
+}
+
+#svg_editor #main_icon span {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	display: block;
+	z-index: 2;
+}
+
 #svg_editor #main_menu {
-/*	position: */
 	z-index: 1;
 	background: #E8E8E8;
 	position: relative;
@@ -266,6 +286,9 @@
 	-webkit-box-shadow: #555 1px 1px 4px;
 	font-size: 1.1em;
 	display: none;
+	overflow: hidden;
+	border: 1px outset gray;
+	clear: both;
 }
 
 #svg_editor #main_menu ul,
@@ -303,7 +326,9 @@
 	height: 32px;
 }
 
-#main_button > div {
+
+
+#main_icon > div {
 	float: left;
 }
 

editor/svg-editor.html

@@ -75,8 +75,11 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 </div>
 
 <div id="main_button" title="Main Menu">
-	<div id="logo"></div>
+	<div id="main_icon">
-	<div class="dropdown"></div>
+		<span></span>
+		<div id="logo"></div>
+		<div class="dropdown"></div>
+	</div>
 		
 	<div id="main_menu"> 
 	
@@ -84,7 +87,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		<ul>
 			<li id="tool_clear">
 				<div></div>
-				New Image [N]
+				<label>New Image [N]</label>
 			</li>
 			
 			<li id="tool_open" style="display:none;">

editor/svg-editor.js

@@ -724,29 +724,39 @@ function svg_edit_setup() {
 	};
 	
 	(function() {
-		var button = $('#main_button');
+		var button = $('#main_icon');
+		var overlay = $('#main_icon span');
 		var list = $('#main_menu');
 		var on_button = false;
+		var height = 0;
 		$().mouseup(function(evt) {
 			if(!on_button) {
 				// FIXME: figure out why the main_button stays hovered...
 				button.removeClass('down');
 				// do not hide if it was the file input as that input needs to be visible 
 				// for its change event to fire
-				if (evt.target.localName != "input") 
+				if (evt.target.localName != "input")
-					list.hide();
+					list.fadeOut(100);
 			}
 			on_button = false;
 		});
 		
-		button.bind('mousedown',function() {
+		overlay.bind('mousedown',function() {
 			if (!button.hasClass('down')) {
 				button.addClass('down');
 				list.show();
+				if(!height) {
+					height = list.height();
+				}
+				// Using custom animation as slideDown has annoying "bounce effect"
+				list.css('height',0).animate({
+					'height': height
+				},200);
 				on_button = true;
+				return false;
 			} else {
 				button.removeClass('down');
-// 				list.hide();
+				list.fadeOut(200);
 			}
 		}).hover(function() {
 			on_button = true;