Permalink
Browse files

added bottom menu with filter dropdown menu

  • Loading branch information...
1 parent 97874e1 commit 9cadac8f60eab09be692f7321695788f1f14f425 @chico chico committed Jan 29, 2012
Showing with 110 additions and 6 deletions.
  1. +21 −1 demo/css/main.css
  2. +2 −2 demo/css/timeline.css
  3. +32 −3 demo/index-chico.html
  4. +55 −0 demo/js/bootstrap-dropdown.js
View
22 demo/css/main.css
@@ -15,7 +15,7 @@ margin-top: 5px;
}
.topbar.footer {
-height: 280px;
+height: 310px;
bottom: 0;
top: auto;
}
@@ -24,6 +24,21 @@ top: auto;
height: 100%;
}
+.topbar.footer .fill.menu {
+ height: 39px;
+
+ border-top: 1px solid #1D1D1D;
+
+ /* default background colour, for all layout engines that don't implement gradients */
+ background: #000000;
+
+ /* gecko based browsers */
+ background: -moz-linear-gradient(top, #0D0D0D, #000000);
+
+ /* webkit based browsers */
+ background: -webkit-gradient(linear, left top, left bottom, from(#0D0D0D), to(#000000));
+}
+
.topbar.footer .fill.dark {
color: #333;
font-size: 12px;
@@ -122,6 +137,11 @@ background-image:url(../images/back_150x150.gif);
font-family: 'Chango', cursive;
}
+.dropdown-toggle {
+ font-size: 14px;
+ font-weight: bold;
+}
+
.page-topborder {
border-top: 1px solid #C3C3C3;
width: 480px;
View
4 demo/css/timeline.css
@@ -159,8 +159,8 @@ max-width: 200px;
display:block;
position:absolute;
width:90%;
- height:58px;
- bottom:38px;
+ height:68px;
+ bottom:48px;
left:15px;
z-index:2;
text-align:left;
View
35 demo/index-chico.html
@@ -43,6 +43,13 @@
<!-- mediaelement -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://mediaelementjs.com/js/mejs-2.6.4/mediaelement-and-player.min.js"></script>
+ <script src="js/bootstrap-dropdown.js"></script>
+ <script>
+ $(function () {
+ console.log('drop');
+ $('#bottommenu').dropdown();
+ });
+ </script>
<!-- syntax -->
<script src="http://mediaelementjs.com/js/syntaxhighlighter/shCore.js"></script>
@@ -59,6 +66,28 @@
<body>
<div class="topbar footer">
+
+ <div class="fill menu">
+ <div id="bottommenu" class="container fixed">
+ <ul class="nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Filter By</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Informational</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Your Friends</a></li>
+ <li><a href="#">Editor&apos;s Pick</a></li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="nav secondary-nav">
+ <li>
+ <h3><a href="index.html">TV:TIME</a></h3>
+ </li>
+ </ul>
+ </div>
+ </div>
+
<div class="fill dark">
<div class="container fixed">
@@ -153,7 +182,7 @@ <h3 class="desc">Chinese New Year is the most important of the traditional Chine
<div class="memoContent fixed-photo-height">
<div class="wrap">
- <h3 class="desc">Millions of Chinese around the world welcome in the traditionally prosperous Year Of The Dragon</h3>
+ <h3 class="desc">Millions of Chinese around the world welcome the prosperous Year Of The Dragon.</h3>
<img src="images/chinesenewyear_news.png" title="">
</div>
</div>
@@ -173,9 +202,9 @@ <h3 class="desc">Millions of Chinese around the world welcome in the traditional
<!-- timeline:end -->
- </ul>
</div>
- </div>
+
+ </div>
</div>
<div class="container">
View
55 demo/js/bootstrap-dropdown.js
@@ -0,0 +1,55 @@
+/* ============================================================
+ * bootstrap-dropdown.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#dropdown
+ * ============================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+
+!function( $ ){
+
+ "use strict"
+
+ /* DROPDOWN PLUGIN DEFINITION
+ * ========================== */
+
+ $.fn.dropdown = function ( selector ) {
+ return this.each(function () {
+ $(this).delegate(selector || d, 'click', function (e) {
+ var li = $(this).parent('li')
+ , isActive = li.hasClass('open')
+
+ clearMenus()
+ !isActive && li.toggleClass('open')
+ return false
+ })
+ })
+ }
+
+ /* APPLY TO STANDARD DROPDOWN ELEMENTS
+ * =================================== */
+
+ var d = 'a.menu, .dropdown-toggle'
+
+ function clearMenus() {
+ $(d).parent('li').removeClass('open')
+ }
+
+ $(function () {
+ $('html').bind("click", clearMenus)
+ $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' )
+ })
+
+}( window.jQuery || window.ender );

0 comments on commit 9cadac8

Please sign in to comment.