Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Initial commit

  • Loading branch information...
commit 869bf2c9268ed6be250cbca7f47b75e9d98f3913 0 parents
@kdankov authored
2  .gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+
83 images/common.css
@@ -0,0 +1,83 @@
+
+
+
+
+
+/* --- General reset --- */
+* { padding: 0; margin: 0; }
+a { text-decoration: none; }
+a img { border: none; }
+li { list-style: none outside; display: block; }
+
+/* --- General classes --- */
+.cleaner { display: block; height: 1px; clear: both; overflow: hidden; font-size: 1px; }
+
+/* --- Typography --- */
+body { font: 100% 'Neuton', Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif; padding: 50px; }
+h1, h2, h3, h4, h5,
+h6 { font: 3em/1.2em "Lobster", "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; }
+
+/* --- Layout --- */
+#page_container { width: 500px; margin: 0 auto; font-size: 0.9em; }
+
+#header h1 { color: #369; padding-bottom: 40px; text-align: center; }
+
+/* --- Basic grid styles --- */
+.col { float: left; overflow: hidden; }
+.col .inner.left { padding: 0 0 0 20px; }
+.col .inner.right { padding: 0 20px 0 0; }
+.col .inner.top { padding: 20px 0 0 0; }
+.col .inner.bottom { padding: 0 0 20px 0; }
+.col .inner.all { padding: 20px; }
+
+.col.w2 { width: 50%; }
+.col.w3 { width: 33%; }
+.col.w4 { width: 25%; }
+.col.w5 { width: 20%; }
+.col.w23 { width: 66%; }
+.col.w34 { width: 75%; }
+.col.w25 { width: 40%; }
+.col.w35 { width: 60%; }
+.col.w45 { width: 80%; }
+
+/* --------- Rich Text Editor Styles ------------------------------------------------------------------------------------*/
+.rte { }
+
+.rte h1 { font-weight: normal; font-size: 220%; padding: 0 0 20px 0; }
+.rte h2 { font-weight: normal; font-size: 180%; padding: 15px 0 10px 0; }
+.rte h3 { font-weight: normal; font-size: 160%; padding: 10px 0 5px 0; }
+.rte h4 { font-weight: normal; font-size: 140%; padding: 5px 0; }
+.rte h5 { font-size: 120%; padding: 0 0 5px 0; }
+.rte h6 { font-size: 100%; padding: 0 0 5px 0; }
+
+.rte a { }
+
+.rte p { padding: 0 0 20px 0; }
+.rte p a { }
+.rte p + ul { padding: 0 30px 20px 30px; }
+.rte p + ol { padding: 0 30px 20px 30px; }
+
+.rte ul { padding: 20px 30px; }
+.rte ul ul { padding: 10px 30px; }
+.rte ul li { list-style: disc outside; display: list-item; }
+.rte ul li li { list-style: circle; }
+.rte ul li a { }
+.rte ul + ul { padding: 0 30px 20px 30px; }
+
+.rte ol { padding: 20px 30px; }
+.rte ol ol { padding: 10px 30px; }
+.rte ol li { list-style: decimal outside; display: list-item; }
+.rte ol li a { }
+.rte ol + ol { padding: 0 30px 20px 30px; }
+
+.rte code { display: block; background: #EEE; border: 1px solid #CCC; font: 0.8em Courier, Tahoma, sans-serif; padding: 10px; margin: 20px 0; white-space: pre; }
+.rte p + code { margin-top: 0; }
+
+.rte blockquote { color: #666; padding: 20px; border-left: 5px solid #CCC; margin: 0 20px 20px 20px; }
+.rte blockquote p { padding-bottom: 0; line-height: 20px; }
+
+.rte img[align=right],
+.rte table[align=right] { margin-left: 20px; }
+
+.rte img[align=left],
+.rte table[align=left] { margin-right: 20px; }
127 index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>jQuery Slide Menu</title>
+ <link rel="stylesheet" media="screen" type="text/css" href="images/common.css" />
+
+ <script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAA0m4OXZCc-BMR9w3Ml16ZMxS3Qmn2tfRj7I8_gZkC6e9mKMPwZBTci34Dqd7KFBLaRfufhheDUr6sog"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+
+ <script type="text/javascript" src="slidemenu/jquery.slideMenu.js"></script>
+ <link rel="stylesheet" media="screen" type="text/css" href="slidemenu/slidemenu.css" />
+
+ <script type="text/javascript" src="scripts/common.js"></script>
+</head>
+<body>
+ <div id="page_container">
+ <div id="header">
+ <h1>jQuery Plugin SlideMenu</h1>
+ </div>
+ <div id="content">
+ <div class="rte">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+ <ul id="nav">
+ <li><span>Option 1</span>
+ <ul>
+ <li><a href="#">Option 1 1</a></li>
+ <li><a href="#">Option 1 2</a></li>
+ <li><a href="#">Option 1 3</a></li>
+ <li><a href="#">Option 1 4</a></li>
+ <li><a href="#">Option 1 5</a></li>
+ <li><a href="#">Option 1 6</a></li>
+ </ul>
+ </li>
+ <li><span>Option 2</span>
+ <ul>
+ <li><a href="#">Option 2 1</a></li>
+ <li><a href="#">Option 2 2</a></li>
+ <li><span>Option 2 3</span>
+ <ul>
+ <li><a href="#">Option 2 3 1</a></li>
+ <li><a href="#">Option 2 3 2</a></li>
+ <li><span>Option 2 3 3</span>
+ <ul>
+ <li><a href="#">Option 2 3 3 1</a></li>
+ <li><a href="#">Option 2 3 3 2</a></li>
+ <li><a href="#">Option 2 3 3 3</a></li>
+ <li><a href="#">Option 2 3 3 4</a></li>
+ <li><a href="#">Option 2 3 3 5</a></li>
+ <li><a href="#">Option 2 3 3 6</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Option 2 3 4</a></li>
+ <li><span>Option 2 3 5</span>
+ <ul>
+ <li><a href="#">Option 2 3 5 1</a></li>
+ <li><a href="#">Option 2 3 5 2</a></li>
+ <li><a href="#">Option 2 3 5 3</a></li>
+ <li><a href="#">Option 2 3 5 4</a></li>
+ <li><a href="#">Option 2 3 5 5</a></li>
+ <li><a href="#">Option 2 3 5 6</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Option 2 3 6</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Option 2 4</a></li>
+ <li><a href="#">Option 2 5</a></li>
+ <li><a href="#">Option 2 6</a></li>
+ </ul>
+ </li>
+ <li><span>Option 3</span>
+ <ul>
+ <li><a href="#">Option 3 1</a></li>
+ <li><a href="#">Option 3 2</a></li>
+ <li><a href="#">Option 3 3</a></li>
+ <li><a href="#">Option 3 4</a></li>
+ <li><a href="#">Option 3 5</a></li>
+ <li><a href="#">Option 3 6</a></li>
+ </ul>
+ </li>
+ <li><span>Option 4</span>
+ <ul>
+ <li><a href="#">Option 4 1</a></li>
+ <li><a href="#">Option 4 2</a></li>
+ <li><a href="#">Option 4 3</a></li>
+ <li><a href="#">Option 4 4</a></li>
+ <li><a href="#">Option 4 5</a></li>
+ <li><a href="#">Option 4 6</a></li>
+ </ul>
+ </li>
+ <li><span>Option 5</span>
+ <ul>
+ <li><a href="#">Option 5 1</a></li>
+ <li><a href="#">Option 5 2</a></li>
+ <li><a href="#">Option 5 3</a></li>
+ <li><a href="#">Option 5 4</a></li>
+ <li><a href="#">Option 5 5</a></li>
+ <li><a href="#">Option 5 6</a></li>
+ </ul>
+ </li>
+ <li><span>Option 6</span>
+ <ul>
+ <li><a href="#">Option 6 1</a></li>
+ <li><a href="#">Option 6 2</a></li>
+ <li><a href="#">Option 6 3</a></li>
+ <li><a href="#">Option 6 4</a></li>
+ <li><a href="#">Option 6 5</a></li>
+ <li><a href="#">Option 6 6</a></li>
+ </ul>
+ </li>
+ <li><span>Option 7</span>
+ <ul>
+ <li><a href="#">Option 7 1</a></li>
+ <li><a href="#">Option 7 2</a></li>
+ <li><a href="#">Option 7 3</a></li>
+ <li><a href="#">Option 7 4</a></li>
+ <li><a href="#">Option 7 5</a></li>
+ <li><a href="#">Option 7 6</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+</body>
+</html>
32 scripts/common.js
@@ -0,0 +1,32 @@
+$(function(){
+
+ WebFontConfig = {
+ google: {
+ families: [ 'Lobster', 'Neuton' ]
+ }
+ }
+
+ function wf_load()
+ {
+ var wf = document.createElement('script');
+
+ wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+ wf.type = 'text/javascript';
+ wf.async = 'true';
+
+ var s = document.getElementsByTagName('script')[0];
+
+ s.parentNode.insertBefore(wf, s);
+
+ }
+
+ wf_load();
+
+
+ $("#nav").slideMenu();
+
+ // $("#nav").fadeMenu();
+
+ //$("#nav").hide();
+
+});
BIN  slidemenu/images/bullet_left.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  slidemenu/images/bullet_right.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 slidemenu/jquery.slideMenu.js
@@ -0,0 +1,60 @@
+(function($) {
+ $.fn.extend({
+ slideMenu: function() {
+ return this.each(function(){
+
+ $(this).wrap('<div class="slide_menu"><div class="slide_menu_wrapper"></div></div>');
+
+ var $slideMenu = $(".slide_menu");
+ var ulwidth = $slideMenu.width();
+ var page = 1;
+ var speed = 300;
+
+ $slideMenu.find("ul").parent().filter("li").addClass("parent").find('ul').append('<li><span class="back">Back</span></li>');
+
+ $slideMenu.find("li span").click(function(){
+
+ $objli = $(this).parent();
+
+ if ( !$(this).hasClass('back') )
+ {
+ if ( $objli.find("ul").size() > 0 )
+ {
+ $objli.addClass("active");
+
+ $slideMenu.children('.slide_menu_wrapper')
+ .animate({ left: -ulwidth * page, }, speed,
+ function()
+ {
+ page = page + 1;
+ }
+ );
+ }
+ }
+ else
+ {
+ page = page - 1;
+
+ $slideMenu.children('.slide_menu_wrapper')
+ .animate({ left: -ulwidth*(page-1) }, speed,
+ function(){
+ $objli.parent().parent().removeClass("active");
+ }
+ );
+
+ if ( page == 1 )
+ {
+ $slideMenu.children('.slide_menu_wrapper').animate({ left: 1, marginLeft: -1 }, 10);
+ }
+
+ }
+
+ });
+
+ });
+
+ }
+
+ });
+})(jQuery);
+
21 slidemenu/slidemenu.css
@@ -0,0 +1,21 @@
+.slide_menu { overflow: hidden; border: 1px solid #CCC; }
+.slide_menu .slide_menu_wrapper { width: 10000px; position: relative; }
+.slide_menu ul { background: #FFF; float: left; position: absolute; top: 0; left: 0; margin: 0; padding: 0; }
+.slide_menu ul ul { left: 100%; display: none; }
+.slide_menu li { display: block; list-style-type: none; list-style-position: outside; border-bottom: 1px solid #CCC; text-indent: 10px; }
+.slide_menu li span { display: block; font-size: 1.2em; text-decoration: none; color: #000; cursor: pointer; line-height: 30px; white-space: nowrap; }
+.slide_menu li a { display: block; text-decoration: none; color: #369; line-height: 30px; white-space: nowrap; }
+.slide_menu li a:hover { background: #F9F9F9; font-weight: bold; }
+
+.slide_menu ul li.parent { background: url(images/bullet_right.gif) 98% 2px no-repeat; }
+.slide_menu ul li.parent:hover { background: url(images/bullet_right.gif) 99% -26px no-repeat; }
+.slide_menu ul li.parent:hover > span { font-weight: bold; }
+
+.slide_menu ul li.active > ul { display: block; }
+
+.slide_menu .back { display: block; line-height: 30px; background: url(images/bullet_left.gif) left -1px no-repeat; text-indent: 30px; }
+.slide_menu .back:hover,
+.slide_menu .back.hover { cursor: pointer; background-position: left -29px; }
+
+.slide_menu .slide_menu_wrapper { height: 300px; }
+.slide_menu, .slide_menu ul li { width: 200px; }
Please sign in to comment.
Something went wrong with that request. Please try again.