Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

extend menu

  • Loading branch information...
commit 8638a5f7cd67a4583a67039efadeaf69429916db 1 parent dce25db
Leegorous authored February 09, 2012
49  index.html
@@ -10,7 +10,7 @@
10 10
     
11 11
     <body>
12 12
         <div class="header">
13  
-            <div class="container nav-bar-bg">
  13
+            <div class="row nav-bar-bg">
14 14
                 <div class="offset8 span4 mask">
15 15
                     <h1><a href="/">Leegorous' Homepage</a></h1>
16 16
                 </div>
@@ -18,29 +18,38 @@
18 18
             <!-- <h1>Ga~~ Ga~~ Woooo~~ Call it when you needs me~ </h1> -->
19 19
         </div>
20 20
         <div id="content-wrap">
21  
-            <div class="container">
22  
-                <div id="content" class="offset8 span4 mask">
23  
-                    <ul class="menu">
24  
-                        <li><a href="https://plus.google.com/102519126108698565521/posts" title="Google+ Profile">Google+ Profile</a></li>
25  
-                        <li><a href="http://leegorous.net/blog/" title="欢 迎 浏 览 我 的 博客">博客 Blog</a></li>
26  
-						<li><a href="https://github.com/Leegorous" title="Fork me on Github">Github Profile</a></li>
27  
-                        <li><a href="https://twitter.com/#!/leegorous" title="Follow me on Twitter">@Twitter</a></li>
28  
-                        <li><a href="http://weibo.com/leegorous" title="欢 迎 围 观 我 的 微博">@新浪微博</a></li>
29  
-                        <li><a href="http://www.douban.com/people/leegorous/" title="我 读 过 的 书, 看 过 的 电影 和 喜 欢 的 音乐">豆瓣</a></li>
30  
-						<li><a href="http://www.flickr.com/people/leegorous/" title="我 的 flickr 图集">Flickr</a></li>
31  
-                    </ul>
  21
+            <div class="row slice-box-wrap">
  22
+                <div class="slice-box">
  23
+                    <div id="content" class="span4 mask menu offset8">
  24
+                        <ul>
  25
+                            <li><a href="https://plus.google.com/102519126108698565521/posts" title="Google+ Profile">Google+ Profile</a></li>
  26
+                            <li><a href="http://leegorous.net/blog/" title="欢 迎 浏 览 我 的 博客">博客 Blog</a></li>
  27
+    						<li><a href="https://github.com/Leegorous" title="Fork me on Github">Github Profile</a></li>
  28
+                            <li><a href="https://twitter.com/#!/leegorous" title="Follow me on Twitter">@Twitter</a></li>
  29
+                            <li><a href="http://weibo.com/leegorous" title="欢 迎 围 观 我 的 微博">@新浪微博</a></li>
  30
+                            <li><a href="http://www.douban.com/people/leegorous/" title="我 读 过 的 书, 看 过 的 电影 和 喜 欢 的 音乐">豆瓣</a></li>
  31
+    						<li><a href="http://www.flickr.com/people/leegorous/" title="我 的 flickr 图集">Flickr</a></li>
  32
+                            <li><a class="tools" href="javascript:;">工具集</a></li>
  33
+                        </ul>
  34
+                    </div>
  35
+                    <div class="span4 mask menu">
  36
+                        <ul>
  37
+                            <li><a href="http://leegorous.net/tools/bg-alpha.html">透明背景色 CSS 生成器</a></li>
  38
+                            <li><a href="http://leegorous.net/tools/gen-pwd.html">密码生成器</a></li>
  39
+                        </ul>
  40
+                    </div>
32 41
                 </div>
33 42
             </div>
34 43
         </div>
35 44
         <div class="footer">
36  
-            <div class="container footer-bg">
  45
+            <div class="row footer-bg">
37 46
                 <div class="offset8 span4 contacts mask">
38 47
                     <p>联系方式: <img src="images/mail.png" /></p>
39 48
                     <p>leegorous.net 2007 - 2012</p>
40 49
                 </div>
41 50
             </div>
42 51
         </div>
43  
-        <script type="text/javascript">
  52
+        <script>
44 53
           var _gaq = _gaq || [];
45 54
           _gaq.push(['_setAccount', 'UA-424296-1']);
46 55
           _gaq.push(['_trackPageview']);
@@ -51,5 +60,17 @@
51 60
             var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
52 61
           })();
53 62
         </script>
  63
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  64
+        <script>
  65
+        $('.tools').click(function() {
  66
+            if ($(this).hasClass('opened')) {
  67
+                $(this).removeClass('opened');
  68
+                $('#content').removeClass('offset4 slice-8-4').addClass('offset8 slice-4-8');
  69
+            } else {
  70
+                $(this).addClass('opened');
  71
+                $('#content').removeClass('offset8 slice-4-8').addClass('offset4 slice-8-4');
  72
+            }
  73
+        });
  74
+        </script>
54 75
     </body>
55 76
 </html>
83  less/default.less
... ...
@@ -1,5 +1,3 @@
1  
-@import "base";
2  
-
3 1
 @col-width: 70px;
4 2
 @col-margin: 10px;
5 3
 @col-max: 12;
@@ -8,6 +6,9 @@
8 6
 
9 7
 @img-height: 768px;
10 8
 
  9
+@import "base";
  10
+@import "keyframes";
  11
