8000 Hello Midnight.js! · JavaScriptCodes/midnight.js@e03032c · GitHub
[go: up one dir, main page]
Skip to content

Commit e03032c

Browse files
RobertoGonzalezRobertoGonzalez
committed
Hello Midnight.js!
0 parents  commit e03032c

File tree

35 files changed

+5039
-0
lines changed
  • background-4-mobile.jpg
  • background-4.png
  • background-5-mobile.jpg
  • background-5.png
  • background-top-mobile.jpg
  • background-top.jpg
  • background-top.png
  • city-mobile.jpg
  • city-mobile.png
  • city.png
  • github.png
  • logos-mobile.png
  • logos.png
  • scroll.png
  • space-island.jpg
  • normalize.css
  • styles.css
  • images
  • js
  • index.html
  • midnight.jquery.js

    • 35 files changed

    +5039
    -0
    lines changed

    ‎README.md

    Lines changed: 116 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,116 @@
    1+
    ## Midnight
    2+
    3+
    Switches dynamically between multiple header designs, so it looks in line with the content below it.
    4+
    5+
    6+
    ## Quick start
    7+
    8+
    Create your fixed nav (or header) as you typically would. For an example, something like this (you can use whatever markup suits you)
    9+
    10+
    ```html
    11+
    <nav class="fixed">
    12+
    <a class="logo">Logo</a>
    13+
    </nav>
    14+
    ```
    15+
    16+
    **Make sure the header works well with position:fixed**
    17+
    18+
    19+
    After that, take any sections of your page that need a different nav and add **data-midnight="your-class"** to it, where *your-class* is the class you are going to use to style that header. If you don't use the property or just leave it blank, the .default header will be used for that section.
    20+
    21+
    ```html
    22+
    <section data-midnight="white">
    23+
    <h1>A section with a dark background, so a white nav would look better here</h1>
    24+
    </section>
    25+
    26+
    <div data-midnight="blue">
    27+
    <h1>A blue nav looks better here</h1>
    28+
    </div>
    29+
    30+
    <footer>
    31+
    <h1>This will just use the default header</h1>
    32+
    </footer>
    33+
    ```
    34+
    35+
    Multiple headers as necessary will be created based on the classes declared in these sections.
    36+
    37+
    You can style it in your css using the class .midnightHeader.your-class (replace your-class with the correct one). For example:
    38+
    39+
    40+
    ```css
    41+
    .midnightHeader.default {
    42+
    background: none;
    43+
    color: black;
    44+
    }
    45+
    .midnightHeader.white {
    46+
    background: white;
    47+
    color: black;
    48+
    }
    49+
    .midnightHeader.blue {
    50+
    background: blue;
    51+
    color: white;
    52+
    }
    53+
    .midnightHeader.red {
    54+
    background: red;
    55+
    color: white;
    56+
    }
    57+
    ```
    58+
    59+
    60+
    To initialize, just load midnight and initialize it
    61+
    62+
    ```html
    63+
    <script src="midnight.jquery.js"></script>
    64+
    <script>
    65+
    // Start midnight
    66+
    $(document).ready(function(){
    67+
    // Change this to the correct selector for your nav.
    68+
    $('nav.fixed').midnight();
    69+
    });
    70+
    </script>
    71+
    ```
    72+
    73+
    74+
    ## Using custom markup
    75+
    76+
    Let's say you want to create a special header with a butterfly in it, which needs some extra markup. You need to do two things:
    77+
    78+
    * First, add a div with the class **.midnightHeader.default** . This will be the header that's used for every section (that doesn't have a specific style) and duplicated as necessary, automatically replacing .default with the correct class.
    79+
    80+
    * Then, add a div with the class **.midnightHeader.your-class** (like .butterfly). This will be used in that case instead, so you can use some custom markup in that case. Repeat this step for any other header with custom markup.
    81+
    82+
    * Keep in mind that **all headers need to be the same height**. Take that into account when styling your headers. If you have one that's larger than usual, we recommend you make all the headers the same height and try to handle it with additional markup.
    83+
    84+
    85+
    ```html
    86+
    <nav class="fixed">
    87+
    <!-- Your standard header -->
    88+
    <div class="midnightHeader default">
    89+
    <a class="logo">Logo</a>
    90+
    </div>
    91+
    92+
    <!-- A header with a butterfly -->
    93+
    <div class="midnightHeader butterfly">
    94+
    <a class="logo">Logo</a>
    95+
    <span class="a-butterfly"><!-- Everybody loves butterflies! --></span>
    96+
    <span class="another-butterfly"><!-- OH GOD THEY ARE IN MY FACE --></span>
    97+
    <span class="yet-another-butterfly"><!-- AAAAAHHHHHHHHHHHHHHHHHHHHH --></span>
    98+
    </div>
    99+
    </nav>
    100+
    ```
    101+
    102+
    103+
    ## Options
    104+
    105+
    You can use a variety of custom options when using midnight:
    106+
    107+
    ```js
    108+
    $('nav').midnight({
    109+
    // The class that wraps each header. Used as a clipping mask.
    110+
    headerClass: 'midnightHeader',
    111+
    // The class that wraps the contents of each header. Also used as a clipping mask.
    112+
    innerClass: 'midnightInner',
    113+
    // The class used by the default header (useful when adding multiple headers with different markup).
    114+
    defaultClass: 'default'
    115+
    });
    116+
    ```

    0 commit comments

    Comments
     (0)
    0