Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Too many fixes to describe

indescribable.
  • Loading branch information...
commit 3d5c67cafecd15d943a3d634f99fb04b42b90f9e 1 parent 55aa733
@impressivewebs authored
View
8 alternate/README.md
@@ -0,0 +1,8 @@
+# [Fixed Table of Contents Drop-Down Menu jQuery Plugin](http://www.impressivewebs.com/fixed-table-of-contents-drop-down-menu-jquery-plugin/)
+=========================
+
+A fixed table of contents drop-down menu jQuery plugin.
+
+Just change the markup to add more depth to the menus. The script should automatically recognize deeper menus, as long as you have the corresponding sections in the content area.
+
+If you want to go deeper than three levels, you'll have to add some extra CSS to indent the menus. Just look for the part with "li li li" and adjust accordingly.
View
29 alternate/css/normalize.css
@@ -0,0 +1,29 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
+ margin:0;
+ padding:0;
+}
+table {
+ border-collapse:collapse;
+ border-spacing:0;
+}
+fieldset,img {
+ border:0;
+}
+address,caption,cite,code,dfn,em,strong,th,var {
+ font-style:normal;
+ font-weight:normal;
+}
+ol,ul {
+ list-style:none;
+}
+caption,th {
+ text-align:left;
+}
+h1,h2,h3,h4,h5,h6 {
+ font-size:100%;
+ font-weight:normal;
+}
+q:before,q:after {
+ content:'';
+}
+abbr,acronym { border:0;}
View
198 alternate/css/styles.css
@@ -0,0 +1,198 @@
+body {
+ margin: 0 auto;
+ font-family: Georgia, 'Times New Roman', serif;
+ font-size: 20px;
+ color: #343434;
+ background: #ebddba;
+ background: -webkit-linear-gradient(#ebddba, #f9f1dd, #ebddba);
+ background: -moz-linear-gradient(#ebddba, #f9f1dd, #ebddba);
+ background: -o-linear-gradient(#ebddba, #f9f1dd, #ebddba);
+ background: -ms-linear-gradient(#ebddba, #f9f1dd, #ebddba);
+ background: linear-gradient(#ebddba, #f9f1dd, #ebddba);
+ overflow-x: hidden;
+}
+
+a {
+ color: #3381d6;
+ -webkit-transition: color .7s ease;
+ -moz-transition: color .7s ease;
+ -o-transition: color .7s ease;
+ -ms-transition: color .7s ease;
+ transition: color .7s ease;
+}
+
+a:hover, a:active, a:focus {
+ color: #e06c1f;
+}
+
+.container {
+ width: 90%;
+ max-width: 900px;
+ margin: 0 auto;
+ position: relative;
+ padding: 70px 10px 0 10px;
+}
+
+.toc-holder {
+ width: 18%;
+ min-width: 360px;
+}
+
+.toc-holder a {
+ text-decoration: none;
+ -webkit-transition: all .7s ease;
+ -moz-transition: all .7s ease;
+ -o-transition: all .7s ease;
+ -ms-transition: all .7s ease;
+ transition: all .7s ease;
+}
+
+.toc-holder li li a {
+ padding-left: 60px;
+}
+
+.toc-holder li li li a {
+ padding-left: 90px;
+}
+
+.toc-holder li a:hover {
+ background: #666;
+ padding-left: 35px;
+}
+
+.toc-holder li li a:hover {
+ padding-left: 65px;
+}
+
+.toc-holder li li li a:hover {
+ padding-left: 95px;
+}
+
+.toc-holder {
+ position: fixed;
+ margin-top: -70px;
+}
+
+a.toc-link {
+ color: white;
+ position: relative;
+ display: block;
+ z-index: 20;
+ height: 40px;
+ line-height: 40px;
+ padding-left: 10px;
+ width: 100%;
+ background: #444;
+}
+
+a.toc-link:hover {
+ background: #666;
+}
+
+.toc-link span {
+ font-size: 16px;
+ margin-right: 5px;
+ display: inline-block;
+ -webkit-transition: -webkit-transform .4s ease;
+ -moz-transition: -moz-transform .4s ease;
+ -o-transition: -o-transform .4s ease;
+ -ms-transition: -ms-transform .4s ease;
+ transition: transform .4s ease;
+}
+
+.toc-link span.rotate {
+ -webkit-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.toc {
+ position: absolute;
+ z-index: 10;
+ width: 103%;
+ background: #222;
+ padding: 40px 0 20px 0;
+}
+
+.toc-h1,.toc-h1 ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.toc-h1 a {
+ color: white;
+ padding: 5px 20px 5px 30px;
+ display: block;
+}
+
+.closed {
+ display: block;
+}
+
+h1 {
+ font-family: Georgia, sans-serif;
+ font-size: 2.3em;
+ font-style: italic;
+ margin: 0 0 40px 0;
+ text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
+}
+
+footer {
+ padding-bottom: 30px;
+}
+
+p {
+ margin-bottom: 30px;
+}
+
+.p1 {
+ color: darkgreen;
+}
+
+h2 {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 30px;
+ font-weight: bold;
+}
+
+.top-link {
+ display: block;
+ text-decoration: none;
+ position: fixed;
+ bottom: 0;
+ right: 2%;
+ color: white;
+ background: #222;
+ padding: 8px 16px 0 16px;
+ height: 30px;
+ font-size: 14px;
+ -webkit-border-radius: 10px 10px 0 0;
+ -moz-border-radius: 10px 10px 0 0;
+ border-radius: 10px 10px 0 0;
+}
+
+@media (max-width: 480px) {
+
+ .toc-holder {
+ left: 0;
+ right: 0;
+ }
+
+ .toc-link {
+ width: 150%;
+ }
+
+ .toc {
+ width: 155%;
+ }
+
+ .top-link {
+ top: 2px;
+ z-index: 20;
+ background: none;
+ }
+
+}
View
174 alternate/index.html
@@ -0,0 +1,174 @@
+<!doctype html>
+
+<html lang="en">
+
+<head>
+
+ <meta charset="utf-8">
+
+ <title>Fixed Table of Contents Dropdown Menu with jQuery</title>
+ <meta name="description" content="Fixed Table of Contents Dropdown Menu with jQuery">
+ <meta name="author" content="Impressive Webs">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="shortcut icon" href="/favicon.ico">
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+ <link rel="stylesheet" href="css/normalize.css">
+ <link rel="stylesheet" href="css/styles.css?v=1.0">
+
+ <!--[if lt IE 9]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+</head>
+<body>
+
+<div class="container">
+
+ <div id="toc-holder" class="toc-holder">
+ <a href="#" class="toc-link" id="toc-link"><span>&#9660;</span> Table of Contents</a>
+ <ul id="toc" class="toc">
+ <li class="toc-h1"><a href="#section1">1. Loomings</a></li>
+ <li class="toc-h1"><a href="#section2">2. The Carpet-Bag</a></li>
+ <li class="toc-h1"><a href="#section3">3. The Spouter-Inn</a></li>
+ <li class="toc-h1"><a href="#section4">4. Counterpane</a></li>
+ <li class="toc-h1"><a href="#section5">5. Breakfast</a></li>
+ <li class="toc-h1"><a href="#section6">6. The Street</a></li>
+ </ul>
+ </div><!-- .toc-holder -->
+ <h1>Fixed Table of Contents Dropdown Menu with jQuery</h1>
+
+ <p class="p1">The menu on this page was inspired by the fixed drop-down menu on the <a href="http://startupsthisishowdesignworks.com/">Startups, This Is How Design Works</a> website. This type of menu works best on a one-page site that has animated scrolling.</p>
+
+ <p>This demo has no submenus. View the same menu <a href="http://www.impressivewebs.com/demo-files/fixed-TOC-dropdown-jquery/">with submenus</a> or with <a href="http://www.impressivewebs.com/demo-files/fixed-TOC-dropdown-jquery-triple-sub/">triple-depth</a> submenus.</p></p>
+
+ <p><a href="http://www.impressivewebs.com/?p=6648">&lt; Go back to the article</a> | <a href="https://github.com/impressivewebs/fixed-TOC-dropdown-jquery">GitHub repo</a></p>
+
+ <section id="section1">
+ <h1>Loomings</h1>
+
+ <h2 id="section1-1">Call me Ishmael</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section1-2">Circumambulate</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ </section>
+
+ <section id="section2">
+ <h1>The Carpet-Bag</h1>
+
+ <h2 id="section2-1">I stuffed a shirt</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section2-2">As most young candidates</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+ </section>
+
+ <section id="section3">
+ <h1>The Spouter-Inn</h1>
+
+ <h2 id="section3-1">Entering that gable-ended</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section3-2">But what most puzzled</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+ </section>
+
+ <section id="section4">
+ <h1>Counterpane</h1>
+
+ <h2 id="section4-1">Upon waking next morning about daylight, I found Queequeg's arm</h2>
+
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section4-2">My sensations were strange</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+ </section>
+
+ <section id="section5">
+ <h1>Breakfast</h1>
+
+ <h2 id="section5-1">I quickly followed suit</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section5-2">You could pretty plainly tell</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ </section>
+
+ <section id="section6">
+ <h1>The Street</h1>
+
+ <h2 id="section6-1">If I had been astonished at first</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section6-2">But, besides the Feegeeans</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ </section>
+
+ <footer>
+ <p>&copy; 2012 whatever</p>
+
+ <p><a href="http://www.impressivewebs.com/?p=6648">&lt; Go back to the article</a> | <a href="https://github.com/impressivewebs/fixed-TOC-dropdown-jquery">GitHub repo</a></p>
+
+ </footer>
+
+ <a href="#top" class="top-link" id="top-link">&#9650; Top</a>
+
+</div><!-- .container -->
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script src="js/jquery.fixedTOC.js?v=3.0"></script>
+<script>
+// call the plugin on the "#toc" element
+$('#toc').fixedTOC({
+ menuOpens: 'click', // or 'mouseenter'
+ scrollSpeed: 1000,
+ menuSpeed: 300,
+ useSubMenus: false,
+ resetSubMenus: false,
+ topLinkWorks: true
+});
+</script>
+
+<script>
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-1965499-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+</script>
+</body>
+</html>
View
200 alternate/js/jquery.fixedTOC.js
@@ -0,0 +1,200 @@
+(function ($) {
+ $.fixedTOC = function (el, settings) {
+
+ var base = this,
+ s = null;
+
+ base.$el = $(el);
+ base.el = el;
+
+ // Add a reverse reference to the DOM object
+ base.$el.data("fixedTOC", base);
+ base.settings = $.extend({}, $.fixedTOC.defaultSettings, settings);
+ s = base.settings;
+
+ if (!s.useSubMenus) {
+ s.tocLinks = '.toc-h1 > a';
+ }
+
+ base.methods = {
+
+ init : function () {
+
+ // Put your initialization code here
+
+ s.tocSub.slideUp();
+ s.tocHeight = base.$el.height() + 20;
+
+ base.$el.css({
+ top: '-' + s.tocHeight + 'px'
+ });
+
+ base.$el.addClass(s.tocUpClass);
+
+ },
+
+ doOpenMenu : function () {
+
+ s.tocLink.on(s.menuOpens, function () {
+
+ if (base.$el.hasClass(s.tocUpClass)) {
+
+ s.tocLink.find('span').addClass('rotate');
+
+ base.$el.stop().animate({
+ top: '0'
+ }, s.menuSpeed, function () {
+ base.$el.removeClass(s.tocUpClass);
+ });
+
+ } else {
+
+ s.tocHeight = base.$el.height() + 20;
+
+ s.tocLink.find('span').removeClass('rotate');
+
+ base.$el.stop().animate({
+ top: '-' + s.tocHeight + 'px'
+ }, s.menuSpeed, function () {
+ base.$el.addClass(s.tocUpClass);
+ s.tocSub.slideUp(0);
+ });
+
+ }
+
+ return false;
+ });
+
+ },
+
+ doOpenItem : function () {
+
+ $('.toc-h1>a, .toc-sub a').on('click', function () {
+
+ $(this).parent().siblings('.toc-h1').find('.toc-sub').stop().slideUp().addClass('closed');
+ $(this).next('.toc-sub').stop().slideToggle().toggleClass('closed');
+
+ return false;
+
+ });
+
+ },
+
+ grabHash : function () {
+
+ if (location.hash) {
+ s.currHash = location.hash;
+ base.methods.doScroll(s.currHash);
+ }
+
+ },
+
+ doLocate : function () {
+
+ $(s.tocLinks).on('click', function () {
+
+ s.currHash = $(this)[0].hash;
+ base.methods.doScroll(s.currHash);
+
+ return false;
+
+ });
+
+ },
+
+ doScroll : function (h) {
+
+ s.currHash = h;
+
+ $('html, body').animate({
+ scrollTop: $(s.currHash).offset().top - 80
+ }, s.scrollSpeed, function () {
+ if (history.pushState) {
+ history.pushState(null, null, s.currHash);
+ }
+ else {
+ location.hash = s.currHash;
+ }
+ });
+
+ },
+
+ doCloseMenu : function () {
+
+ $('#toc-holder').on('mouseleave', function () {
+
+ s.tocHeight = base.$el.height() + 20;
+ s.tocLink.find('span').removeClass('rotate');
+
+ base.$el.animate({
+ top: '-' + s.tocHeight + 'px'
+ }, s.menuSpeed, function () {
+ base.$el.addClass(s.tocUpClass);
+ if (s.resetSubMenus) {
+ $('.toc-sub').slideUp(1).addClass('closed');
+ }
+ });
+
+ });
+
+ },
+
+ doTopLink : function () {
+
+ $(s.topLink).on('click', function () {
+
+ s.currHash = $(this)[0].hash;
+
+ $('html, body').animate({
+ scrollTop: 0
+ }, s.scrollSpeed, function () {
+ location.hash = s.currHash;
+ });
+
+ return false;
+
+ });
+
+ }
+
+ };
+
+ // Run methods
+ base.methods.init();
+ base.methods.doOpenMenu();
+ if (s.useSubMenus) {
+ base.methods.doOpenItem();
+ }
+ base.methods.grabHash();
+ base.methods.doLocate();
+ base.methods.doCloseMenu();
+ if (s.topLinkWorks) {
+ base.methods.doTopLink();
+ }
+ };
+
+ $.fixedTOC.defaultSettings = {
+ // non-customizable settings
+ tocHeight : null,
+ tocSub : $('.toc-sub'),
+ tocUpClass : 'toc-up',
+ tocLink : $('#toc-link'),
+ tocLinks : '.toc-h1 ul a',
+ topLink : $('#top-link'),
+ currHash : null,
+ // customizable settings
+ menuOpens : 'click',
+ scrollSpeed : 1000,
+ menuSpeed : 300,
+ useSubMenus : true,
+ resetSubMenus : true,
+ topLinkWorks : true
+ };
+
+ $.fn.fixedTOC = function (settings) {
+ return this.each(function () {
+ (new $.fixedTOC(this, settings));
+ });
+ };
+
+})(jQuery);
View
30 css/styles.css
@@ -12,7 +12,7 @@ body {
overflow-x: hidden;
}
-a:link, a:visited {
+a {
color: #3381d6;
-webkit-transition: color .7s ease;
-moz-transition: color .7s ease;
@@ -38,7 +38,7 @@ a:hover, a:active, a:focus {
min-width: 360px;
}
-.toc-holder a:link, .toc-holder a:visited {
+.toc-holder a {
text-decoration: none;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
@@ -47,17 +47,25 @@ a:hover, a:active, a:focus {
transition: all .7s ease;
}
-.toc-holder li li a:link, .toc-holder li li a:visited {
+.toc-holder li li a {
padding-left: 60px;
}
-.toc-holder li li li a:link, .toc-holder li li li a:visited {
+.toc-holder li li li a {
padding-left: 90px;
}
.toc-holder li a:hover {
background: #666;
- border-left: solid 5px transparent;
+ padding-left: 35px;
+}
+
+.toc-holder li li a:hover {
+ padding-left: 65px;
+}
+
+.toc-holder li li li a:hover {
+ padding-left: 95px;
}
.toc-holder {
@@ -65,7 +73,7 @@ a:hover, a:active, a:focus {
margin-top: -70px;
}
-.toc-link:link,.toc-link:visited {
+a.toc-link {
color: white;
position: relative;
display: block;
@@ -77,7 +85,7 @@ a:hover, a:active, a:focus {
background: #444;
}
-.toc-link:hover {
+a.toc-link:hover {
background: #666;
}
@@ -114,7 +122,7 @@ a:hover, a:active, a:focus {
padding: 0;
}
-.toc-h1 a:link,.toc-h1 a:visited {
+.toc-h1 a {
color: white;
padding: 5px 20px 5px 30px;
display: block;
@@ -150,7 +158,7 @@ h2 {
font-weight: bold;
}
-.top-link:link,.top-link:visited {
+.top-link {
display: block;
text-decoration: none;
position: fixed;
@@ -173,7 +181,7 @@ h2 {
right: 0;
}
- .toc-link:link,.toc-link:visited {
+ .toc-link {
width: 150%;
}
@@ -181,7 +189,7 @@ h2 {
width: 155%;
}
- .top-link:link,.top-link:visited {
+ .top-link {
top: 2px;
z-index: 20;
background: none;
View
8 index.html
@@ -16,7 +16,7 @@
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/normalize.css">
- <link rel="stylesheet" href="css/styles.css?v=1.0">
+ <link rel="stylesheet" href="css/styles.css?v=1.1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
@@ -50,7 +50,7 @@
</li>
<li class="toc-h1"><a href="#section4">4. Counterpane</a>
<ul class="toc-sub closed">
- <li><a href="#section4-1">4.1 Upon waking next morning about daylight, I found Queequeg's arm thrown over me</a></li>
+ <li><a href="#section4-1">4.1 Upon waking next morning about daylight, I found Queequeg's arm</a></li>
<li><a href="#section4-2">4.2 My sensations were strange</a></li>
</ul>
</li>
@@ -72,7 +72,7 @@
<p class="p1">The menu on this page was inspired by the fixed drop-down menu on the <a href="http://startupsthisishowdesignworks.com/">Startups, This Is How Design Works</a> website. This type of menu works best on a one-page site that has animated scrolling.</p>
- <p>View the same menu <a href="http://www.impressivewebs.com/demo-files/fixed-TOC-dropdown-jquery-alternate/">with no submenus</a></p>
+ <p>View the same menu <a href="http://www.impressivewebs.com/demo-files/fixed-TOC-dropdown-jquery-alternate/">with no submenus</a> or with <a href="http://www.impressivewebs.com/demo-files/fixed-TOC-dropdown-jquery-triple-sub/">triple-depth</a> submenus.</p>
<p><a href="http://www.impressivewebs.com/?p=6648">&lt; Go back to the article</a> | <a href="https://github.com/impressivewebs/fixed-TOC-dropdown-jquery">GitHub repo</a></p>
@@ -176,7 +176,7 @@ <h2 id="section6-2">But, besides the Feegeeans</h2>
</div><!-- .container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-<script src="js/jquery.fixedTOC.js?v=dfa"></script>
+<script src="js/jquery.fixedTOC.js?v=3.0"></script>
<script>
// call the plugin on the "#toc" element
$('#toc').fixedTOC({
View
31 js/jquery.fixedTOC.js
@@ -80,13 +80,33 @@
},
- doScroll : function () {
+ grabHash : function () {
+
+ if (location.hash) {
+ s.currHash = location.hash;
+ base.methods.doScroll(s.currHash);
+ }
+
+ },
+
+ doLocate : function () {
$(s.tocLinks).on('click', function () {
s.currHash = $(this)[0].hash;
+ base.methods.doScroll(s.currHash);
- $('html, body').animate({
+ return false;
+
+ });
+
+ },
+
+ doScroll : function (h) {
+
+ s.currHash = h;
+
+ $('html, body').animate({
scrollTop: $(s.currHash).offset().top - 80
}, s.scrollSpeed, function () {
if (history.pushState) {
@@ -97,10 +117,6 @@
}
});
- return false;
-
- });
-
},
doCloseMenu : function () {
@@ -149,7 +165,8 @@
if (s.useSubMenus) {
base.methods.doOpenItem();
}
- base.methods.doScroll();
+ base.methods.grabHash();
+ base.methods.doLocate();
base.methods.doCloseMenu();
if (s.topLinkWorks) {
base.methods.doTopLink();
View
4 triple-sub/README.md
@@ -0,0 +1,4 @@
+fixed-TOC-dropdown-jquery
+=========================
+
+A fixed table of contents drop-down menu jQuery plugin.
View
29 triple-sub/css/normalize.css
@@ -0,0 +1,29 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
+ margin:0;
+ padding:0;
+}
+table {
+ border-collapse:collapse;
+ border-spacing:0;
+}
+fieldset,img {
+ border:0;
+}
+address,caption,cite,code,dfn,em,strong,th,var {
+ font-style:normal;
+ font-weight:normal;
+}
+ol,ul {
+ list-style:none;
+}
+caption,th {
+ text-align:left;
+}
+h1,h2,h3,h4,h5,h6 {
+ font-size:100%;
+ font-weight:normal;
+}
+q:before,q:after {
+ content:'';
+}
+abbr,acronym { border:0;}
View
198 triple-sub/css/styles.css
@@ -0,0 +1,198 @@
+body {
+ margin: 0 auto;
+ font-family: Georgia, 'Times New Roman', serif;
+ font-size: 20px;
+ color: #343434;
+ background: #ebddba;
+ background: -webkit-linear-gradient(#ebddba, #f9f1dd, #ebddba);
+ background: -moz-linear-gradient(#ebddba, #f9f1dd, #ebddba);
+ background: -o-linear-gradient(#ebddba, #f9f1dd, #ebddba);
+ background: -ms-linear-gradient(#ebddba, #f9f1dd, #ebddba);
+ background: linear-gradient(#ebddba, #f9f1dd, #ebddba);
+ overflow-x: hidden;
+}
+
+a {
+ color: #3381d6;
+ -webkit-transition: color .7s ease;
+ -moz-transition: color .7s ease;
+ -o-transition: color .7s ease;
+ -ms-transition: color .7s ease;
+ transition: color .7s ease;
+}
+
+a:hover, a:active, a:focus {
+ color: #e06c1f;
+}
+
+.container {
+ width: 90%;
+ max-width: 900px;
+ margin: 0 auto;
+ position: relative;
+ padding: 70px 10px 0 10px;
+}
+
+.toc-holder {
+ width: 18%;
+ min-width: 360px;
+}
+
+.toc-holder a {
+ text-decoration: none;
+ -webkit-transition: all .7s ease;
+ -moz-transition: all .7s ease;
+ -o-transition: all .7s ease;
+ -ms-transition: all .7s ease;
+ transition: all .7s ease;
+}
+
+.toc-holder li li a {
+ padding-left: 60px;
+}
+
+.toc-holder li li li a {
+ padding-left: 90px;
+}
+
+.toc-holder li a:hover {
+ background: #666;
+ padding-left: 35px;
+}
+
+.toc-holder li li a:hover {
+ padding-left: 65px;
+}
+
+.toc-holder li li li a:hover {
+ padding-left: 95px;
+}
+
+.toc-holder {
+ position: fixed;
+ margin-top: -70px;
+}
+
+a.toc-link {
+ color: white;
+ position: relative;
+ display: block;
+ z-index: 20;
+ height: 40px;
+ line-height: 40px;
+ padding-left: 10px;
+ width: 100%;
+ background: #444;
+}
+
+a.toc-link:hover {
+ background: #666;
+}
+
+.toc-link span {
+ font-size: 16px;
+ margin-right: 5px;
+ display: inline-block;
+ -webkit-transition: -webkit-transform .4s ease;
+ -moz-transition: -moz-transform .4s ease;
+ -o-transition: -o-transform .4s ease;
+ -ms-transition: -ms-transform .4s ease;
+ transition: transform .4s ease;
+}
+
+.toc-link span.rotate {
+ -webkit-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.toc {
+ position: absolute;
+ z-index: 10;
+ width: 103%;
+ background: #222;
+ padding: 40px 0 20px 0;
+}
+
+.toc-h1,.toc-h1 ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.toc-h1 a {
+ color: white;
+ padding: 5px 20px 5px 30px;
+ display: block;
+}
+
+.closed {
+ display: block;
+}
+
+h1 {
+ font-family: Georgia, sans-serif;
+ font-size: 2.3em;
+ font-style: italic;
+ margin: 0 0 40px 0;
+ text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
+}
+
+footer {
+ padding-bottom: 30px;
+}
+
+p {
+ margin-bottom: 30px;
+}
+
+.p1 {
+ color: darkgreen;
+}
+
+h2 {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 30px;
+ font-weight: bold;
+}
+
+.top-link {
+ display: block;
+ text-decoration: none;
+ position: fixed;
+ bottom: 0;
+ right: 2%;
+ color: white;
+ background: #222;
+ padding: 8px 16px 0 16px;
+ height: 30px;
+ font-size: 14px;
+ -webkit-border-radius: 10px 10px 0 0;
+ -moz-border-radius: 10px 10px 0 0;
+ border-radius: 10px 10px 0 0;
+}
+
+@media (max-width: 480px) {
+
+ .toc-holder {
+ left: 0;
+ right: 0;
+ }
+
+ .toc-link {
+ width: 150%;
+ }
+
+ .toc {
+ width: 155%;
+ }
+
+ .top-link {
+ top: 2px;
+ z-index: 20;
+ background: none;
+ }
+
+}
View
230 triple-sub/index.html
@@ -0,0 +1,230 @@
+<!doctype html>
+
+<html lang="en">
+
+<head>
+
+ <meta charset="utf-8">
+
+ <title>Fixed Table of Contents Dropdown Menu with jQuery</title>
+ <meta name="description" content="Fixed Table of Contents Dropdown Menu with jQuery">
+ <meta name="author" content="Impressive Webs">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="shortcut icon" href="/favicon.ico">
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+ <link rel="stylesheet" href="css/normalize.css">
+ <link rel="stylesheet" href="css/styles.css?v=1.1">
+
+ <!--[if lt IE 9]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+</head>
+<body>
+
+<div class="container">
+
+ <div id="toc-holder" class="toc-holder">
+ <a href="#" class="toc-link" id="toc-link"><span>&#9660;</span> Table of Contents</a>
+ <ul id="toc" class="toc">
+ <li class="toc-h1"><a href="#section1">1. Loomings</a>
+ <ul class="toc-sub closed">
+ <li><a href="#section1-1">1.1 Call me Ishmael</a>
+
+ <ul class="toc-sub closed">
+ <li><a href="#section1-1-1">1.1.1 Three Menu Deep</a></li>
+ <li><a href="#section1-1-2">1.1.2 Another Three Deep</a></li>
+ </ul>
+
+ </li>
+ <li><a href="#section1-2">1.2 Circumambulate</a></li>
+ </ul>
+ </li>
+ <li class="toc-h1"><a href="#section2">2. The Carpet-Bag</a>
+ <ul class="toc-sub closed">
+ <li><a href="#section2-1">2.1 I stuffed a shirt</a>
+
+ <ul class="toc-sub closed">
+ <li><a href="#section2-1-1">2.1.1 Next Three Deep</a></li>
+ <li><a href="#section2-1-2">2.1.2 Next Three Deep Again</a></li>
+ </ul>
+
+ </li>
+ <li><a href="#section2-2">2.2 As most young candidates</a></li>
+ </ul>
+ </li>
+ <li class="toc-h1"><a href="#section3">3. The Spouter-Inn</a>
+ <ul class="toc-sub closed">
+ <li><a href="#section3-1">3.1 Entering that gable-ended</a></li>
+ <li><a href="#section3-2">3.2 But what most puzzled</a></li>
+ </ul>
+ </li>
+ <li class="toc-h1"><a href="#section4">4. Counterpane</a>
+ <ul class="toc-sub closed">
+ <li><a href="#section4-1">4.1 Upon waking next morning about daylight, I found Queequeg's arm</a></li>
+ <li><a href="#section4-2">4.2 My sensations were strange</a></li>
+ </ul>
+ </li>
+ <li class="toc-h1"><a href="#section5">5. Breakfast</a>
+ <ul class="toc-sub closed">
+ <li><a href="#section5-1">5.1 I quickly followed suit</a></li>
+ <li><a href="#section5-2">5.2 You could pretty plainly tell</a></li>
+ </ul>
+ </li>
+ <li class="toc-h1"><a href="#section6">6. The Street</a>
+ <ul class="toc-sub closed">
+ <li><a href="#section6-1">6.1 If I had been astonished at first</a></li>
+ <li><a href="#section6-2">6.2 But, besides the Feegeeans</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- .toc-holder -->
+ <h1>Fixed Table of Contents Dropdown Menu with jQuery</h1>
+
+ <p class="p1">The menu on this page was inspired by the fixed drop-down menu on the <a href="http://startupsthisishowdesignworks.com/">Startups, This Is How Design Works</a> website. This type of menu works best on a one-page site that has animated scrolling.</p>
+
+ <p>View the same menu <a href="http://www.impressivewebs.com/demo-files/fixed-TOC-dropdown-jquery-alternate/">with no submenus</a> or with <a href="http://www.impressivewebs.com/demo-files/fixed-TOC-dropdown-jquery-alternate/">double-depth</a> submenus.</p></p>
+
+ <p><a href="http://www.impressivewebs.com/?p=6648">&lt; Go back to the article</a> | <a href="https://github.com/impressivewebs/fixed-TOC-dropdown-jquery">GitHub repo</a></p>
+
+ <section id="section1">
+ <h1>Loomings</h1>
+
+ <h2 id="section1-1">Call me Ishmael</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section1-1-1">Three Menu Deep</h2>
+ <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.</p>
+
+ <h2 id="section1-1-2">Another Three Deep</h2>
+ <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.</p>
+
+ <h2 id="section1-2">Circumambulate</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ </section>
+
+ <section id="section2">
+ <h1>The Carpet-Bag</h1>
+
+ <h2 id="section2-1">I stuffed a shirt</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section2-1-1">Three Menu Deep</h2>
+ <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.</p>
+
+ <h2 id="section2-1-2">Another Three Deep</h2>
+ <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.</p>
+
+ <h2 id="section2-2">As most young candidates</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+ </section>
+
+ <section id="section3">
+ <h1>The Spouter-Inn</h1>
+
+ <h2 id="section3-1">Entering that gable-ended</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section3-2">But what most puzzled</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+ </section>
+
+ <section id="section4">
+ <h1>Counterpane</h1>
+
+ <h2 id="section4-1">Upon waking next morning about daylight, I found Queequeg's arm thrown over me</h2>
+
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section4-2">My sensations were strange</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+ </section>
+
+ <section id="section5">
+ <h1>Breakfast</h1>
+
+ <h2 id="section5-1">I quickly followed suit</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section5-2">You could pretty plainly tell</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ </section>
+
+ <section id="section6">
+ <h1>The Street</h1>
+
+ <h2 id="section6-1">If I had been astonished at first</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ <h2 id="section6-2">But, besides the Feegeeans</h2>
+ <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ </section>
+
+ <footer>
+ <p>&copy; 2012 whatever</p>
+
+ <p><a href="http://www.impressivewebs.com/?p=6648">&lt; Go back to the article</a> | <a href="https://github.com/impressivewebs/fixed-TOC-dropdown-jquery">GitHub repo</a></p>
+
+ </footer>
+
+ <a href="#top" class="top-link" id="top-link">&#9650; Top</a>
+
+</div><!-- .container -->
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script src="js/jquery.fixedTOC.js?v=3.0"></script>
+<script>
+// call the plugin on the "#toc" element
+$('#toc').fixedTOC({
+ menuOpens: 'click', // or 'mouseenter'
+ scrollSpeed: 1000,
+ menuSpeed: 300,
+ useSubMenus: true,
+ resetSubMenus: true,
+ topLinkWorks: true
+});
+</script>
+
+<script>
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-1965499-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+</script>
+</body>
+</html>
View
202 triple-sub/js/jquery.fixedTOC.js
@@ -0,0 +1,202 @@
+(function ($) {
+ $.fixedTOC = function (el, settings) {
+
+ var base = this,
+ s = null;
+
+ base.$el = $(el);
+ base.el = el;
+
+ // Add a reverse reference to the DOM object
+ base.$el.data("fixedTOC", base);
+ base.settings = $.extend({}, $.fixedTOC.defaultSettings, settings);
+ s = base.settings;
+
+ if (!s.useSubMenus) {
+ s.tocLinks = '.toc-h1 > a';
+ }
+
+ base.methods = {
+
+ init : function () {
+
+ // Put your initialization code here
+
+ s.tocSub.slideUp();
+ s.tocHeight = base.$el.height() + 20;
+
+ base.$el.css({
+ top: '-' + s.tocHeight + 'px'
+ });
+
+ base.$el.addClass(s.tocUpClass);
+
+ },
+
+ doOpenMenu : function () {
+
+ s.tocLink.on(s.menuOpens, function () {
+
+ if (base.$el.hasClass(s.tocUpClass)) {
+
+ s.tocLink.find('span').addClass('rotate');
+
+ base.$el.stop().animate({
+ top: '0'
+ }, s.menuSpeed, function () {
+ base.$el.removeClass(s.tocUpClass);
+ });
+
+ } else {
+
+ s.tocHeight = base.$el.height() + 20;
+
+ s.tocLink.find('span').removeClass('rotate');
+
+ base.$el.stop().animate({
+ top: '-' + s.tocHeight + 'px'
+ }, s.menuSpeed, function () {
+ base.$el.addClass(s.tocUpClass);
+ s.tocSub.slideUp(0);
+ });
+
+ }
+
+ return false;
+ });
+
+ },
+
+ doOpenItem : function () {
+
+ $('.toc-h1>a, .toc-sub a').on('click', function () {
+
+ $(this).parent().siblings('.toc-h1').find('.toc-sub').stop().slideUp().addClass('closed');
+ $(this).next('.toc-sub').stop().slideToggle().toggleClass('closed');
+
+ return false;
+
+ });
+
+ },
+
+ grabHash : function () {
+
+ if (location.hash) {
+ s.currHash = location.hash;
+ base.methods.doScroll(s.currHash);
+ }
+
+ },
+
+ doLocate : function () {
+
+ $(s.tocLinks).on('click', function () {
+
+ s.currHash = $(this)[0].hash;
+ base.methods.doScroll(s.currHash);
+
+ return false;
+
+ });
+
+ },
+
+ doScroll : function (h) {
+
+ s.currHash = h;
+
+ $('html, body').animate({
+ scrollTop: $(s.currHash).offset().top - 80
+ }, s.scrollSpeed, function () {
+ if (history.pushState) {
+ history.pushState(null, null, s.currHash);
+ }
+ else {
+ location.hash = s.currHash;
+ }
+ });
+
+ },
+
+ doCloseMenu : function () {
+
+ $('#toc-holder').on('mouseleave', function () {
+
+ s.tocHeight = base.$el.height() + 20;
+ s.tocLink.find('span').removeClass('rotate');
+
+ base.$el.animate({
+ top: '-' + s.tocHeight + 'px'
+ }, s.menuSpeed, function () {
+ base.$el.addClass(s.tocUpClass);
+ if (s.resetSubMenus) {
+ $('.toc-sub').slideUp(1).addClass('closed');
+ }
+ });
+
+ });
+
+ },
+
+ doTopLink : function () {
+
+ $(s.topLink).on('click', function () {
+
+ s.currHash = $(this)[0].hash;
+
+ $('html, body').animate({
+ scrollTop: 0
+ }, s.scrollSpeed, function () {
+ location.hash = s.currHash;
+ });
+
+ return false;
+
+ });
+
+ }
+
+ };
+
+ // Run methods
+ base.methods.init();
+ base.methods.doOpenMenu();
+ if (s.useSubMenus) {
+ base.methods.doOpenItem();
+ }
+ base.methods.grabHash();
+ base.methods.doLocate();
+ base.methods.doCloseMenu();
+ if (s.topLinkWorks) {
+ base.methods.doTopLink();
+ }
+ };
+
+ $.fixedTOC.defaultSettings = {
+ // non-customizable settings
+ tocHeight : null,
+ tocSub : $('.toc-sub'),
+ tocUpClass : 'toc-up',
+ tocLink : $('#toc-link'),
+ tocLinks : '.toc-h1 ul a',
+ // if want top links to scroll, use:
+ //tocLinks : '.toc-h1 ul a, .toc-h1>a',
+ topLink : $('#top-link'),
+ currHash : null,
+ // customizable settings
+ menuOpens : 'click',
+ scrollSpeed : 1000,
+ menuSpeed : 300,
+ useSubMenus : true,
+ resetSubMenus : true,
+ topLinkWorks : true
+ };
+
+ $.fn.fixedTOC = function (settings) {
+ return this.each(function () {
+ (new $.fixedTOC(this, settings));
+ });
+ };
+
+})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.