+
11 12
 body {
12 13
 	font: 13px/1.5 'Helvetica Neue',Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
13 14
 	.v-linear(#666666, #999999);
@@ -33,20 +34,54 @@ body {
33 34
 	.v-linear(#111111, #333333);
34 35
 }
35 36
 
36  
-.container {
  37
+.row {
37 38
 	margin: 0 auto;
38 39
 	width: @page-min-width;
  40
+	zoom: 1;
  41
+}
  42
+
  43
+.row:before, .row:after {
  44
+	display: table;
  45
+	content: "";
  46
+}
  47
+
  48
+.row:after {
  49
+	clear: both;
  50
+}
  51
+
  52
+[class*="span"] {
  53
+	float: left;
39 54
 }
40 55
 
41 56
 .span4 {
42  
-	width: (@col-width + @col-margin) * 4 - @col-margin;
43 57
 	margin-left: @col-margin;
  58
+	width: (@col-width + @col-margin) * 4 - @col-margin;
  59
+}
  60
+
  61
+.offset4 {
  62
+	margin-left: (@col-width + @col-margin) * 4 + @col-margin;
44 63
 }
45 64
 
46 65
 .offset8 {
47 66
 	margin-left: (@col-width + @col-margin) * 8 + @col-margin;
48 67
 }
49 68
 
  69
+.slice-box-wrap {
  70
+	overflow: hidden;
  71
+}
  72
+
  73
+.slice-box {
  74
+	width: (@col-width + @col-margin) * 20;
  75
+}
  76
+
  77
+.slice-8-4 {
  78
+	.animation(open, .65s, 1, ease);
  79
+}
  80
+
  81
+.slice-4-8 {
  82
+	.animation(close, .65s, 1, ease);
  83
+}
  84
+
50 85
 #content-wrap {
51 86
 	min-width: @page-min-width;
52 87
 	height: @img-height;
@@ -54,34 +89,38 @@ body {
54 89
 }
55 90
 
56 91
 #content {
57  
-	height: @img-height;
58 92
 }
59 93
 
60 94
 .mask {
61  
-	background-color: rgba(0, 0, 0, 0.2);
  95
+	background-color: rgba(0, 0, 0, 0.4);
62 96
 	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000)";
63 97
 }
64 98
 
65 99
 .menu {
66  
-	padding: 40px 0 0 0;
67  
-	list-style: none;
68  
-
69  
-	li {
70  
-		a {
71  
-			display: block;
72  
-			font-size: 16px;
73  
-			padding: 15px 0 15px 30px;
74  
-			color: #CCC;
75  
-			text-decoration: none;
76  
-			text-rendering: optimizelegibility;
77  
-			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
78  
-		}
  100
+	height: @img-height;
79 101
 
80  
-		a:hover {
81  
-			color: #FFF;
82  
-			background-color: rgba(0, 0, 0, 0.6);
  102
+	ul {
  103
+ 		padding: 40px 0 0 0;
  104
+		list-style: none;
  105
+
  106
+		li {
  107
+			a {
  108
+				display: block;
  109
+				font-size: 16px;
  110
+				padding: 15px 0 15px 30px;
  111
+				color: #CCC;
  112
+				text-decoration: none;
  113
+				text-rendering: optimizelegibility;
  114
+				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  115
+			}
  116
+
  117
+			.opened, a:hover {
  118
+				color: #FFF;
  119
+				background-color: rgba(0, 0, 0, 0.6);
  120
+			}
83 121
 		}
84 122
 	}
  123
+
85 124
 }
86 125
 
87 126
 .contacts {
32  less/keyframes.less
... ...
@@ -0,0 +1,32 @@
  1
+.h-move(@from, @to) {
  2
+    from { margin-left: @from; }
  3
+	to { margin-left: @to; }
  4
+}
  5
+
  6
+.animation(@name, @duration, @count, @way) {
  7
+    -webkit-animation: @arguments;
  8
+    -moz-animation: @arguments;
  9
+    -o-animation: @arguments;
  10
+}
  11
+
  12
+/*.h-move("open", (@col-width + @col-margin) * 8 + @col-margin, (@col-width + @col-margin) * 4 + @col-margin); */
  13
+
  14
+@keyframes open {
  15
+    .h-move((@col-width + @col-margin) * 8 + @col-margin, (@col-width + @col-margin) * 4 + @col-margin);
  16
+}
  17
+@-webkit-keyframes open {
  18
+    .h-move((@col-width + @col-margin) * 8 + @col-margin, (@col-width + @col-margin) * 4 + @col-margin);
  19
+}
  20
+@-moz-keyframes open {
  21
+    .h-move((@col-width + @col-margin) * 8 + @col-margin, (@col-width + @col-margin) * 4 + @col-margin);
  22
+}
  23
+
  24
+@keyframes close {
  25
+    .h-move((@col-width + @col-margin) * 4 + @col-margin, (@col-width + @col-margin) * 8 + @col-margin);
  26
+}
  27
+@-webkit-keyframes close {
  28
+    .h-move((@col-width + @col-margin) * 4 + @col-margin, (@col-width + @col-margin) * 8 + @col-margin);
  29
+}
  30
+@-moz-keyframes close {
  31
+    .h-move((@col-width + @col-margin) * 4 + @col-margin, (@col-width + @col-margin) * 8 + @col-margin);
  32
+}

0 notes on commit 8638a5f

Please sign in to comment.
Something went wrong with that request. Please try again.