Permalink
Browse files

initial commit

  • Loading branch information...
0 parents commit e5f138c9fd51438bc359771caaaf3ba6f17e8c32 @impressivewebs committed Nov 12, 2011
23 dropdowns/articles.html
@@ -0,0 +1,23 @@
+<div id="ajax">
+
+ <ul>
+ <li><a href="http://www.impressivewebs.com/no-standards-compliant-browser/">There's No Such Thing as a "Standards-Compliant" Browser</a></li>
+ <li><a href="http://www.impressivewebs.com/css-terms-definitions/">CSS Terms and Definitions</a></li>
+ <li><a href="http://www.impressivewebs.com/attribute-selectors/">Things Worth Noting About CSS Attribute Selectors</a></li>
+ <li><a href="http://www.impressivewebs.com/youre-not-stuck-in-a-cookie-cutter-design/">You're Not Stuck in a Cookie Cutter Design!</a></li>
+ <li><a href="http://www.impressivewebs.com/cross-browser-css-properties/">List of Cross-Browser CSS Properties</a></li>
+ <li><a href="http://www.impressivewebs.com/sexy-rockstar-words/">Design Blogging Terms We Can Probably Live Without</a></li>
+ <li><a href="http://www.impressivewebs.com/conditional-comments-classes-ie/">Don't Use Conditional Comments to Create Classes for IE7+</a></li>
+ </ul>
+
+ <ul>
+ <li><a href="http://www.impressivewebs.com/css-property-ordering/">CSS Property Ordering: Group Similar? Or Alphabetical?</a></li>
+ <li><a href="http://www.impressivewebs.com/ie9-html5-semantic/">How Does IE9 Handle HTML5's New Semantic Elements?</a></li>
+ <li><a href="http://www.impressivewebs.com/html5-support-ie9/">HTML5 Support in Internet Explorer 9</a></li>
+ <li><a href="http://www.impressivewebs.com/css3-support-ie9/">CSS3 Support in Internet Explorer 9</a></li>
+ <li><a href="http://www.impressivewebs.com/buy-web-design-books/">How Do You Decide Which Web Design or Programming Books to Buy?</a></li>
+ <li><a href="http://www.impressivewebs.com/overflow-hidden-problem/">A Problem With Using "overflow: hidden" to Clear Floats</a></li>
+ <li><a href="http://www.impressivewebs.com/css-decisions/">Decisions CSS Developers Need to Make</a></li>
+ </ul>
+
+</div>
23 dropdowns/resources.html
@@ -0,0 +1,23 @@
+<div id="ajax">
+
+ <ul>
+ <li><a href="http://reference.sitepoint.com/css">SitePoint CSS Reference</a></li>
+ <li><a href="http://api.jquery.com/">jQuery API</a></li>
+ <li><a href="http://css-tricks.com/snippets/">CSS-Tricks Code Snippets</a></li>
+ <li><a href="http://www.smashingmagazine.com/network-posts/">The Smashing Network</a></li>
+ <li><a href="http://www.brushlovers.com/">Brush Lovers Photoshop Brushes</a></li>
+ <li><a href="http://www.impressivewebs.com/css3-click-chart/">CSS3 Click Chart</a></li>
+ <li><a href="http://cssglobe.com">CSS Globe</a></li>
+ </ul>
+
+ <ul>
+ <li><a href="https://github.com/">GitHub</a></li>
+ <li><a href="http://jasonsantamaria.com/reading">Jason Santa Maria's Recommended Reading</a></li>
+ <li><a href="http://interviewsbydesign.com/">Interviews with Designers</a></li>
+ <li><a href="http://www.w3.org/blog/CSS">CSS Working Group Blog</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">The HTML5 Specification</a></li>
+ <li><a href="http://www.w3.org/TR/css3-roadmap/">CSS3 Specification</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/ie/ff468705.aspx">IE9 Beta Guide for Developers</a></li>
+ </ul>
+
+</div>
23 dropdowns/syndicated.html
@@ -0,0 +1,23 @@
+<div id="ajax">
+
+ <ul>
+ <li><a href="http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5/">Learning to Love HTML5</a></li>
+ <li><a href="http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/">!important CSS Declarations: How and When to Use Them</a></li>
+ <li><a href="http://www.smashingmagazine.com/2010/09/09/upcoming-web-design-and-development-conferences-in-2010/">Upcoming Web Design and Development Conferences in 2010</a></li>
+ <li><a href="http://www.smashingmagazine.com/2010/08/23/a-design-is-only-as-deep-as-it-is-usable/">A Design Is Only As Deep As It Is Usable</a></li>
+ <li><a href="http://sixrevisions.com/html/canvas-element/">HTML5 Canvas Element Guide</a></li>
+ <li><a href="http://www.webdesignerdepot.com/2010/04/youre-failing-as-a-web-developer-%E2%80%94-and-heres-why/">You're Failing as a Web Developer &#151; and Here's Why</a></li>
+ <li><a href="http://www.webdesignerdepot.com/2010/08/how-to-make-an-internet-web-page/">How to Make an Internet Web Page</a></li>
+ </ul>
+
+ <ul>
+ <li><a href="http://www.webdesignerdepot.com/2010/08/will-the-real-browser-stats-please-stand-up/">Will the Real Browser Stats Please Stand Up?</a></li>
+ <li><a href="http://sixrevisions.com/javascript/getting-started-with-jquery/">Getting Started with jQuery</a></li>
+ <li><a href="http://www.webdesignerdepot.com/2010/11/twenty-tens-front-end-code-5-things-it-gets-right/">Twenty Ten's Front-End Code: 5 Things it Gets Right</a></li>
+ <li><a href="http://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/">The Principles Of Cross-Browser CSS Coding</a></li>
+ <li><a href="http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/">CSS3 Solutions for Internet Explorer</a></li>
+ <li><a href="http://www.noupe.com/design/the-aida-marketing-model-in-web-design.html">The AIDA Marketing Model in Web Design</a></li>
+ <li><a href="http://www.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/">CSS Sprites: Useful Technique, or Potential Nuisance?</a></li>
+ </ul>
+
+</div>
23 dropdowns/tutorials.html
@@ -0,0 +1,23 @@
+<div id="ajax">
+
+ <ul>
+ <li><a href="http://www.impressivewebs.com/cnn-beveled-navigation-buttons-css/">Recreating CNN's Beveled Navigation Buttons with Pure CSS</a></li>
+ <li><a href="http://www.impressivewebs.com/css-counter-increment/">CSS Counters: counter-increment and Friends</a></li>
+ <li><a href="http://www.impressivewebs.com/animated-sprites-css3/">Animated Sprites with CSS3 Transitions</a></li>
+ <li><a href="http://www.impressivewebs.com/css-readability/">Give Your CSS Some Room to Breathe</a></li>
+ <li><a href="http://www.impressivewebs.com/word-wrap-css3/">Word-Wrap: A CSS3 Property That Works in Every Browser</a></li>
+ <li><a href="http://www.impressivewebs.com/fluid-header-footer-problem/">How to Resolve a Fluid Header/Footer Problem When the Window is Resized</a></li>
+ <li><a href="http://www.impressivewebs.com/javascript-content-switcher-without-javascript/">A JavaScript Content Switcher That Works Without JavaScript</a></li>
+ </ul>
+
+ <ul>
+ <li><a href="http://www.impressivewebs.com/page-corner-ads-css3/">Better Page Corner Ads with CSS3 Transforms</a></li>
+ <li><a href="http://www.impressivewebs.com/stationary-logo-changes-page-scroll-css/">A Stationary Logo That Changes on Page Scroll with CSS</a></li>
+ <li><a href="http://www.impressivewebs.com/jquery-tutorial-beginners-pdf/">jQuery Tutorial for Beginners Downloadable PDF</a></li>
+ <li><a href="http://www.impressivewebs.com/css3-glow-tabs/">CSS3 Glow Tabs</a></li>
+ <li><a href="http://www.impressivewebs.com/dynamically-highlight-content-wikipedia-css3/">How to Dynamically Highlight Content Like Wikipedia Using CSS3</a></li>
+ <li><a href="http://www.impressivewebs.com/jquery-tutorial-for-beginners/">jQuery Tutorial for Beginners: Nothing But the Goods</a></li>
+ <li><a href="http://www.impressivewebs.com/inject-custom-ad-blocks-between-paragraphs-in-wordpress/">Inject Custom Ad Blocks Between Paragraphs in WordPress</a></li>
+ </ul>
+
+</div>
23 dropdowns/videos.html
@@ -0,0 +1,23 @@
+<div id="ajax">
+
+ <ul>
+ <li><a href="http://vimeo.com/7530607">CSS Frameworks: Make the Right Choice</a></li>
+ <li><a href="http://www.youtube.com/watch?v=hQVTIJBZook">JavaScript: The Good Parts</a></li>
+ <li><a href="http://www.youtube.com/watch?v=BpBAg4Ndi9w">Search User Interfaces</a></li>
+ <li><a href="http://vimeo.com/5913249">Design Inspiration by Fabio Sasso</a></li>
+ <li><a href="http://vimeo.com/7863592">A More Tangled Web</a></li>
+ <li><a href="http://www.youtube.com/watch?v=mHtdZgou0qU">Speed Up Your JavaScript</a></li>
+ <li><a href="http://www.youtube.com/watch?v=tDjk-xSr-T0">HTML 5 and Internet Explorer 9</a></li>
+ </ul>
+
+ <ul>
+ <li><a href="http://vimeo.com/6691519">Introduction to HTML5</a></li>
+ <li><a href="http://channel9.msdn.com/blogs/larrylarsen/ecsstender-the-jquery-of-css">eCSStender: the 'jQuery of CSS'</a></li>
+ <li><a href="http://vimeo.com/12529436">10 Things I Learned From the jQuery Source</a></li>
+ <li><a href="http://vimeo.com/10506751">Steve Huffman on Lessons Learned at Reddit</a></li>
+ <li><a href="http://www.youtube.com/watch?v=VO6XEQIsCoM/">The Paradox of Choice</a></li>
+ <li><a href="http://vimeo.com/4394152">The Influence of Print Design</a></li>
+ <li><a href="http://www.youtube.com/watch?v=8CtC_qbQ51U">Great Designers Steal</a></li>
+ </ul>
+
+</div>
BIN images/loading.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 index.html
@@ -0,0 +1,78 @@
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>Slide-Down Mega Drop-Down Menus with Ajax and jQuery</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <!--[if lt IE 9]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <link rel="stylesheet" href="http://s3.amazonaws.com/impressivewebs/mega-drop-downs/styles/style.css">
+
+</head>
+
+<body>
+
+<div id="container">
+ <header>
+
+ <h1>Slide-Down Mega Drop-Down Menus with Ajax and jQuery</h1>
+
+ <h2>By <a href="http://www.impressivewebs.com">Impressive Webs</a></h2>
+
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li class="menu"><a href="resources.html">Resources</a></li>
+ <li class="menu"><a href="articles.html">Articles</a></li>
+ <li class="menu"><a href="tutorials.html">Tutorials</a></li>
+ <li class="menu"><a href="videos.html">Videos</a></li>
+ <li class="menu"><a href="syndicated.html">Syndicated</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <div id="dropdown" class="loading"></div><!-- #dropdown -->
+
+ <div id="main">
+ <p><strong>The menu above has mega drop-downs that slide the content area down, similar to the drop-down menus on <a href="http://www.cbc.ca/">CBC.ca</a>. This is just filler content to show how the content below the drop-downs slides down instead of being overlaid (as with customary drop-downs). <a href="http://www.impressivewebs.com/mega-menus-ajax-jquery">Read the associated article</a> for a full description of the features of this menu. Or just try it out.</strong></p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+ </div>
+
+ <footer>
+ <p><a href="http://www.impressivewebs.com/mega-menus-ajax-jquery">&lt; Back to the Article</a></p>
+ </footer>
+</div><!-- end of #container -->
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
+<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
+
+<script src="http://s3.amazonaws.com/impressivewebs/mega-drop-downs/js/general.js?ver=2"></script>
+
+<script>
+var _gaq = [['_setAccount', 'UA-1965499-1"'], ['_trackPageview']];
+(function(d, t) {
+var g = d.createElement(t),
+ s = d.getElementsByTagName(t)[0];
+g.async = true;
+g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+s.parentNode.insertBefore(g, s);
+})(document, 'script');
+</script>
+</body>
+</html>
129 js/general.js
@@ -0,0 +1,129 @@
+/*global document, $ */
+/* the line above helps JSLint recognize the globals being used, so they don't get flagged as errors */
+
+var dd = $("#dropdown"), // the dropdown container
+ // values below are configurable
+ dir = "dropdowns", // this is the directory where your Ajax-loaded files reside
+ ext = ".html", // this is the file extension of your Ajax-loaded files; change to .php if you use that
+ speed = 900, // this is the speed, in milliseconds, of the animated menus
+ downArrow = "&#9660;", // this is the downward-pointing arrow next to each menu link
+ upArrow = "&#9650;", // ditto for up, when the menu item is selected; these could be inline images instead
+ closeLinkString = "<div class='close'><a href='#' id='close-link' onclick=\"Megadropdowns.closeDropDown(); return false;\">close [x]</a></div>", // this is the close button, could be an image if you want
+ // blank values below are just initial states of later-used stuff
+ i = "",
+ j = "",
+ singleMenu = "",
+ fragment = "",
+ urlString = "",
+ menusArray = "",
+ menuLinks = $("nav ul li.menu>a"), // this is the often-used link collection; ">" makes sure sublinks aren't included
+ currentHash = document.location.hash.split("#")[1], // get the hash, if it exists
+ // function below inserts the "close" button from the line above
+ addCloseLink = function () {
+ dd.append(closeLinkString);
+ },
+ // function below gets all the names of the menu items
+ menuItems = function () {
+ for (var i = 0, j = menuLinks.length; i < j; i += 1) {
+ urlString = menuLinks[i].href.split("/");
+ urlString = urlString[urlString.length - 1].replace(ext, "");
+ fragment = fragment + " " + urlString;
+ }
+ return fragment;
+ },
+ // value of function above saved in "pages", below
+ pages = menuItems(),
+ // Below is the primary namespace for all the functions
+ Megadropdowns = {
+
+ // First: check to see if a hash is defined, to open the appropriate menu
+ handleHash: function (menuString) {
+ if (currentHash) {
+ menuString = menuString.split(" ");
+ for (i = 0, j = menuString.length; i < j; i += 1) {
+ if (currentHash === menuString[i]) {
+ // open menu; load the content for the hashed menu
+ dd.addClass("open");
+ Megadropdowns.populateMenu(currentHash);
+ break; // break out of the loop once requirement is met, because it should only occur once
+ }
+ }
+
+ // find the right menu item, to make it "active"
+ for (i = 0, j = menuLinks.length; i < j; i += 1) {
+ if (menuLinks[i].href.toString().indexOf(currentHash) !== -1) {
+ menuLinks[i].className = "active";
+ break; // break out of the loop once found, because it should only occur once
+ }
+ }
+
+ }
+ Megadropdowns.getMenuClick(menuString);
+ },
+
+ // click event handler; checks which menu item was clicked
+ // deal with the click accordingly
+ getMenuClick: function (menuString) {
+ menuLinks.click(function () {
+ var currentLink = this.toString().split("/");
+ currentLink = currentLink[currentLink.length - 1].replace(ext, "");
+ // if the dropdown menu is already open, and the same link is clicked, close it
+ if (dd.hasClass("open") && dd.hasClass(currentLink)) {
+ dd.slideUp(speed, function () {
+ dd.removeClass();
+ dd.addClass("loading");
+ dd.html("");
+ document.location.hash = "";
+ menuLinks.removeClass("active");
+ menuLinks.find("span").html(downArrow);
+ });
+
+ // if the dropdown menu doesn't match the clicked link, populate it and open it if necessary
+ } else {
+ Megadropdowns.populateMenu(currentLink);
+ menuLinks.removeClass("active");
+ $(this).addClass("active");
+ menuLinks.find("span").html(downArrow);
+ $(this).find("span").html(upArrow);
+ }
+
+ return false;
+ });
+ },
+
+ // populates the menu according to what link was clicked, opens it if not already opened
+ populateMenu: function (currentLink) {
+ dd.removeClass(pages);
+ dd.addClass(currentLink + " open");
+ dd.slideDown(speed, function () {
+ // callback that runs after menu finishes sliding down
+ $("nav ul li.menu>a.active").find("span").html(upArrow);
+ // ajax call is below; it appends a timestamp to prevent caching, in case of dynamic content; remove if you like
+ dd.load(dir + "/" + currentLink + ext + "?" + new Date().getTime(), function () {
+ // callback that runs after menu finishes loading
+ dd.removeClass("loading");
+ addCloseLink();
+ });
+ });
+ // change the hash according to the clicked link
+ document.location.hash = currentLink;
+ },
+
+ // this closes the dropdown and takes appropriate actions; called when the "close" link is clicked
+ closeDropDown: function (currentLink) {
+ dd.slideUp(speed, function () {
+ menuLinks.find("span").html(downArrow);
+ menuLinks.removeClass();
+ dd.removeClass();
+ document.location.hash = "";
+ dd.addClass("loading");
+ dd.html("");
+ });
+ }
+
+}; // Megadropdowns namespace ends here
+
+$(document).ready(function () {
+ menuLinks.append(" <span>" + downArrow + "</span>");
+ Megadropdowns.handleHash(pages);
+});
6,240 js/jquery-1.4.2.js
6,240 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
BIN mega-drop-downs.zip
Binary file not shown.
163 styles/style.css
@@ -0,0 +1,163 @@
+/* courtesy of HTML5 Boilerplate */
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
+menu, nav, section, summary, time, mark, audio, video {
+ margin:0;
+ padding:0;
+ border:0;
+ outline:0;
+ font-size:100%;
+ vertical-align:baseline;
+ background:transparent;
+}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+nav ul { list-style:none; }
+
+body { font: 13px/1.231 sans-serif; *font-size: small; }
+
+body, select, input, textarea { color: #444; }
+html { overflow-y: scroll; }
+
+a:hover, a:active { outline: none; }
+a, a:active, a:visited { color: #607890; }
+a:hover { color: #036; }
+
+ul, ol { margin-left: 1.8em; }
+ol { list-style-type: decimal; }
+
+/* Primary Styles
+ Author: Louis Lazaris
+*/
+
+p {
+ padding: 0 0 20px 0;
+}
+
+#container {
+ width: 960px;
+ margin: 0 auto;
+}
+
+h1 {
+ font-size: 32px;
+ text-align: center;
+ font-family: Georgia, "Times New Roman", Times, serif;
+ font-weight: normal;
+ text-shadow: #ddd 2px 2px 2px;
+ color: #888;
+ padding: 20px 0;
+}
+
+h2 {
+ font-size: 18px;
+ font-weight: normal;
+ text-align: center;
+ padding: 0 0 20px 0;
+}
+
+nav ul {
+ height: 30px;
+ overflow: hidden;
+ border: solid 1px #ccc;
+ width: 960px;
+ margin: 0 auto;
+}
+
+ nav ul li {
+ float: left;
+ }
+
+ nav ul li a, nav ul li a:link, nav ul li a:visited {
+ display: block;
+ height: 30px;
+ padding: 0 20px;
+ float: left;
+ line-height: 30px;
+ text-decoration: none;
+ border-right: solid 1px #ccc;
+ }
+
+ nav ul li a:hover, nav ul li a:active {
+ color: black;
+ }
+
+ nav ul li a.active, nav ul li a.active:link, nav ul li a.active:visited {
+ background: #ccc;
+ color: #fff;
+ }
+
+ nav ul li a span {
+ color: #ccc;
+ font-size: 11px;
+ _font-size: 9px; /* for IE6 */
+ }
+
+ nav ul li a.active span {
+ color: #fff;
+ font-size: 11px;
+ _font-size: 9px; /* for IE6 */
+ }
+
+ #dropdown {
+ width: 960px;
+ margin: 0 auto;
+ border: solid 1px #ccc;
+ border-top: none;
+ display: none;
+ position: relative;
+ overflow: hidden;
+ height: 270px;
+ }
+
+ #ajax {
+ padding: 20px;
+ }
+
+ #ajax h2 {
+ text-align: center;
+ font-size: 40px;
+ color: #bbb;
+ }
+
+ .loading {
+ background: transparent url(../images/loading.gif) no-repeat center center;
+ }
+
+ #dropdown.minheight {
+ min-height: 270px;
+ height: auto;
+ _height: 270px; /* for I6 */
+ }
+
+ #main {
+ padding: 20px 0 0 0;
+ }
+
+ .close {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
+
+ #ajax {
+ overflow: hidden;
+ }
+
+ #ajax ul {
+ float: left;
+ width: 300px;
+ padding: 0 30px 0 20px;
+ }
+
+ #ajax ul li {
+ padding: 3px 0;
+ }
+
+ footer p {
+ text-align: center;
+ }

0 comments on commit e5f138c

Please sign in to comment.