Skip to content

Commit 4f49621

Browse files
AndorChenAndorChen
committed
adds drop down menu
1 parent 637eccb commit 4f49621

File tree

2 files changed

+109
-28
lines changed

2 files changed

+109
-28
lines changed

‎assets/styles/style.css

+83-22
Original file line numberDiff line numberDiff line change
@@ -576,7 +576,6 @@ a {
576576
background: rgba(255,255,255,.7);
577577
border-bottom: 3px solid #666;
578578
margin: 30px 0;
579-
overflow: hidden;
580579

581580
-moz-border-radius-bottomright: 3px;
582581
-webkit-border-bottom-right-radius: 3px;
@@ -670,6 +669,89 @@ a.btn:hover, a.btn:active {
670669
padding-left: 0;
671670
}
672671

672+
/* Also By */
673+
674+
.also-by {
675+
background: #eee;
676+
}
677+
.also-by-item {
678+
padding: 20px 20px 20px 170px;
679+
}
680+
681+
.also-by-item img {
682+
border: 1px solid #ccc;
683+
float: left;
684+
margin-left: -150px;
685+
}
686+
687+
.also-by-item h3 {
688+
margin: 0;
689+
}
690+
691+
/* Dropdown menu */
692+
.dropdown {
693+
position: relative;
694+
}
695+
.caret {
696+
display: inline-block;
697+
width: 0;
698+
height: 0;
699+
margin-left: 4px;
700+
vertical-align: middle;
701+
border-top: 4px solid;
702+
border-right: 4px solid rgba(0, 0, 0, 0);
703+
border-left: 4px solid rgba(0, 0, 0, 0);
704+
}
705+
.open .caret {
706+
border-top: none;
707+
border-bottom: 4px solid;
708+
}
709+
.open>a, .open> a.btn:hover, .open>a.btn:focus {
710+
background-image: -webkit-linear-gradient(top, #EDBF13, #F4CF2D);
711+
background: -moz-linear-gradient(top, #EDBF13 0%, #F4CF2D 100%);
712+
outline: none;
713+
}
714+
.open>.dropdown-menu {
715+
display: block;
716+
}
717+
.dropdown-menu {
718+
position: absolute;
719+
top: 100%;
720+
left: 0;
721+
z-index: 1000;
722+
display: none;
723+
float: left;
724+
min-width: 160px;
725+
padding: 5px 0;
726+
margin: 2px 0 0;
727+
font-size: 14px;
728+
text-align: left;
729+
list-style: none;
730+
background-color: #FFF;
731+
-webkit-background-clip: padding-box;
732+
background-clip: padding-box;
733+
border: 1px solid #CCC;
734+
border: 1px solid rgba(0, 0, 0, 0.15);
735+
border-radius: 4px;
736+
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
737+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
738+
}
739+
.dropdown-menu>li>a {
740+
display: block;
741+
padding: 3px 20px;
742+
clear: both;
743+
font-weight: 400;
744+
line-height: 1.42857143;
745+
color: #333;
746+
white-space: nowrap;
747+
text-decoration: none;
748+
}
749+
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
750+
color: #262626;
751+
text-decoration: none;
752+
background-color: #F5F5F5;
753+
}
754+
673755
/* TOC */
674756

675757
.toc {
@@ -809,27 +891,6 @@ a.btn:hover, a.btn:active {
809891
border-bottom: 1px solid black;
810892
}
811893

812-
/* Also By */
813-
814-
.also-by {
815-
background: #eee;
816-
}
817-
.also-by-item {
818-
padding: 20px 20px 20px 170px;
819-
overflow: hidden;
820-
}
821-
822-
.also-by-item img {
823-
border: 1px solid #ccc;
824-
float: left;
825-
margin-left: -150px;
826-
}
827-
828-
.also-by-item h3 {
829-
margin: 0;
830-
}
831-
832-
833894
/* Aside */
834895

835896
.aside {

‎index.html

+26-6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<meta name="author" content="Andor Chen" />
77
<meta name="description" content="Ruby on Rails Tutorial 中文版（原书第2版，涵盖 Rails 4）。" />
88
<link rel="stylesheet" href="/assets/styles/style.css" />
9+
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.2/jquery.min.js"></script>
10+
<script type="text/javascript" src="http://cdn.staticfile.org/twitter-bootstrap/3.2.0/js/dropdown.min.js"></script>
911
</head>
1012

1113
<body>
@@ -82,23 +84,41 @@ <h2>目录</h2>
8284
<div class="clearfix"></div>
8385
</div>
8486
<div class="also-by">
85-
<div id="railsguides-cn" class="also-by-item">
87+
<div id="railsguides-cn" class="also-by-item clearfix">
8688
<img src="assets/images/railsguidescn.png" width="127" height="164" alt="Rails 指南" />
8789
<h3>Rails 指南</h3>
8890
<p>Rails 指南由 Rails 官方维护，其中的文章都由经验丰富的 Rails 开发者撰写，再经由众多的读者审查，质量非常高。Rails 指南涵盖 Rails 的方方面面，文章内容深入浅出，易于理解，是 Rails 入门、开发的必备参考。</p>
89-
<p>购买电子书：<a class="btn" href="https://leanpub.com/rails-guides-cn" title="到 Leanpub 购买《Rails 指南》">Leanpub（Paypal 支付）</a>&nbsp;&nbsp;<a class="btn" href="https://selfstore.io/products/13" title="到 SelfStore 购买《Rails 指南》">SelfStore（支付宝支付）</a></p>
91+
<div class="dropdown">
92+
<a class="btn" data-toggle="dropdown" href="#">购买电子书<span class="caret"></span></a>
93+
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
94+
<li><a href="https://selfstore.io/products/13" title="到 SelfStore 购买《Rails 指南》">SelfStore（支付宝支付）</a></li>
95+
<li><a href="https://leanpub.com/rails-guides-cn" title="到 Leanpub 购买《Rails 指南》">Leanpub（Paypal 支付）</a></li>
96+
</ul>
97+
</div>
9098
</div>
91-
<div id="everydayrailsrspec-cn" class="also-by-item">
99+
<div id="everydayrailsrspec-cn" class="also-by-item clearfix">
92100
<img src="assets/images/everydayrailsrspeccn.jpg" width="127" height="164" alt="使用 RSpec 测试 Rails 程序" />
93101
<h3>使用 RSpec 测试 Rails 程序</h3>
94102
<p>你是否开发过一两个 Rails 应用程序，但是却没有编写可靠的测试？你是否只在浏览器中到处点击，就认为测试完成了？亦或者，什么都不做，十指交叉席地祷告程序可以正常运行？在这本书中，我会告诉你我是怎样跨过层层障碍，提升代码的可靠度，避免在浏览器中到处点击，最终节省了大量时间的。</p>
95-
<p>购买电子书：<a class="btn" href="https://leanpub.com/everydayrailsrspec-cn" title="到 Leanpub 购买《使用 RSpec 测试 Rails 程序》">Leanpub（Paypal 支付）</a>&nbsp;&nbsp;<a class="btn" href="https://selfstore.io/products/3" title="到 SelfStore 购买《使用 RSpec 测试 Rails 程序》">SelfStore（支付宝支付）</a></p>
103+
<div class="dropdown">
104+
<a class="btn" data-toggle="dropdown" href="#">购买电子书<span class="caret"></span></a>
105+
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
106+
<li><a href="https://selfstore.io/products/3" title="到 SelfStore 购买《使用 RSpec 测试 Rails 程序》">SelfStore（支付宝支付）</a></li>
107+
<li><a href="https://leanpub.com/everydayrailsrspec-cn" title="到 Leanpub 购买《使用 RSpec 测试 Rails 程序》">Leanpub（Paypal 支付）</a></li>
108+
</ul>
109+
</div>
96110
</div>
97-
<div id="deployrails-cn" class="also-by-item">
111+
<div id="deployrails-cn" class="also-by-item clearfix">
98112
<img src="assets/images/deployrailscn.jpg" width="118" height="164" alt="Rails 程序部署之道" />
99113
<h3>Rails 程序部署之道</h3>
100114
<p>如果你花了很多钱把应用程序部署在 Heroku 上，使用本书介绍的工具，可以将其迁移到 VPS 上。如果应用程序已经运行在 VPS 上，但部署的过程不牢靠，有时无法重启，有时加载了错误的代码版本，使用本书提供的模板可以让部署的过程更可靠。</p>
101-
<p>购买电子书：<a class="btn" href="https://leanpub.com/deploying_rails_applications-cn" title="到 Leanpub 购买《Rails 程序部署之道》">Leanpub（Paypal 支付）</a></p>
115+
<div class="dropdown">
116+
<a class="btn" data-toggle="dropdown" href="#">购买电子书<span class="caret"></span></a>
117+
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
118+
<li><a href="https://selfstore.io/products/66" title="到 SelfStore 购买《Rails 程序部署之道》">SelfStore（支付宝支付）</a></li>
119+
<li><a href="https://leanpub.com/deploying_rails_applications-cn" title="到 Leanpub 购买《Rails 程序部署之道》">Leanpub（Paypal 支付）</a></li>
120+
</ul>
121+
</div>
102122
</div>
103123
</div>
104124
</div>

0 commit comments

Comments
 (0)